HLS Events - React Native

VideoSDK provides the onHlsStateChanged() event, which informs you about the current state of HLS for the room.

onHlsStateChanged()

• This event is triggered when the HLS state of the room changes.
• HLS_STARTED means the server has accepted the request. The stream can be played once the state is HLS_PLAYABLE.
• The callback receives { state, hlsUrl }. hlsUrl holds playbackHlsUrl and livestreamUrl, which are null until the stream is playable.
• It can be subscribed to using the useRoom hook.

Example

Here is an example demonstrating the usage of the event mentioned on this page.

import { Constants, useRoom } from "@videosdk.live/react-native-sdk";

function onHlsStateChanged(data) {
  const { state, hlsUrl } = data;

  if (state === Constants.hlsEvents.HLS_STARTING) {
    console.log("Room HLS is starting");
  } else if (state === Constants.hlsEvents.HLS_STARTED) {
    console.log("Room HLS is started");
  } else if (state === Constants.hlsEvents.HLS_PLAYABLE) {
    console.log("Room HLS is playable", hlsUrl.playbackHlsUrl);
  } else if (state === Constants.hlsEvents.HLS_STOPPING) {
    console.log("Room HLS is stopping");
  } else if (state === Constants.hlsEvents.HLS_STOPPED) {
    console.log("Room HLS is stopped");
  } else {
    //
  }
}

const { roomId } = useRoom({
  onHlsStateChanged,
});

API Reference

The API references for all the methods and events utilised in this guide are provided below.

• onHlsStateChanged()