Skip to main content

OBS

The best free software for streaming and recording videos.

Functioning​

The idea is not to establish a course on Open Broadcaster Software (OBS), others have already done this long before us and better than we probably ever will. YouTube is also full of tutorials if you really need to go deeper into the subject; here we will simply address the points strictly necessary for setting up our tools.

OBS firstly allows you to define scenes in which you add sources which you can position in a preview zone representing what your spectators will see on their screens. Secondly, you will also configure docks, i.e. panels that only you will be able to see.

Scenes​

You will therefore divide your stream into different scenes depending on what you want to show and navigate from one to another with a single click. The following scenes are commonly found among most streamers:

  • Start scene; a countdown to the start of the stream, this is the first scene displayed during a live broadcast
  • Talk scene; the streamer's webcam is displayed in full screen, the chat messages are also displayed on top of it, this is the scene allowing you to chat with your spectators
  • Gameplay scene; the streamer's webcam is displayed reduced in a corner of the screen on top of a video game capture source, this is the scene allowing to highlight content while retaining the reactions of the broadcaster
  • Be Right Back scene; a text explaining that the stream is temporarily interrupted, this is the scene that we will display when we have to take a quick break without ending the broadcast
  • End scene; a text explaining that the stream has ended and when the next one will take place, this is the last scene displayed during a live broadcast

Everything in a scene is called a source.

Sources​

There are several types of sources; some like images, texts, videos, webcam, etc. will be directly visible on your stream while others such as music will not. Regardless, sources always compose a given scene even if each source can be present on several scenes at the same time with potentially different attributes (settings).

Let's take the example of an image type source that would be configured to point to a particular file existing on your computer in the directory of your choice; this path is an attribute linked to the source which cannot change from one scene to another meaning you would have to create a new source to display another image. On the other hand, you would be able to modify the size of the image and its positioning on screen differently from one scene to another because these attributes are linked to a scene and not only to the source.

Feel free to carry out the staging with the sources (actors) of your choice to bring to life the universe that you wish to introduce to your spectators, like a movie director!

Docks​

Unlike sources, docks are OBS panels that only the streamer can see because they are not part of any scene. The scene list for example is nothing more than a dock. The interest here is to compose the OBS interface as you wish so that it perfectly fits both your needs and the size of your screen because each dock is resizable, movable and can can also be completely hidden or presented in the form of tabs to save space.

During a stream it is important to always be able to quickly monitor the operating status of OBS because the slightest problem will have direct repercussions on your broadcast. Dedicating a screen to OBS is therefore strongly recommended and you will be able to take advantage of the docks system to define custom panels which will open with OBS and then always be accessible to you.

Browser sources​

The purpose of a browser source is to display an HTML page in a scene; which, unlike an image for example, allows a certain dynamism thanks to the JavaScript code that can be executed inside of it. This is also for this reason the format preferred by all existing services distributing overlays to enhance your streams and Multistream Tools is no exception to the rule.

If it is possible to point either to an HTML file existing locally on your computer or to one hosted online, it is important to note that the second method unlocks access to more features in addition to making it easier to install and update overlays on different computers; this is why it is the one we chose for our tools.

You will therefore need to add browser sources to your different scenes to display Multistream Tools overlays.

note

Although this is generally not their purpose, browser sources are not interactive by default. In other words, clicking on them in the OBS preview area will have no effect but a simple click on the Interact button (appearing in the source toolbar once the latter is selected in the list or after clicking with the right mouse button on the name of the source in this same list) will remedy this problem if the need arises.

Custom browser docks​

In addition to predefined docks, it is possible to add custom browser docks in the form of Web pages to OBS. As for browser sources, it will again be a matter of pointing to a local or remote HTML file and we will always choose the second method for the reasons stated above.

Unlike browser sources, custom browser docks do not have options/attributes. We currently just can give them a name and a URL but they are intended to be interactive by default and developers will be delighted to learn that it is possible to inspect/debug via a single click on them with the right mouse button.

You will therefore need to add custom browser docks to your OBS installation to display Multistream Tools docks.

JavaScript API​

Being simple Web pages, HTML files displayed through browser sources have access to a JavaScript API (Application Programming Interface) natively exposed by OBS. This very powerful API allows, among other things, to write code to read information coming from OBS such as the name of the scene currently displayed, react to events such as a scene change but also to control the software to, for example, change scenes.

Multistream Tools overlays can obviously all take advantage of this API as long as the attribute of the associated browser source, named Page permissions, is configured correctly.

warning

Custom browser docks, unfortunately, do not yet have access to this functionality but this may change in the future.