WebRTC Live Seek
You can enable live seek capabilities for a live playback by providing a liveSeek
configuration in the initialization configuration for WHEPClient
and RTCSubscriber
.
The schema for the liveSeek
configuration is as follows:
{
enabled: <boolean>,
baseURL: <string | undefinde>,
fullURL: <string | undefined>,
hlsjsRef: <hls.js reference | undefined>,
hlsElement: <HTMLVideoElement | undefined>,
options: <object | undefined>,
usePlaybackControlsUI: <boolean>
}
enabled
: a boolean flag of whether live seek is enabled or disabled.baseURL
: (optional) the base URL to access the HLS files that are generated for live seek streams.fullURL
: (optional) the full URL to access the HLS files that are generated for live seek streams.hlsjsRef
: (optional) the HLS.JS reference. If you load HLS.js in a script tag, the SDK will check thewindow
global forHls
, otherwise provide a reference to the loaded HLS.js.hlsElement
: (optional) the targetvideo
element to attach the HLS Media to. If left undefined, the SDK will create and maintain the target element (recommended).options
: (optional) the configuration options for HLS.JS. Default is:{debug: false, backBufferLength: 0}
.usePlaybackControlsUI
: (optional) flag to use the custom controls provided by the SDK. Default istrue
. If setting this tofalse
, you must provide your own UI controls and interface with the API to control playback.
Server Requirements
To enable live seek capability, the following configuration properties are required on the server in order to allow HLS recording to support FMP4
playback:
File:
conf/hlsconfig.xml
Edits:
<property name="outputFormat" value="FMP4"/>
<property name="forceVODRecord" value="true"/>
Client Requirements
baseURL
The baseURL
is the base endpoint URL from which the SDK will access the recorded HLS files. By default, the SDK will assume the base URL is the host
of the initialization configuration, but when utilizing autoscale, the HLS files will not be accessible from the edge. As such, the server should be configured to upload the HLS files to a remote location – such as a CDN.
The storage of the HLS files should follow the convention of <baseURL>/<app scope>
, where app scope
is where the live broadcast stream is streaming to and the bucket name within the CDN; do not include the app scope
in the baseURL
property.
For example, if your live broadcast is streaming to the
live
app scope under the name ofstream1
, and your CDN resides athttps://yourcdn/company
, then just providehttps://yourcdn/company
as thebaseURL
and the SDK will attempt to access the HLS files athttps://yourcdn/company/live/stream1.m3u8
.
fullURL
The fullURL
could be provided that will be the full URL path to the HLS file used in live seek. If this is provided, it will use this untouched and load the file directly.
For example, if you provide
https://yourcdn/company/live/stream1.m3u8
as thefullURL
, that file will be requested.
hlsjsRef
The SDK requires the dependency of HLS.JS 3rd-party library in order to achieve live seek of a stream.
If you include it as a script
tag source in your page, you do not have to set the hlsjsRef
property, as the SDK will check the window
global for the existance of Hls
. In the chance that you did not include the UMD distribution of the library and instead are using it modularly, you need to provide a reference to the Hls
import.
hlsElement
The optional target video
element to load the HLS files into. If left undefined
(the default), the SDK with generate and maintain the backing video element. By providing a target hlsElement
you may need to maintain its own lifecycle.
options
Provide an optional options
configuration that will be assigned untouched to the underlying HLS.JS use.
usePlaybackControlsUI
Flag to use the default playback controls of the SDK to play, pause, live scrub, and additional actions. If setting this to false
, you will need to create and manage your own controls to interact with the live and VOD content.
You can also provide your own custom controls and/or class declarations easily following this guideline.