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 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(() => {
      joinButton.disabled = false;
      leaveButton.disabled = true;
      startVideoBtn.disabled = true;
      stopVideoBtn.disabled = true;
      startScreenShareBtn.disabled = true;
      stopScreenShareBtn.disabled = true;
      startRecordingBtn.disabled = true;
    })
    .catch((err) => console.error(err));
};

Logic implementation

Write the onclick function for the startRecordingBtn:

startRecordingBtn.onclick = () => {
  let recordStatus = document.getElementById("record-status");
  VoxeetSDK.recording
    .start()
    .then(() => {
      recordStatus.innerText = "Recording";
      startRecordingBtn.disabled = true;
    })
    .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 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 = () => {
  let recordStatus = document.getElementById("record-status");
  VoxeetSDK.recording
    .start()
    .then(() => {
      recordStatus.innerText = "Recording";
      startRecordingBtn.disabled = true;
      stopRecordingBtn.disabled = false;
    })
    .catch((err) => console.error(err));
};

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

leaveButton.onclick = () => {
  VoxeetSDK.conference
    .leave()
    .then(() => {
      joinButton.disabled = false;
      leaveButton.disabled = true;
      startVideoBtn.disabled = true;
      stopVideoBtn.disabled = true;
      startScreenShareBtn.disabled = true;
      stopScreenShareBtn.disabled = true;
      startRecordingBtn.disabled = true;
      stopRecordingBtn.disabled = true;
    })
    .catch((err) => console.error(err));
};

Logic implementation

Onclick handler

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

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