NEWDolby Interactivity APIs are now the Dolby.io Communications APIs Learn More >
X

Record the Conference

This tutorial guides how to add a recording feature to your conference application. We will use the RecordingService.

Start recording

Layout editing

Open the index.html file and add a new div with the id recording and in it create:

  • a button with the id start-recording-btn
  • a p element with the id record-status

The record-status element will be used to inform when the conference is being recorded.

<div id="actions">...</div>
<!-- ADD recording JUST AFTER actions -->
<div id="recording">
    <button id="start-recording-btn" disabled>Start recording</button>
    <p id="record-status"></p>
</div>

Interface linking

Declare the button

Open the ui.js file and declare the startRecordingBtn at the top of the initUI function:

const initUI = () => {
    ...
    const startRecordingBtn = document.getElementById('start-recording-btn');

Enable/disabled the button

Edit the joinButton onclick handler to enable the startRecordingBtn when the conference is joined:

... => VoxeetSDK.conference.join(conference, {}))
        .then(() => {
            ...
            startRecordingBtn.disabled = false;

Then, edit the leaveButton onclick handler to disable the startRecordingBtn when the conference is left:

leaveButton.onclick = () => {
    VoxeetSDK.conference.leave()
        .then(() => {
            startRecordingBtn.disabled = true;
    ...

Logic implementation

Write the onclick function for the startRecordingBtn:

startRecordingBtn.onclick = () => {
    let recordStatus = document.getElementById("record-status")
    VoxeetSDK.recording.start()
        .then(() => {
            recordStatus.innerText = "Recording";
        })
        .catch((err) => console.error(err));
}

Stop recording

Layout editing

Open the index.html file and add a button with the id stop-recording-btn as a child of the recording div:

<div id="recording">
    <button id="start-recording-btn" disabled>Start recording</button>
    <!-- ADD THE stop-recording-btn HERE -->
    <button id="stop-recording-btn" disabled>Stop recording</button>
    <p id="record-status"></p>
</div>

Interface linking

Get element from the document

Open ui.js and declare the stopRecordingBtn in the initUI:

const initUI = () => {
    ...
    const stopRecordingBtn = document.getElementById("stop-recording-btn");
    ...
}

Enable/disable the button

Edit the startRecordingBtn onclick handler to enable the stopRecordingBtn once a recording is started:

startRecordingBtn.onclick = () => {
    ...recording.start()
        .then(() => {
            ...
            stopRecordingBtn.disabled = false;
    ...

Edit the leaveButton onclick handler to disable the button when the conference is left:

leaveButton.onclick = () => {
    VoxeetSDK.conference.leave()
        .then(() => {
            ...
            stopRecordingBtn.disabled = true;
    ...

Logic implementation

Onclick handler

Open the ui.js file and in the initUI function, write the onclick function for the stopRecordingBtn:

const initUI = () => {
    ...
    stopRecordingBtn.onclick = () => {
        let recordStatus = document.getElementById("record-status");
        VoxeetSDK.recording.stop()
            .then(() => {
                startRecordingBtn.disabled = false;
                stopRecordingBtn.disabled = true;
                recordStatus.innerText = '';
            })
            .catch((err) => console.error(err));
    };

Did this page help you?