Recording Controls in the UI

The multiparty sample records sessions through the Vonage Video Archiving API. The browser needs to initiate the request and provide feedback to users while an archive runs.

Wire the Buttons

Select the start/stop buttons and the <span> that will display a playback link. Hide the stop button by default so it only appears while an archive is active.

// src/app.js
const archiveStartBtn = document.querySelector('#start');
const archiveStopBtn = document.querySelector('#stop');
const archiveLinkSpan = document.querySelector('#archiveLink');

archiveStopBtn.style.display = 'none';

Hook the buttons up to helper functions that call the backend routes:

async function startArchiving() {
  console.log('start archiving');
  try {
    archive = await postData(`${SAMPLE_SERVER_BASE_URL}/archive/start`, { sessionId });
    if (archive.status !== 'started') {
      handleError(archive.error);
    }
  } catch (error) {
    handleError(error);
  }
}

async function stopArchiving() {
  console.log('stop archiving');
  try {
    archive = await postData(`${SAMPLE_SERVER_BASE_URL}/archive/${archive.id}/stop`, {});
    if (archive.status !== 'stopped') {
      handleError(archive.error);
    }
  } catch (error) {
    handleError(error);
  }
}

archiveStartBtn.addEventListener('click', startArchiving, false);
archiveStopBtn.addEventListener('click', stopArchiving, false);

Listen for Archive Events

It is better to respond to the SDK events emitted by the Video API than to rely only on button callbacks. That way your UI updates the instant Vonage confirms a state change.

session.on('archiveStarted', event => {
  archive = event;
  console.log('Archive started ' + archive.id);
  archiveStartBtn.style.display = 'none';
  archiveStopBtn.style.display = 'inline';
  archiveLinkSpan.innerHTML = '';
});

session.on('archiveStopped', event => {
  archive = event;
  console.log('Archive stopped ' + archive.id);
  archiveStartBtn.style.display = 'inline';
  archiveStopBtn.style.display = 'none';
  archiveLinkSpan.innerHTML = `<a href="${SAMPLE_SERVER_BASE_URL}/archive/${archive.id}/view" target="_blank">View Archive</a>`;
});

When the archive starts, hide the start button, show the stop button, and clear any previous playback URL. When the archive stops, restore the start button and inject a link that lets the user view the recording once the backend confirms availability.