Skip to main content

Create Custom Recording App Using Recording SDKs

When you join a Dyte meeting, the meeting layout is automatically designed to optimize your experience. This includes focusing on shared content and highlighting active speakers, while participants are shown in small thumbnail views. When you start recording the meeting, it is recorded with the same layout using the default UI kit component called DyteGrid.

If you wish to have a customized layout for your recording application, Dyte's custom recording SDKs provide the flexibility to tailor the appearance of your recordings according to your preferences. You can choose from options like:

  • Show only active speaker view
  • Shared screen with thumbnail gallery view
  • Shared screen with large active speaker thumbnail
  • Shared screen without active speaker or gallery view
  • Customized background for your recording
  • Portrait layout, and so on and so forth

Let's dive in to understand the steps involved in creating a custom appearance for your Dyte recording app.

The custom recording SDKs are used on top of the UI kit or Vanilla JS. The DyteRecording class is used for managing the recording functionality within the SDK.

Constructor​

constructor(options)

Creates an instance of the DyteRecording class.

Parameters​

options (object): The options object.

options (object)Description
options.waitTimeMs (number)The time (in milliseconds) to wait after all peers have left before leaving the meeting. This option is ignored if autoStop is set to true.
options.autoStart (boolean)Set to true if you want to manually call the startRecording function. By default, the autoStart parameter is set to true. If you wish to delay the start of the recording, you can set the value of this parameter to false. In that case, you can manually call the startRecording() function later. Note that there is a timeout of 2 minutes associated with the startRecording() method. If this method is not called within 2 minutes of the WebSocket connection being established, the recording process will encounter an error.
options.autoStop (boolean)Set to true if you want to disable automatic peer leave and manually call the stopRecording function.
options.scanInterval (number)The interval (in milliseconds) between scans for automatic peer leave.
options.devMode (boolean)Set to true to enable development mode, which enables logs and disables certain functionality. Also you must ensure that this is set this to true when testing your recording-app locally.

Methods​

init(client: DyteClient)

Initiates the SDK by providing a DyteClient object. Call this after creating the meeting object and before calling meeting.joinRoom().

startRecording();

Manually starts the recording. Ensure that autoStart is passed as true in the constructor options.

stopRecording();

Manually stops the recording. Ensure that autoStop is passed as true in the constructor options.

cleanup();

Performs cleanup tasks after leaving the meeting, such as clearing added listeners and closing WebSocket connections.

Usage Example​

Perform the following steps to create the recording app for your Dyte meetings.

Step 1: Install the SDK​

npm i @dytesdk/recording-sdk

Step 2: Import the DyteRecording object​

import { DyteRecording } from '@dytesdk/recording-sdk';

Step 3: Create the DyteRecording object​

const recordingSdk = new DyteRecording(options);

Step 4: Initialize the recording SDK​

Call init after creating the meeting object and before joinRoom is called.

// Call this after you have called initMeeting
await recordingSdk.init();

(Optional) Step 5: Manually start the recording​

To manually start the recording, call the startRecording() function. For example, you want to start a recording after you have loaded your UI content in the app and autoStart is not set to true. In such cases, you can manually call the startRecording() function when you are ready to begin the recording.

// This throws an exception if autoStart is set to false.
await recordingSdk.startRecording();

(Optional) Step 6: Manually stop the recording​

To manually stop the recording, use stopRecording.

// This throws an exception if autoStop is set to false.
await recordingSdk.stopRecording();

Once stopRecording is called, the recorder in your recording app will exit after a few seconds. After this point, you won't be able to perform any further actions within your recording app.

Step 7: Deploy the recording app​

Once you've created the app, deploy it using a platform like Vercel. Make sure to note the URL where you have deployed the app, as you will have to enter this URL in Dyte's recording API.

Step 8: Specify the custom URL​

In the Start Recording a Meeting API, provide the custom URL (obtained from the previous step) to indicate the location of your deployed app.