Setup HLS Player - Javascript
This guide focuses on creating the Component responsible for playing the HLS stream. Before proceeding, ensure that you have set up a VideoSDK meeting, enabling you to join the room. For instructions on setting up a VideoSDK meeting, refer to the quick start guide.
For playing the HLS stream, you need to use the hls.js library.
1. Setup Component with HLS events
Step 1: Begin by creating the video container in your HTML file and importing the hls.js library using the <script> tag.
<!DOCTYPE html>
<html>
<head> </head>
<body>
<!-- ... -->
<!-- render Video -->
<div id="videoContainer"></div>
<!-- hls lib script -->
<script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
</body>
</html>
2. Playing HLS stream
- Now on the
hls-state-changedevent, when you getHLS_PLAYABLEfor the viewer participant, create a video element in the videoContainer div and pass playbackHlsUrl to hls.js.
note
downstreamUrl is now depecated. Use playbackHlsUrl or livestreamUrl in place of downstreamUrl
meeting.on("hls-state-changed", (data) => {
const { status } = data;
if (mode === Constants.modes.VIEWER) {
if (status === Constants.hlsEvents.HLS_PLAYABLE) {
const { playbackHlsUrl } = data;
let video = document.createElement("video");
video.setAttribute("width", "100%");
if (Hls.isSupported()) {
var hls = new Hls({
maxLoadingDelay: 1, // max video loading delay used in automatic start level selection
defaultAudioCodec: "mp4a.40.2", // default audio codec
maxBufferLength: 0, // If buffer length is/become less than this value, a new fragment will be loaded
maxMaxBufferLength: 1, // Hls.js will never exceed this value
startLevel: 0, // Start playback at the lowest quality level
startPosition: -1, // set -1 playback will start from intialtime = 0
maxBufferHole: 0.001, // 'Maximum' inter-fragment buffer hole tolerance that hls.js can cope with when searching for the next fragment to load.
highBufferWatchdogPeriod: 0, // if media element is expected to play and if currentTime has not moved for more than highBufferWatchdogPeriod and if there are more than maxBufferHole seconds buffered upfront, hls.js will jump buffer gaps, or try to nudge playhead to recover playback.
nudgeOffset: 0.05, // In case playback continues to stall after first playhead nudging, currentTime will be nudged evenmore following nudgeOffset to try to restore playback. media.currentTime += (nb nudge retry -1)*nudgeOffset
nudgeMaxRetry: 1, // Max nb of nudge retries before hls.js raise a fatal BUFFER_STALLED_ERROR
maxFragLookUpTolerance: 0.1, // This tolerance factor is used during fragment lookup.
liveSyncDurationCount: 1, // if set to 3, playback will start from fragment N-3, N being the last fragment of the live playlist
abrEwmaFastLive: 1, // Fast bitrate Exponential moving average half-life, used to compute average bitrate for Live streams.
abrEwmaSlowLive: 3, // Slow bitrate Exponential moving average half-life, used to compute average bitrate for Live streams.
abrEwmaFastVoD: 1, // Fast bitrate Exponential moving average half-life, used to compute average bitrate for VoD streams
abrEwmaSlowVoD: 3, // Slow bitrate Exponential moving average half-life, used to compute average bitrate for VoD streams
maxStarvationDelay: 1, // ABR algorithm will always try to choose a quality level that should avoid rebuffering
});
hls.loadSource(playbackHlsUrl);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
} else if (video.canPlayType("application/vnd.apple.mpegurl")) {
video.src = playbackHlsUrl;
video.addEventListener("canplay", function () {
video.play();
});
}
videoContainer.appendChild(video);
}
}
});
With this, the player is setup to play the HLS.
API Reference
The API references for all the methods utilized in this guide are provided below.
Got a Question? 
Ask us on discord
