Record Meeting - React Native

VideoSDK allows you to record video & audio during the meeting. The recording files are available in developer dashboard or you can also choose to store them in your own cloud storage.

VideoSDK also allows you to configure the recording layouts in numerous ways like by simply setting different prebuilt layouts in the configuration or by providing your own custom template to do the recording according to your layout choice.

This guide will provide an overview of how to implement start and stop Meeting Recording.

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

startRecording() can be used to start a recording of the meeting which can be accessed from the useMeeting hook. This method accepts three parameters:

• 1. webhookUrl (optional): This would the webhook URL where you would like to listen to event happening for the recording like starting and stopping of recording. It will be triggered when the recording is completed and stored into server. Read more about webhooks here

• 2. awsDirPath (optional): This parameter accepts the path for the your S3 bucket where you want to store recordings to. To allow us to store recording in your S3 bucket, you will need to fill this form by providing the required values. VideoSDK AWS S3 Integration

• 3. config (optional): This parameter will define how the recording should be recorded.

  caution

  If you don't have a value for webhookUrl or awsDirPath and want to use the config property, you should pass null in place of the missing value. otherwise, configurtion will not reflect in the recording.

  const config = {
    // 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", // "low" | "med",  Default : "med"
  
    // This mode refers to orientation of recording.
    // landscape : Record the meeting in horizontally
    // portrait : Record the meeting in vertically (Best for mobile view)
    orientation: "portrait", // "portrait",  Default : "landscape"
  };
  
  startRecording(null, null, config);

stopRecording()

• stopRecording() is used to stop the meeting recording 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 { startRecording, stopRecording } = useMeeting();

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

  const handleStopRecording = () => {
    // Stop Recording
    stopRecording();
  };

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

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

Event associated with Recording

• onRecordingStateChanged - Whenever meeting recording state changes, then onRecordingStateChanged event will trigger.

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

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

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

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

Storage Configuration

While recording your meetings, you can choose to store them on the VideoSDK's storage or you can also configure your own AWS S3 Storage, Azure Blob or GCP Cloud Storage to store the meeting recordings directly on your storage.

You can configure your own AWS S3 Storage, Azure Blob or GCP Cloud Storage from the VideoSDK Dashboard's API section.

You can also go through this guide to setup the storage or watch this video to configure your storage.

Custom Template

With VideoSDK, you can also use your own custom designed layout template to record the meetings. 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