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

Implement Screen Sharing

This tutorial guides how to implement a screen sharing feature to the conference application.

Start sharing a screen

Layout editing

Open the index.html file and add:

  • a button with the id start-screenshare-btn as a child of the actions div
  • a div with the id screenshare-container after the video-container div
<div id="actions">
  ...
  <button id="start-screenshare-btn" disabled>Start screen share</button>
</div>
...
<div id="video-container"></div>
<!-- add the screenshare-container here -->
<div id="screenshare-container"></div>

Interface linking

Get element from the document

Open the ui.js file and declare the start-screenshare-btn in the initUI:

const initUI = () => {
  const startScreenShareBtn = document.getElementById("start-screenshare-btn");
}

Disable/enable button

Then, edit the joinButton onclick handler to enable the startScreenShareBtn when the conference is joined:

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

And edit the leaveButton onclick handler to disable the startScreenShareBtn when the conference is left:

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

Logic implementation

Onclick handler

const initUI = () => {
    ...
    startScreenShareBtn.onclick = () => {
        VoxeetSDK.conference.startScreenShare()
            .then(() => {
                startScreenShareBtn.disabled = true;
            })
            .catch((err) => console.error(err));
    }

Event handler

Note: When a user starts sharing a screen, a streamAdded event is triggered.

Open the ui.js file and write a new function called addScreenShareNode that creates a video node and attaches the screen stream to it:

const addScreenShareNode = stream => {
  const screenShareContainer = document.getElementById("screenshare-container");
  let screenShareNode = document.getElementById("screenshare");

  if (screenShareNode) {
    return alert("There is already a participant sharing their screen!");
  }
  screenShareNode = document.createElement("video");
  screenShareNode.autoplay = "autoplay";
  navigator.attachMediaStream(screenShareNode, stream);

  screenShareContainer.appendChild(screenShareNode);
}

Open the client.js file and add a condition upon receiving the streamAdded event to handle the case where the stream.type is ScreenShare:

    VoxeetSDK.conference.on("streamAdded", (participant, stream) => {
        if (stream.type === 'ScreenShare') return addScreenShareNode(stream);
        ...

Stop sharing a screen

Layout editing

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

<div id="actions">
  ...
  <button id="stop-screenshare-btn" disabled>Stop screen share</button>
</div>
...

Interface linking

Get element from document

Open the ui.js file and declare stopScreenshareBtn in initUI:

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

Enable/disable the button

Edit the startScreenShareBtn onclick handler to enable the button to stop sharing the screen:

startScreenShareBtn.onclick = () => {
    VoxeetSDK.conference.startScreenShare()
        .then(() =>
            ...
            stopScreenShareBtn.disabled = false;
        ...

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

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

Logic implementation

Onclick handler

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

const initUI = () => {
    ...
    stopScreenShareBtn.onclick = () => {
        VoxeetSDK.conference.stopScreenShare()
            .then(() => {
                startScreenShareBtn.disabled = false;
                stopScreenShareBtn.disabled = true;
            })
            .catch((err) => console.error(err));
    }

Event handler

Note: When a user stops sharing a screen, a streamRemoved event is triggered.

Open the ui.js file and write a new function called removeScreenShareNode that creates a video node and attaches the screen related stream to it:

const removeScreenShareNode = () => {
  let screenShareNode = document.getElementById("screenshare");

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

Open the client.js file and add a condition upon receiving a streamRemoved event to handle the case when the stream.type is ScreenShare:

VoxeetSDK.conference.on('streamRemoved', (participant, stream) => {
    if (stream.type === 'ScreenShare') return 
removeScreenShareNode()
    ...

Did this page help you?