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 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 in the main function:

/*
 * 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>
  <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 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(() => {
      startVideoBtn.disabled = true;
      stopVideoBtn.disabled = false;
    })
    .catch((err) => console.error(err));
};

Then, write the onclick handler of the stopVideoBtn:

stopVideoBtn.onclick = () => {
  VoxeetSDK.conference
    .stopVideo(VoxeetSDK.session.participant)
    .then(() => {
      startVideoBtn.disabled = false;
      stopVideoBtn.disabled = true;
    })
    .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, in the main function, after the other events handlers:

VoxeetSDK.conference.on("streamRemoved", (participant, stream) => {
  removeVideoNode(participant);
});

What’s Next
Did this page help you?