Share Your Screen - Javascript

Whenever any participant wants to share either the complete screen, a specific window or, a browser tab, they can simply do it with VideoSDK Meeting.

This guide will provide an overview of how to use enable and disable Screen Share in a meeting.

1. Enable Screen Share - By using enableScreenShare() function, a participant can publish screen stream to other participants.
2. Disable Screen Share - By using disableScreenShare() function, a participant can stop publishing screen stream to other participants.

Enable, Disable Screen Share

const onPress = () => {
  // Enabling ScreenShare
  meeting?.enableScreenShare();

  // Disabling ScreenShare
  meeting?.disableScreenShare();
};

Events

Events associated with enableScreenShare():

• stream-enabled event will be emitted with stream object from the event callback, inside that participant object.

• presenter-changed will also receive a callback with the presenterId.

Events associated with disableScreenShare():

• stream-disabled event will be emitted with stream object from the event callback, inside that participant object.

• presenter-changed will also receive a callback with null value.

participant.on("stream-enabled", (stream) => {
  if (stream.kind === "share") {
    //particiapnt turned on screen share
    //Render screenshare logic here
  }
});

participant.on("stream-disabled", (stream) => {
  if (stream.kind === "share") {
    //particiapnt turned off screenshare
    //remove screenshare logic here
  }
});

meeting.on("presenter-changed", (presenterId) => {
  if (presenterId) {
    //someone start presenting
  } else {
    //someone stopped presenting
  }
});

Screen Share with Audio

To do screen share with audio, select the Share tab audio option when sharing the chrome tab as shown below.

After clicking Share button, you will receive a selected tab audio stream in the participant stream-enabled callback with kind as shareAudio.

participant.on("stream-enabled", (stream) => {
  if (stream.kind == "shareAudio") {
    const audioElem = createShareAudioElement(participant.id, stream);

    //add audioElem to your container
    container.appendChild(audioElem);
  }
});

// creating audio element
function createShareAudioElement(pId, stream) {
  if (pId == meeting.localParticipant.id) return;

  let audioElement = document.createElement("audio");
  audioElement.setAttribute("autoPlay", false);
  audioElement.setAttribute("playsInline", "false");
  audioElement.setAttribute("controls", "false");
  audioElement.setAttribute("id", `a-share-${pId}`);
  audioElement.style.display = "none";

  const mediaStream = new MediaStream();
  mediaStream.addTrack(stream.track);
  audioElement.srcObject = mediaStream;
  audioElement
    .play()
    .catch((error) => console.error("audioElem.play() failed", error));
  return audioElement;
}

note

Screen Share with Audio feature is only supported while sharing chrome tab on Google Chrome browser only.