Participant Track Recording - React

VideoSDK provides participant track recording, creating separate audio or video files for participant.

New files are generated when a participant starts their audio or video again after turning it off (e.g., unmuting the microphone or restarting the camera). This ensures that each file represents a continuous segment of audio or video content.

Once track recording is complete, all audio files for a participant are consolidated into a single directory, as are the video files.

Start Participant Track Recording

To start a participant track recording, you will have to call /v2/recordings/participant/track/start API with following body parameters.

• roomId: RoomId for which the participant track recording is to be started
• participantId: participantId of the participant to be recorder.
• kind: The kind of tracks you want to record.
  • You can pass following values: audio | video | screen_audio | screen_video
• fileFormat: Currently only webm is supported as file format. We will add the support for other formats in future.
• webhookUrl: The webhook URL where you would like to get the status updates of the recording. To learn more about webhooks refer here.
• bucketDirPath: If you are using your own storage, you can provide the directory path where you want to store the recording. To configure the storage please refere this quide.

The usual recording path would look like ${sessionId}/${participantId}/${kind}/${filename}.

import React, { useEffect } from "react";

const TrackRecordingStart = () => {
  const roomId = "<YOUR ROOM ID>";
  const participantId = "<PARTICIPANT ID>";
  const kind = "<YOUR STREAM KIND>"; // kind of track: audio, video etc.
  const fileFormat = "<YOUR FILE FORMAT>"; // (Optional) default: webm
  const bucketDirPath = "<YOUR CLOUD STORAGE BUCKET PATH>"; // (Optional)
  const webhookUrl = "<YOUR WEBHOOK URL>"; // (Optional)

  useEffect(() => {
    async function startTrackRecording() {
      const options = {
        method: "POST",
        headers: {
          Authorization: "$YOUR_TOKEN",
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          roomId: roomId,
          participantId: participantId,
          kind: kind,
          fileFormat: fileFormat,
          bucketDirPath: bucketDirPath,
          webhookUrl: webhookUrl,
        }),
      };

      const url = `https://api.videosdk.live/v2/recordings/participant/track/start`;
      const response = await fetch(url, options);
      const data = await response.json();
      console.log(data);
    }

    startTrackRecording();
  }, []);

  return <div>Track Recording Started...</div>;
};

export { TrackRecordingStart };

Stop Participant Track Recording

To stop a participant track recording, you will have to call /v2/recordings/participant/track/stop API with following body parameters.

• roomId: RoomId for which the participant track recording is to be stopped
• participantId: participantId for which the recording is to be stopped.
• kind: The kind of track recording you want to stop for the given participant.
  • You can pass following values: audio | video | screen_audio | screen_video

import React, { useEffect } from "react";

const TrackRecordingStop = () => {
  const roomId = "<YOUR ROOM ID>";
  const participantId = "<PARTICIPANT ID>";
  const kind = "<YOUR STREAM KIND>";

  useEffect(() => {
    async function stopTrackRecording() {
      const options = {
        method: "POST",
        headers: {
          Authorization: "$YOUR_TOKEN",
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          roomId: roomId,
          participantId: participantId,
          kind: kind,
        }),
      };

      const url = `https://api.videosdk.live/v2/recordings/participant/track/stop`;
      const response = await fetch(url, options);
      const data = await response.json();
      console.log(data);
    }

    stopTrackRecording();
  }, []);

  return <div>Track Recording Stopped...</div>;
};

export { TrackRecordingStop };

Webhook associated with Participant Track Recording

participant-track-recording-starting

• A "Participant Track Recording Starting" webhook is triggered when the track recording process for a participant is initiated.

Example

{
    "webhookType": "participant-track-recording-starting",
    "data": {
        "meetingId": "jvsg-8rjn-j304",
        "sessionId": "613731342f27f56e4fc4b6d0",
        "participantId": "abcd",
        "kind": "audio",
    },
}

---

participant-track-recording-started

• Participant Track Recording started webhook will be received when successfully track recording is started in meeting

Example

{
    "webhookType": "participant-track-recording-started",
    "data": {
        "meetingId": "jvsg-8rjn-j304",
        "sessionId": "613731342f27f56e4fc4b6d0",
        "participantId": "abcd",
        "kind": "audio",
    },
}

---

participant-track-recording-stopping

• A "Participant Track Recording Stopping" webhook is triggered when the track recording end process for a participant is initiated.

Example

{
    "webhookType": "participant-track-recording-stopping",
    "data": {
        "meetingId": "jvsg-8rjn-j304",
        "sessionId": "613731342f27f56e4fc4b6d0",
        "participantId": "abcd",
        "kind": "audio",
    },
}

---

participant-track-recording-stopped

• Participant Track Recording stopped webhook will be received when track recording is successfully stopped in meeting.

Example

{
    "webhookType": "participant-track-recording-stopped",
    "data": {
        "meetingId": "jvsg-8rjn-j304",
        "sessionId": "613731342f27f56e4fc4b6d0",
        "participantId": "abcd",
        "kind": "audio",
        "fileDetails" : [
            {
                "filePath" : "/encoded/videos/62d148951a1eb20029fc9b05.mp4",
                "fileUrl" : "https://cdn.videosdk.live/encoded/videos/62d148951a1eb20029fc9b05.mp4",
            }
        ]
    },
}

---

participant-track-recording-failed

• A "Participant Track Recording Failed" webhook is generated when the track recording process encounters an interruption or issue during either the starting or stopping phases.

Example

{
    "webhookType": "participant-track-recording-failed",
    "data": {
        "meetingId": "jvsg-8rjn-j304",
        "sessionId": "613731342f27f56e4fc4b6d0",
        "participantId": "abcd",
        "kind": "audio",
    },
}

---

API Reference

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

• Start Track Recording API
• Stop Track Recording API