Wrapper
Our wrapper, such as described previously, is distributed in the form of an HTML page present at the following address:
https://obs.multistream.tools/v1/wrapper
The wrapper receives and transmits events emitted by our dock, the OBS JavaScript API and overlays. Without it, no overlay would have access to all of this; it is therefore necessary to use our wrapper to add overlays to your OBS installation, either as a browser source or as as a custom browser dock.
Parameters
| name | value | optional |
|---|---|---|
url | Remote HTTPS URL | no |
obsAPI | true | yes |
obsEvents | Event Names | yes |
To do this, the url parameter is mandatory, it is simply used to indicate the URL of the HTML page corresponding to the overlay to display. This page must be served over HTTPS. For example :
https://obs.multistream.tools/v1/wrapper?url=https://obs.multistream.tools/v1/overlays/chat/overlay
In case the overlay/dock to load has its own parameters it is important to encode (%26), in the value of the url parameter, the & characters separating the different parameters. We will therefore write:
https://obs.multistream.tools/v1/wrapper?url=https://obs.multistream.tools/v1/overlays/chat/overlay?ignore=StreamElements%26limit=10
Instead of:
https://obs.multistream.tools/v1/wrapper?url=https://obs.multistream.tools/v1/overlays/chat/overlay?ignore=StreamElements&limit=10
OBS JavaScript API
In order to access the OBS JavaScript API, an overlay must be loaded via a wrapper configured to gain this access. There are two dedicated optional parameters named obsAPI and obsEvents. The first allows the overlay to control OBS while the second will set up event listeners transmitting information directly to the overlay. These two parameters are independent.
To grant access to the OBS JavaScript API, it is necessary to properly configure the Page permissions attribute of the browser source associated with the wrapper.
We will therefore write this to activate access to the OBS JavaScript API:
https://obs.multistream.tools/v1/wrapper?obsAPI&url=https://your-domain.com/overlay.html
For example this to listen to both obsStreamingStarted and obsStreamingStopped events:
https://obs.multistream.tools/v1/wrapper?obsEvents=StreamingStarted,StreamingStopped&url=https://your-domain.com/overlay.html
Event names to listen to must be comma separated, without spaces. The obs prefix must be removed and capital letters must be retained.
And finally this for both at once:
https://obs.multistream.tools/v1/wrapper?obsAPI&obsEvents=StreamingStarted,StreamingStopped&url=https://your-domain.com/overlay.html
For a practical example of use, go to our page dedicated to overlay development.
Configurator
To help you build the URLs for your overlays, we provide a configurator available on the page dedicated to overlays.