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.
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.cautionIf you don't have a value for
webhookUrl
orawsDirPath
and want to use theconfig
property, you should passnull
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 theuseMeeting
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.
Got a Question? Ask us on discord