Screen Share - React Native

Screen sharing in a meeting is the process of sharing your device screen with other participants in the meeting. It allows everyone in the meeting to see exactly what you are seeing on your screen, which can be helpful for presentations, demonstrations, or collaborations.

enableScreenShare()

• By using the enableScreenShare() function of the useMeeting hook, the local participant can share their mobile screen to other participants.

• 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 local participant can stop sharing their mobile screen to other participants.

toggleScreenShare()

• By using the toggleScreenShare() function of the useMeeting hook, the local participant can start or stop sharing their mobile screen to other participants 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 the useParticipant hook.

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

const MeetingView = () => {
  //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 (
    <>
      <TouchableOpacity
        onPress={() => {
          handleEnableScreenShare();
        }}
      >
        <Text>Enable Screen Share</Text>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => {
          handleDisableScreenShare();
        }}
      >
        <Text>Disable Screen Share</Text>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => {
          handleToggleScreenShare();
        }}
      >
        <Text>Toggle Screen Share</Text>
      </TouchableOpacity>
    </>
  );
};

iOS Setup

note

For React Native iOS Screen Share feature, you need to follow this guide React Native iOS Screen Share

Rendering Screen Share Stream

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

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

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

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

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

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

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

  return (
    <>
      // playing the media stream in the RTCView
      {screenShareOn && screenShareStream ? (
        <RTCView
          streamURL={new MediaStream([screenShareStream.track]).toURL()}
          objectFit={"contain"}
          style={{
            flex: 1,
          }}
        />
      ) : null}
    </>
  );
};

Events associated with enableScreenShare

• Every Participant will receive a callback on onStreamEnabled() event of the useParticipant() hook with the Stream object.

• Every Participant 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 will receive a callback on onStreamDisabled() event of the useParticipant() hook with the Stream object.

• Every Participant 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 will receive a callback on onStreamEnabled() event of the useParticipant() hook with the Stream object, if the screen share broadcasting was started.

• Every Participant will receive a callback on onStreamDisabled() event of the useParticipant() hook with the Stream object, if the screen share broadcasting was stopped.

• Every Participant 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-native-sdk";

const MeetingView = () => {
  //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 </>;
}

API Reference

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

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