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

Integrate Video

This tutorial guides how to add video features to a conference.

Start the video

Layout editing

Open the index.html file and create a div with the id video-container, to which the video stream will be dynamically added. Also add a new element with the id actions that will contain a button element with the id start-video-btn:

<div id="app">
  <div id="form">...</div>
  <div id="actions">
    <button id="start-video-btn" disabled>Start video</button>
  </div>
  <div id="video-container"></div>
</div>

Interface linking

Open the ui.js file and declare the startVideoBtn in the initUI function:

const initUI = () => {
    ...
    const startVideoBtn = document.getElementById('start-video-btn');
    ...
};

Edit the joinButton onclick function to enable the startVideoBtn when the user joins the conference:

joinButton.onclick = () => {
... => VoxeetSDK.conference.join(conference, {}))
    .then(() => {
        // ----->  Enable the button here ------>
        startVideoBtn.disabled = false;
    })
...
}

Then, write the startVideoBtn onclick handler:

startVideoBtn.onclick = () => {
    VoxeetSDK.conference.startVideo(VoxeetSDK.session.participant)
        .then(() => {
            startVideoBtn.disabled = true;
        })
        .catch((err) => console.error(err));
}

Logic implementation

Open the ui.js file and write the addVideoNode function that will dynamically create a video node element in the html DOM:

/*
Creates a video node element on the video-container <div> for a participant with userId
*/
const addVideoNode = (participant, stream) => {
  let videoNode = document.getElementById('video-' + participant.id);

  if (!videoNode) {
    videoNode = document.createElement('video');

    videoNode.setAttribute('id', 'video-' + participant.id);
    videoNode.setAttribute('height', 240);
    videoNode.setAttribute('width', 320);
    videoNode.setAttribute("playsinline", true);
    videoNode.muted = true;
    videoNode.setAttribute("autoplay", 'autoplay');

    const videoContainer = document.getElementById('video-container');
    videoContainer.appendChild(videoNode);
  }

  navigator.attachMediaStream(videoNode, stream);
};

When a participant joins a conference with audio and/or video enabled, an event named streamAdded is emitted to all other participants.

Note: The playsinline attribute used in the example prevents the video from freezing in the Safari browser.

Open the client.js file and call addVideoNode upon receiving the streamAdded and streamUpdated events:

const main = () => {
  /* Events handlers */
  VoxeetSDK.conference.on('streamAdded', (participant, stream) => {
    if (stream.type === 'ScreenShare') return;

    if (stream.getVideoTracks().length) {
      addVideoNode(participant, stream);
    }
  });
  VoxeetSDK.conference.on('streamUpdated', (participant, stream) => {
    if (stream.type === 'ScreenShare') return;

    if (stream.getVideoTracks().length) {
      addVideoNode(participant, stream);
    } else {
      removeVideoNode(participant);
    }
  });
};  

Stop the video

Layout editing

Open the index.html file and add a new button with the id stop-video-btn in the actions div element:

<div id="actions">
    <button id="start-video-btn" disabled>Start video</button>
    <!-- add 'stop-video-btn' just after 'start-video-btn'-->
    <button id="stop-video-btn" disabled>Stop video</button>
</div>

Interface linking

Open the ui.js file and declare the stopVideoBtn in the initUI function:

const initUI = () => {
    ...
    const stopVideoBtn = document.getElementById('stop-video-btn')
    ...
}

Edit the startVideoBtn onclick function to enable the stopVideoBtn when the user’s video is started:

startVideoBtn.onclick = () => {
    VoxeetSDK.conference.startVideo(VoxeetSDK.session.participant).then(() => {
        // ------> Enable the button here ------->
        stopVideoBtn.disabled = false;
    })
}

Then, write the onclick handler of the stopVideoBtn:

stopVideoBtn.onclick = () => {
    VoxeetSDK.conference.stopVideo(VoxeetSDK.session.participant)
        .then(() => {
            stopVideoBtn.disabled = true;
            startVideoBtn.disabled = false;
        })
        .catch((err) => console.error(err));
}

Logic implementation

Open the ui.js file and write the removeVideoNode function that removes the specific video element from the UI:

const removeVideoNode = participant => {
    let videoNode = document.getElementById("video-" + participant.id)

    if (videoNode) {
        videoNode.srcObject = null; // Prevent memory leak in Chrome
        videoNode.parentNode.removeChild(videoNode)
    }
}

When a participant leaves the conference, an event named streamRemoved is emitted to all other participants.

Open client.js file and call removeVideoNode upon receiving the streamRemoved event:

const main = () => {
    /* Events handlers */
    ...
    VoxeetSDK.conference.on('streamRemoved', (participant, stream) => {
        removeVideoNode(participant);
    });
}

What’s Next
Did this page help you?