Screen Share - React

This feature enables hosts to start or stop sharing their screen with other hosts and audience members during the live stream. Only hosts (in SEND_AND_RECV mode) can broadcast their screen, while audience members (in RECV_ONLY mode) can view it in real time.

enableScreenShare()

• By using the enableScreenShare() function of the useMeeting hook, the host can share their desktop screen to other hosts and audience members.

• You can also pass a customised screenshare track in the enableScreenShare() method by using Custom Screen Share Track.

• The Screen Share stream of a participant can be accessed from the screenShareStream property of the useParticipant hook.

disableScreenShare()

• By using the disableScreenShare() function of the useMeeting hook, the host can stop sharing their desktop screen to other hosts and audience members.

toggleScreenShare()

• By using the toggleScreenShare() function of the useMeeting hook, the host can start or stop sharing their desktop screen to other hosts and audience members based on the current state of the screen sharing.

• You can also pass a customised screenshare track in the toggleScreenShare() method by using Custom Screen Share Track.

• The Screen Share stream of a participant can be accessed from the screenShareStream property of useParticipant hook.

note

Screen Sharing is only supported in the Desktop browsers and not in mobile/tab browser.

import { useMeeting } from "@videosdk.live/react-sdk";

const LiveStreamView = () => {
  //Getting the screen-share methods from hook
  const { enableScreenShare, disableScreenShare, toggleScreenShare } =
    useMeeting();

  const handleEnableScreenShare = () => {
    // Enabling screen share
    enableScreenShare();
  };

  const handleDisableScreenShare = () => {
    // Disabling screen share
    disableScreenShare();
  };

  const handleToggleScreenShare = () => {
    // Toggling screen share
    toggleScreenShare();
  };

  return (
    <>
      <button onClick={handleEnableScreenShare}>Enable Screen Share</button>
      <button onClick={handleDisableScreenShare}>Disable Screen Share</button>
      <button onClick={handleToggleScreenShare}>Toggle Screen Share</button>
    </>
  );
};

Events associated with enableScreenShare

• Every Participant—including all the hosts and audience members will receive a callback on onStreamEnabled() event of the useParticipant() hook with the Stream object.

• Every participant—including all the hosts and audience members will receive the onPresenterChanged() callback of the useMeeting hook, which provides the participantId as the presenterId of the participant who started the screen share.

Events associated with disableScreenShare

• Every Participant—including all the hosts and audience members will receive a callback on onStreamDisabled() event of the useParticipant() hook with the Stream object.

• Every Participant—including all the hosts and audience members will receive the onPresenterChanged() callback of the useMeeting hook, with the presenterId as null, indicating that there is no current presenter.

Events associated with toggleScreenShare

• Every Participant—including all the hosts and audience members will receive a callback on onStreamEnabled() event of the useParticipant() hook with the Stream object, if the screen share broadcasting was started.

• Every Participant—including all the hosts and audience members will receive a callback on onStreamDisabled() event of the useParticipant() hook with the Stream object, if the screen share broadcasting was stopped.

• Every Participant—including all the hosts and audience members will receive the onPresenterChanged() callback of the useMeeting hook, providing the participantId as the presenterId of the participant who started the screen share or null if the screen share was turned off.

import { useParticipant, useMeeting } from "@videosdk.live/react-sdk";

const LiveStreamView = () => {
  //Callback for when the presenter changes
  function onPresenterChanged(presenterId) {
    if(presenterId){
      console.log(presenterId, "started screen share");
    }else{
      console.log("someone stopped screen share");
    }
  }

  const { participants } = useMeeting({
    onPresenterChanged,
    ...
  });

  return <>...</>
}

const ParticipantView = (participantId) => {
  //Callback for when the participant starts a stream
  function onStreamEnabled(stream) {
    if(stream.kind === 'share'){
      console.log("Share Stream On: onStreamEnabled", stream);
    }
  }

  //Callback for when the participant stops a stream
  function onStreamDisabled(stream) {
    if(stream.kind === 'share'){
      console.log("Share Stream Off: onStreamDisabled", stream);
    }
  }

  const {
    displayName
    ...
  } = useParticipant(participantId,{
    onStreamEnabled,
    onStreamDisabled
    ...
  });
  return <> Participant View </>;
}

Screen Share with Audio

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

After clicking the Share button, you will receive the selected tab's audio stream in the participant's screenShareAudioStream.

note

Screen Share with Audio is only supported while sharing Chrome Tab in a Chromium based browser like Google Chrome, Brave etc.

Rendering Screen Share and Screen Share Audio

1. To render the screenshare, you will need the participantId of the host presenting the screen. This can be obtained from the presenterId property of the useMeeting hook.

import { useMeeting, useParticipant } from "@videosdk.live/react-sdk";

const LiveStreamView = () => {
  //
  const { presenterId } = useMeeting();

  return <>{presenterId && <PresenterView presenterId={presenterId} />}</>;
};

const PresenterView = ({ presenterId }) => {
  return <div>PresenterView</div>;
};

2. Now that you have the presenterId, you can obtain the screenShareStream using the useParticipant hook and play it in the video tag.

const PresenterView = ({ presenterId }) => {
  const { screenShareStream, screenShareOn } = useParticipant(presenterId);

  //Creating a media stream from the screen share stream
  const mediaStream = useMemo(() => {
    if (screenShareOn && screenShareStream) {
      const mediaStream = new MediaStream();
      mediaStream.addTrack(screenShareStream.track);
      return mediaStream;
    }
  }, [screenShareStream, screenShareOn]);

  return (
    <>
      // playing the media stream in the ReactPlayer
      <ReactPlayer
        //
        playsinline // extremely crucial prop
        playIcon={<></>}
        //
        pip={false}
        light={false}
        controls={false}
        muted={true}
        playing={true}
        //
        url={mediaStream} // passing mediastream here
        //
        height={"100%"}
        width={"100%"}
        onError={(err) => {
          console.log(err, "presenter video error");
        }}
      />
    </>
  );
};

3. You can then add the screen share audio to this component by retrieving the screenShareAudioStream from the useParticipant hook.

const PresenterView = ({ presenterId }) => {
  const { screenShareAudioStream, isLocal, screenShareStream, screenShareOn } =
    useParticipant(presenterId);

  // Creating a reference to the audio element
  const audioPlayer = useRef();

  // Playing the screen share audio stream
  useEffect(() => {
    if (
      !isLocal &&
      audioPlayer.current &&
      screenShareOn &&
      screenShareAudioStream
    ) {
      const mediaStream = new MediaStream();
      mediaStream.addTrack(screenShareAudioStream.track);

      audioPlayer.current.srcObject = mediaStream;
      audioPlayer.current.play().catch((err) => {
        if (
          err.message ===
          "play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD"
        ) {
          console.error("audio" + err.message);
        }
      });
    } else {
      audioPlayer.current.srcObject = null;
    }
  }, [screenShareAudioStream, screenShareOn, isLocal]);

  return (
    <>
      {/*... React player is here */}
      //Adding this audio tag to play the screen share audio
      <audio autoPlay playsInline controls={false} ref={audioPlayer} />
    </>
  );
};

Troubleshoot MacOS Screen Share Permissions

• If you are using MacOS, you will have to allow the browser to do screen share. You can follow the steps shown in the video to do so.

caution

To use the audio and video communications in the web browser, your site must be SSL enabled i.e. it must be secured and running on https.

API Reference

The API references for all the methods and events utilized in this guide are provided below.

• enableScreenShare()
• disableScreenShare()
• toggleScreenShare()
• onStreamEnabled()
• onStreamDisabled()
• onPresenterChanged()