Stop HLS - React Native

This could refer to stopping the transmission of an ongoing HLS stream, which would mean the stream is no longer available to viewers.

Stopping HLS

stopHls() can be used to stop a interactive livestream of the meeting which can be accessed from the useMeeting hook.

Example

import { useMeeting } from "@videosdk.live/react-native-sdk";
import { TouchableOpacity, Text } from "react-native";

const MeetingView = () => {
  const { stopHls } = useMeeting();

  const handleStopHls = () => {
    // Stop Hls
    stopHls();
  };

  return (
    <>
      <TouchableOpacity
        onPress={() => {
          handleStopHls();
        }}
      >
        <Text>Stop Hls</Text>
      </TouchableOpacity>
    </>
  );
};

Event associated with HLS

• onHlsStateChanged - Whenever meeting HLS state changes, then onHlsStateChanged event will trigger.

note

downstreamUrl is now depecated. Use playbackHlsUrl or livestreamUrl in place of downstreamUrl

• You will get HLS_STOPPING and HLS_STOPPED status on calling stopHls().

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

function onHlsStateChanged(data) {
  const { status } = data;

  if (status === Constants.hlsEvents.HLS_STARTING) {
    console.log("Meeting Hls is starting");
  } else if (status === Constants.hlsEvents.HLS_STARTED) {
    console.log("Meeting Hls is started");
  } else if (status === Constants.hlsEvents.HLS_PLAYABLE) {
    // on hlsStateChanged started you will receive  playbackHlsUrl and livestreamUrl
    const {  playbackHlsUrl } = data;
    console.log("Meeting Hls is Playable");
  } else if (status === Constants.hlsEvents.HLS_STOPPING) {
    console.log("Meeting Hls is stopping");
  } else if (status === Constants.hlsEvents.HLS_STOPPED) {
    console.log("Meeting Hls is stopped");
  } else {
    //
  }
}

const {
  meetingId
  ...
} = useMeeting({
  onHlsStateChanged,
  ...
});

API Reference

The API references for all the methods utilized in this guide are provided below.

• stopHls
• onHlsStateChanged