RTMP Livestream - React Native

RTMP is a widely used protocol for live streaming video content from VideoSDK to platforms like YouTube, Twitch, Facebook, and others.

To initiate live streaming from VideoSDK to platforms supporting RTMP ingestion, you simply need to provide the platform-specific stream key and stream URL. This enables VideoSDK to connect to the platform's RTMP server and transmit the live video stream.

You can set the livestream layout by choosing a prebuilt layout in the configuration or by providing your own custom template.

This guide will provide an overview of how to implement starting and stopping RTMP livestreaming with VideoSDK.

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.

• startLivestream()
• stopLivestream()

startLivestream()

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

• 1. outputs: This parameter takes an array of objects containing the RTMP url and streamKey specific to the platform where you want to initiate the livestream.

• 2. config (optional): This parameter defines the layout configuration for the livestream.

  const outputs = [
    {
      url: "<RTMP_URL>",
      streamKey: "<RTMP_STREAM_KEY>",
    },
  ];
  
  try {
    await startLivestream(outputs, {
      // Layout Configuration
      layout: {
        type: "GRID", // "SPOTLIGHT" | "SIDEBAR",  Default : "GRID"
        priority: "SPEAKER", // "PIN", Default : "SPEAKER"
        gridSize: 4, // MAX : 4
      },
  
      // Theme of RTMP
      theme: "DARK", //  "LIGHT" | "DEFAULT"
    });
  } catch (err) {
    console.error("startLivestream failed:", err);
  }

stopLivestream()

The stopLivestream() method, accessible from the useRoom hook, is used to stop the RTMP livestream of a room.

Example

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

const RoomView = () => {
  const { startLivestream, stopLivestream } = useRoom();

  const handleStartLivestream = async () => {
    // Start Livestream
    try {
      await startLivestream(
        [
          {
            url: "rtmp://a.rtmp.youtube.com/live2",
            streamKey: "key",
          },
        ],
        {
          layout: {
            type: "GRID",
            priority: "SPEAKER",
            gridSize: 4,
          },
          theme: "DARK",
        }
      );
    } catch (err) {
      console.error("startLivestream failed:", err);
    }
  };

  const handleStopLivestream = async () => {
    // Stop Livestream
    try {
      await stopLivestream();
    } catch (err) {
      console.error("stopLivestream failed:", err);
    }
  };

  return (
    <>
      <TouchableOpacity
        onPress={() => {
          handleStartLivestream();
        }}
      >
        <Text>Start Livestream</Text>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => {
          handleStopLivestream();
        }}
      >
        <Text>Stop Livestream</Text>
      </TouchableOpacity>
    </>
  );
};

Event associated with Livestream

• onLivestreamStateChanged - The onLivestreamStateChanged() event is triggered whenever the state of room livestream changes.

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

function onLivestreamStateChanged(data) {
  const { state } = data;

  if (state === Constants.livestreamEvents.LIVESTREAM_STARTING) {
    console.log("Room livestream is starting");
  } else if (state === Constants.livestreamEvents.LIVESTREAM_STARTED) {
    console.log("Room livestream is started");
  } else if (state === Constants.livestreamEvents.LIVESTREAM_STOPPING) {
    console.log("Room livestream is stopping");
  } else if (state === Constants.livestreamEvents.LIVESTREAM_STOPPED) {
    console.log("Room livestream is stopped");
  } else {
    //
  }
}

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

API Reference

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

• startLivestream
• stopLivestream
• onLivestreamStateChanged