Interactive Livestream (HLS) - React Native

Interactive live streaming (HLS) refers to a type of live streaming where viewers can actively engage with the content being streamed and with other viewers in real-time.

In an interactive live stream (HLS), viewers can participate in various activities, such as live polling, Q&A sessions, and even sending virtual gifts to the content creator or each other.

VideoSDK also allows you to configure the interactive livestream layouts by choosing a prebuilt layout in the configuration.

This guide provides an overview of how to implement starting and stopping Http Live Streaming (HLS).

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• startHLS()
• stopHLS()

important

To initiate automatic Interactive live streaming (HLS) at the beginning of a session, simply provide the autoStartConfig feature hls during room creation. For more information on configuring the autoStartConfig, please refer to the provided documentation here.

startHLS()

The startHLS() method, accessible from the useRoom hook, is used to initiate interactive livestream of a room. This method accepts the following parameters:

• config (optional): This parameter defines how the interactive livestream layout should look like.

  try {
    await startHLS({
      // Layout Configuration
      layout: {
        type: "GRID", // "SPOTLIGHT" | "SIDEBAR",  Default : "GRID"
        priority: "SPEAKER", // "PIN", Default : "SPEAKER"
        gridSize: 4, // MAX : 25
      },
  
      // Theme of interactive livestream layout
      theme: "DARK", //  "LIGHT" | "DEFAULT"
  
      // `mode` is used to either interactive livestream video & audio both or only audio.
      mode: "video-and-audio", // "audio", Default : "video-and-audio"
  
      // Quality of interactive livestream and is only applicable to `video-and-audio` type mode.
      quality: "high", /* Default : "med"
     "low" (SD HLS) | "med" (HD HLS) | "high" (FHD HLS) */
  
      // This mode refers to orientation of interactive livestream.
      // landscape : Start interactive livestream of the room in horizontally
      // portrait : Start interactive livestream of the room in vertically (Best for mobile view)
      orientation: "portrait", // "landscape" | "portrait",  Default : "landscape"
    });
  } catch (err) {
    console.error("startHLS failed:", err);
  }

• transcription (optional): This parameter turns on post transcription of the interactive livestream. It takes enabled, an optional summary object with enabled and an optional prompt, and an optional modelId.

  try {
    await startHLS(
      { layout: { type: "GRID", priority: "SPEAKER", gridSize: 4 } },
      {
        enabled: true,
        summary: {
          enabled: true,
          prompt: "Write summary in sections like Title, Agenda, Speakers, Action Items, Outlines, Notes and Summary",
        },
      }
    );
  } catch (err) {
    console.error("startHLS failed:", err);
  }

stopHLS()

• The stopHLS() method, accessible from the useRoom hook, is used to stop the interactive livestream of a room.

Example

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

const RoomView = () => {
  const { startHLS, stopHLS } = useRoom();

  const handleStartHls = async () => {
    // Start Hls
    try {
      await startHLS({
        layout: {
          type: "GRID",
          priority: "SPEAKER",
          gridSize: 4,
        },
        theme: "DARK",
        mode: "video-and-audio",
        quality: "high",
        orientation: "portrait",
      });
    } catch (err) {
      console.error("startHLS failed:", err);
    }
  };

  const handleStopHls = async () => {
    // Stop Hls
    try {
      await stopHLS();
    } catch (err) {
      console.error("stopHLS failed:", err);
    }
  };

  return (
    <>
      <TouchableOpacity
        onPress={() => {
          handleStartHls();
        }}
      >
        <Text>Start Hls</Text>
      </TouchableOpacity>

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

tip

If you want to learn more about the Interactive Livestream and how to implement it on your own platform, you can checkout this guide.

Event associated with HLS

• onHlsStateChanged - The onHlsStateChanged() event is triggered whenever the state of room HLS changes.

• The event receives { state, hlsUrl }. You can get the playbackHlsUrl and livestreamUrl from hlsUrl to play on the Viewer side when the state changes to Constants.hlsEvents.HLS_PLAYABLE.

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

function onHlsStateChanged(data) {
  const { state } = 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) {
    // on HLS_PLAYABLE, hlsUrl carries playbackHlsUrl and livestreamUrl
    const { playbackHlsUrl, livestreamUrl } = data.hlsUrl;
    console.log("Room Hls is playable");
  } 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 utilised in this guide are provided below.

• startHLS
• stopHLS
• onHlsStateChanged
• autoStartConfig