Video LP/Group Commentary Help?


#21

Hahaha, it keeps crashing and keeping the recording box open. :eyepop:

looks like 648x508 is capturing the whole window including the window title as well but FUCK IT. SO PROFESSIONAL, LOOK OUT CHIPCHEEZUM.

The video plays super fast while the sound doesn’t keep up. Gonna try turning the FPS down to 30…


#22

Is there a guide out there somewhere on how to start/configure a private streaming server? I don’t do a whole lot with streaming right now but that’s on my list of cool long-term projects I want to do eventually.


#23

There isn’t, really. I managed to make it happen by scraping together a few different resources and using someone else’s stream viewing page code for the user interface. I can gather some links and write a half-assed how-to once I get to an actual computer, if you like.


#24

Yeah sure. I kind of had the feeling this is relatively unexplored territory and I’ll have to do some digging/work on my own, but every little bit helps.


#25

I think a proper guide write-up would help a lot of people on the forums.


#26

Get you a server

So, first and foremost, get yourself a VPS or some other form of hosted Linux server with shell access. I use DigitalOcean, at their bottom-most tier. ($5/month for 20gb of disk and 2 TB of transfer) This has proved to be enough for me to run a personal web server, multiple Discord bots and the sidestream server.

RTMP servers and you!

The first thing I stumbled upon in my search was on the OBS forums: A great write-up, but I already had nginx installed for web purposes, and reconfiguring it would be a pain in the ass. Thankfully, in the comments, someone mentioned that they made a Docker container just for the RTMP re-streaming portion of nginx. The commenter linked to his GitHub repository which has instructions on how to add the container to your server. (DigitalOcean has a great How-To for installing Docker in Ubuntu (which works for Debian as well) here). I highly recommend using the example that lets you have an external nginx config, as it lets you add people to the stream server very easily. All that would be in the config would be:

worker_processes 1;

events {}

rtmp {
    server {
        listen 1935;

            application streamer1 {
                    live on;
                    record off;
            }
     }
}

Add more Application blocks for different users.

Viewing this mess

So now that you have the server up and running, you need to give people a way of seeing the stream. One way is to use VLC, as it can connect directly to RTMP streams. But since not everyone will have VLC installed, a webpage is great to have as a way to view the stream. Flowplayer is best for this, but sadly you are stuck with the Flash-based plugin, as there is currently no way to view an RTMP stream with the HTML5 player. You don’t need to actually install Flowplayer on your server, you can just call it from their website. Here is the HTML I used to get the webpage working:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Sidestream Test</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
  <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>
  <script type="text/javascript" src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js"></script>
  <script type="text/javascript">
    function get_key(){
      var re = /^\?id=([^&]*)/;
      if(re.test(location.search)) return location.search.replace(re, '$1');
      return "nokey";
    }
  </script>
<link rel="shortcut icon" href="favicon.ico" />
</head>

<body bgcolor=#222222>
<center>
<div style="width:1280px;height:720px;" align="center" id="player1">

</div>
</center>
<script>
  flowplayer("player1", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
    clip: { 
      url: '1', 
      live: 'true', 
      bufferLength: 0,
      bufferTime: 0,
      autoPlay: false,
      provider: 'rtmp' 
    }, 

plugins: { 

controls:  {
            backgroundGradient: 'none',
            backgroundColor: 'transparent',
            all:false,
            mute: true,
            volume: true,
            height:30
        },
    
       rtmp: { 
        url: 'flowplayer.rtmp-3.2.13.swf', 
        netConnectionUrl: 'rtmp://YOUR.URL:1935/'+get_key()
    },
}
});</script>

</body>
</html>

The important things to notice there are:

In the HTML Header there is a javascript function called get_key(). This will get a URLPARM that you specify to denote different streams. Eg: http://your.url/?id=streamer1
This allows you to have multiple people using your stream server at the same time.

A little further down in the HTML there is the Flowplayer definition. where it says url: '1' you are setting which stream under the user to view. We will touch more on this when we get to the “Stream to the server” section.

The last really important thing to note is under the rtmp: { block: Where it says netConnectionUrl: 'rtmp://YOUR.URL:1935/'+get_key()
This is adds the URLPARM that we extracted earlier into the stream URL.

So that is pretty much it for the web viewer set-up. Oh, and if you do want to view the stream in VLC, the network URL to use would be http://YOUR.URL/streamer1/1

Let’s Stream to the server

So all that is left is to configure OBS/whatever your streaming system of choice is to use the sidestream server. This is pretty simple… all you need to do is set the Server URL to: http://YOUR.URL/streamer1 and the Server Key to 1.

Here is where you can have some fun, though… If you wanted to do a multistream project, like a race, you can hand out your Server URL to the participants, and give them each individual Server Keys. It could be letters, numbers, words, whatever. Then, in OBS, you can add Media Sources with the stream URL of the racers. This is the same URL as VLC uses, just change the 1 at the end to the letter/number/word you gave the participant. Do this for all participants and boom! You are off to the races! please forgive the pun, I couldn’t help myself

So that’s about it for setting up a sidestream server… your mileage may vary. Using the nginx docker container is an extremely fast way of getting the server up and running, and the webpage shouldn’t take too long to bang out. I have 8 people configured on my server, and most of them use it regularly and I am still safely below my monthly quota that I can pursue other strange projects on my droplet. The latency is about 2 seconds, since there is no transcoding happening on the server. This seems to be true no matter how many people are viewing or streaming.

Let me know via reply or PM if you have any questions/concerns/improvements!