Record Meeting - React
VideoSDK enables you to record video and audio during meetings, and you can access the recorded files in the developer dashboard or opt to store them in your own cloud storage.
Additionally, VideoSDK offers flexibility in configuring recording layouts. You can achieve this by selecting various prebuilt layouts in the configuration or by providing your own custom template for recording, tailored to your layout preferences.
This guide provides an overview of implementing the start and stop functionality for 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()
The startRecording()
method, accesible from the useMeeting
hook, is used to initiate the recording of a meeting. 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 here2. 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 AWS S3 Integration)3. config (optional)
: This parameter defines how the recording should be conductedcautionIf you don't have a value for
webhookUrl
orawsDirPath
and wish to utilize theconfig
property, you should passnull
in place of the missing values. Failing to do so may result in the configuration not being applied to 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: "landscape", // "portrait", Default : "landscape"
};
startRecording(null, null, config);
stopRecording()
The stopRecording()
method, accesible from the useMeeting
hook, is used to stop the recording of a meeting.
Example
import { useMeeting } from "@videosdk.live/react-sdk";
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: "landscape",
});
};
const handleStopRecording = () => {
// Stop Recording
stopRecording();
};
return (
<>
<button onClick={handleStartRecording}>Start Recording</button>
<button onClick={handleStopRecording}>Stop Recording</button>
</>
);
};
Event associated with Recording
- onRecordingStateChanged - The
onRecordingStateChanged()
event is triggered whenever the state of meeting recording changes.
import { Constants, useMeeting } from "@videosdk.live/react-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 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 have the option to employ your own custom-designed layout template for meeting recordings. To use a custom template, follow this guide to create and set up the template. Once the template is configured, you can initiate recording using the REST API, specifying the templateURL
parameter.
API Reference
The API references for all the methods utilized in this guide are provided below.
Got a Question? Ask us on discord