News

3 Apr 2017

[Blog] Live streaming with MistServer and OBS Studio

Hello everyone! As previously described by Jaron this blog post will primarily be about the basics of live streaming and using OBS Studio specifically to do it. We have noticed that most beginners are confused by how to properly set up a live stream, as most questions we receive are questions on how to get their live stream working.

Basic Live streaming information

Most popular consumer streaming applications use RTMP to send data towards their broadcast target. The most confusing part for newer users is where to put which address, mostly because the same syntax is used for both publishing and broadcasting.

Standard RTMP url syntax
rtmp://*HOST*:*PORT*/*APPLICATION*/*STREAM_NAME*

Where:

  • *HOST* = The IP address or hostname of the server you are trying to reach
  • *PORT* = The port to be used; if left out it will use the default 1935 port.
  • *APPLICATION* = This is used to define which module should be used when connecting, within MistServer, this value will be ignored or used as password protection. The value must be provided, but may be empty.
  • *STREAM_NAME* = The stream name of the stream: used to match stream data to a stream id or name.

This might still be somewhat confusing, so I will make sure to give an example below.

  • Address of server running OBS: 192.168.137.19
  • Address of server running MistServer: 192.168.137.26
  • Port: Default 1935 used
  • Application: not used for mistserver, we use live to prevent unreadable URLs.
  • Stream name: livestream

MistServer settings

You can set the correct setting in MistServer when creating or editing a stream using the stream panel in the left menu.

  • Stream name: "livestream" no surprises here, both servers need to use the same stream name in order to make sure they are both connecting the stream data to the proper stream name.
  • Source: "push://192.168.137.19" MistServer needs to know what input will be used and where to expect it from. Using this source will tell MistServer to expect an incoming RTMP push from the ip 192.168.137.19. This will also make sure that only the address 192.168.137.19 is allowed to push this stream.

Image of the stream settings within MistServer

OBS Stream settings

You can find the OBS settings at the top menu under "File -> Settings". You will need the stream settings to set up the push towards MistServer.

  • Stream Type: Custom Streaming Server This is the category MistServer falls under.
  • URL: "rtmp://192.168.137.26/live/" Here we tell OBS to push the stream towards MistServer which can be found at 192.168.137.26. Note that this url includes the application name.
  • Stream key: "livestream" Here you will need to fill in the Stream id, which is the stream name we used in MistServer.

Image of the OBS Studio stream settings

OBS Output settings

I will not go into much detail here. The standard OBS settings should cover most streaming use cases. The encoder option decides how the stream is encoded; hardware accelerated encoders give best performance. It is best to use anything other than x264 if available, but if you must use it because you have no other (hardware) option, the preset veryfast is advisable as it is less intensive on your PC. The best way to find out which settings are best for you, is to experiment with them a bit.

Image of the OBS Studio output settings

Start streaming

Now that the settings for MistServer and OBS are done, we are all good to go. To start streaming all we will have to do is press the Start Streaming button in the bottom right corner of OBS.

Image of OBS Studio actively pushing a stream towards MistServer

Now that we are pushing the stream you should see the status change within MistServer from Unavailable to Standby and then to Active. Unavailable means the source is offline, Standby means the source is active and playback might be possible already and Active means the source is active and playback is guaranteed on all supported outputs.

Image of the streams panel showing stream status as it updates

To see if the stream is working we can click Preview and get to the preview panel, if everything is setup correctly we will be seeing a stream appear soon enough.

Image of the preview panel within MistServer showing video playback

Getting your stream to your viewers

Now that we have verified the setup works we will want to make sure our viewers can watch as well. The easiest method is to use our provided embeddable code that will make your stream available on any webpage. You can find this under the Embed option at the top in the preview page, or to the right in the main streams panel.

At the embed page you can set up how the player should behave once it is loaded. The settings should be self-explanatory. Do note that the embed code options are not saved and will be reset once you leave the embed page. Under the embed options a list of supported protocols will be shown. This list is only available if the stream source is active, as it is based on the codecs of the incoming stream.

Image of the default embeddable code with used stream settings

All we have to do is change the embed code options to our liking and copy the Embed code to a webpage. I will be using the default options and have copied the result to a simple html file as shown below.

Image of the embed code added to a standard HTML page

After making the webpage available, we should be able to watch our stream without any problems, as long as your device has a browser.

Image of video playback on multiple devices

Well that is it for the basics on how to get a stream to work and reach your viewers using MistServer. Of course, getting the stream to work and setting the stream just right is not the same, but having playback definitely helps. Most notable is that the point of playback is not the same for every device, this changes because different protocols are used for different devices, inducing different delays. This brings us on our next topic: latency, which Erik will cover in the next post.