Recording in Live Stream - React Native

This guide shows how to start and stop recording during a live stream.

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.

• startRecording()
• stopRecording()

startRecording()

The startRecording() method, accessible from the useRoom hook, is used to initiate the recording of a live stream. This method accepts the following four parameters:

• 1. webhookUrl (optional): This is the webhook URL where you can listen to events related to the recording, such as the start and stop of recording. It triggers when the recording is completed and stored on the server. You can learn more about webhooks here

• 2. awsDirPath (optional): This parameter specifies the path to your S3 bucket where you intend to store the recordings. To enable the storage of recordings in your S3 bucket with VideoSDK, follow this guide (VideoSDK Cloud (AWS S3, Azure Blob or GCP ) Integration)

• 3. config (optional): This parameter defines how the recording should be conducted

  caution

  If you don't have a value for webhookUrl or awsDirPath and wish to utilize the config or transcription property, you should pass null in place of the missing values. Failing to do so may result in the configuration not being applied to the recording.

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

• 4. transcription (optional): Generates a transcription, and optionally a summary, after the recording ends. It takes enabled, summary ({ enabled, prompt }) and modelId.

  try {
    await startRecording(null, null, null, {
      enabled: true,
      summary: {
        enabled: true,
        prompt: "Write summary in sections like Title, Agenda, Speakers, Action Items, Outlines, Notes and Summary",
      },
    });
  } catch (err) {
    console.error("startRecording failed:", err);
  }

startRecording() resolves before the recording has started. The recording has started when onRecordingStateChanged reports RECORDING_STARTED.

stopRecording()

The stopRecording() method, accessible from the useRoom hook, is used to stop the recording of a live stream. The recording has stopped when onRecordingStateChanged reports RECORDING_STOPPED.

Example

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

const RoomView = () => {
  const { startRecording, stopRecording } = useRoom();

  const handleStartRecording = async () => {
    // Start Recording
    // If you don't have a `webhookUrl` or `awsDirPath`, you should pass null.
    try {
      await startRecording("YOUR WEB HOOK URL", "AWS Directory Path", {
        layout: {
          type: "GRID",
          priority: "SPEAKER",
          gridSize: 4,
        },
        theme: "DARK",
        mode: "video-and-audio",
        quality: "high",
        orientation: "landscape",
      });
    } catch (err) {
      console.error("startRecording failed:", err);
    }
  };

  const handleStopRecording = async () => {
    // Stop Recording
    try {
      await stopRecording();
    } catch (err) {
      console.error("stopRecording failed:", err);
    }
  };

  return (
    <>
      <TouchableOpacity onPress={handleStartRecording}>
        <Text>Start Recording</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={handleStopRecording}>
        <Text>Stop Recording</Text>
      </TouchableOpacity>
    </>
  );
};

important

To initiate automatic recording at the beginning of a session, simply provide the autoStartConfig feature recording during room creation. For more information on configuring the autoStartConfig, please refer to the provided documentation here.

Events associated with recording

Following callback is received when recording state changes.

• All participants-including all the hosts and audience members will receive a callback on the onRecordingStateChanged event with the current state of the recording.

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

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

  if (state === Constants.recordingEvents.RECORDING_STARTING) {
    console.log("Room Recording is starting");
  } else if (state === Constants.recordingEvents.RECORDING_STARTED) {
    console.log("Room Recording is started");
  } else if (state === Constants.recordingEvents.RECORDING_STOPPING) {
    console.log("Room Recording is stopping");
  } else if (state === Constants.recordingEvents.RECORDING_STOPPED) {
    console.log("Room Recording is stopped");
  } else {
    //
  }
}

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

API Reference

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

• startRecording
• stopRecording
• onRecordingStateChanged
• autoStartConfig