Efficient tools to build your streaming infrastructure

Adding DVR into SLDP HTML5 Player



Softvelum Low Delay Protocol – SLDP – is a low latency playback technology that our team developed a few years ago as a replacement for RTMP playback in browsers. Nowadays, SLDP is a full-scale playback technology with adaptive bitrate , multi-device synchronization and many other features.

SLDP is a live streaming protocol which means that it’s typically used for watching something that’s happening right now close to real time. However, there are cases when a viewer might want to pause the stream or rewind it back, along with the ability to jump back to real-time.

Now SLDP HTML5 Player is capable of using a backup HLS stream to provide the playback of the stream’s recording. Let’s see how this works. Let’s assume you’re Nimble Streamer instance administrator who also manages the website with HTML5 Player.

Here’s the workflow for this scenario:

  • Enable DVR for the output live stream where SLDP is used.
  • Download and use the latest version of SLDP HTML5 Player from its official webpage.
  • Add certain parameters in HTML5 Player as described below to specify HLS stream for DVR playback.
  • When viewers open your playback page and start the playback, they are shown SLDP HTML5 Player and watch SLDP live stream.
  • If a viewer tries to scrolls play head backwards or click on arbitrary spot of the progress bar, HTML5 Player is replaced with HLS.js player.
  • HLS.js player starts the playback of the pre-defined HLS DVR stream archive.
  • If a viewer chooses to resume live playback (i.e. scrolls forward to current moment), then HTML5 Player is shown and it starts playing SLDP live stream.

Here’s what you need to set up in HTML5 Player. It now has a “vod” setting which includes the setup, in addition to other parameters you are familiar with.

vod – video-on-demand playback settings which is usually referred to as “DVR stream”. This settings can be defined as an object, or you can set it to simply to “true” or “false” values. true value has the same meaning as an empty object, false means the feature is switched off. If this parameter is not defined, VOD functionality is not working by default. VOD feature is backed by open source HLS.js library. The following settings are supported:

  • url – (optional) URL to HLS stream that provides recorded content. If not defined, SLDP HTML5 Player will use default Nimble Streamer DVR path to archive according to the live stream URL.
  • hlsjs – (optional) HLS.js library settings. It can be either object or string. Currently 2 string values are available:
    • ‘local’ – HLS.js is already included in the web application, so SLDP Player doesn’t load anything.
    • ‘cdn’ – (default) SLDP Player will automatically load HLS.js library from the official CDN URL.
    If the hlsjs parameter is defined as object, it can contain the following fields (currently only one parameter is supported):
    • source – a URL to HLS.js library if a specific version is required.

The default DVR path mentioned above will be composed as follows. Let’s say your SLDP URL is “wss://yourserver/live/stream”. The DVR URL is “https://yourserver/live/stream/playlist_dvr.m3u8”. If the server is set up correctly, this URL will be available by default.

Here are a few examples of DVR usage.

This example adds DVR capability. The stream is picked up according to DVR URL rules.

vod: true

This example specifies the URL of DVR stream and sets the player to get HLS.js from the web application

vod: {
    url: 'https://myserver.com:8081/live/stream/playlist_dvr.m3u8',
    hlsjs: 'local'
}

The last example makes the player to download the specific version of HLS.js, with default path to DVR archive:

vod: {
    hlsjs: {
        source: 'https://cdn.jsdelivr.net/npm/hls.js@1'
   }
}

With this feature you can give more flexibility to your viewers and provide them with even more use cases.

Let us know if you have any other suggestions regarding SLDP usage.