Record Room - React Native

VideoSDK enables you to record video and audio during rooms, and you can access the recorded files in the developer dashboard or opt to store them in your own cloud storage.

VideoSDK also allows you to configure the recording layouts by choosing a prebuilt layout in the configuration or by providing your own custom template for the recording.

This guide provides an overview of implementing the start and stop functionality for room recording.

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()

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.

startRecording()

The startRecording() method, accessible from the useRoom hook, can be used to initiate the recording of a room. This method accepts the following three 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 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: "portrait", // "portrait",  Default : "landscape"
    });
  } catch (err) {
    console.error("startRecording failed:", err);
  }

  note

  To record with post transcription, pass a transcription configuration as the fourth argument: startRecording(webhookUrl, awsDirPath, config, { enabled: true }). See Post Transcription & Summary.

stopRecording()

The stopRecording() method, accessible from the useRoom hook, is used to stop the recording of a room.

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", {
        // Configuration for recording
        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>
    </>
  );
};

Event associated with Recording

• onRecordingStateChanged - The onRecordingStateChanged() event is triggered whenever the state of room recording changes.

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 {
    //
  }
}

/** useRoom hooks events */
const {
  /** Methods */
} = useRoom({
  onRecordingStateChanged,
});

Storage Configuration

While recording your rooms, you have the flexibility to store them either on VideoSDK's storage or configure your own storage solution such as AWS S3 Storage, Azure Blob or GCP Cloud Storage. To set up your own storage, you can navigate to the API section in the VideoSDK Dashboard.

For detailed instructions on configuring storage or a step-by-step guide, you can refer to this documentation or watch the accompanying video tutorial.

Custom Template

With VideoSDK, you can also use your own custom designed layout template to record the rooms. In order to use the custom template, you need to create a template for which you can follow this guide. Once you have setup the template, you can use the REST API to start the recording with the templateUrl parameter.

API Reference

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

• startRecording
• stopRecording
• onRecordingStateChanged
• autoStartConfig