Share Your Screen - React Native

Whenever any participant wants to share mobile screen, they can simply do it with VideoSDK Meeting.

For Mobile Devices a complete screen will be share.

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.

   • You can pass customise screen share track in enableScreenShare() by using Custom Screen Share Track.

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

Enable, Disable Screen Share

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

const MeetingView = () => {
  const { enableScreenShare, disableScreenShare, toggleScreenShare } =
    useMeeting();
  const onPress = () => {
    // Enabling ScreenShare
    enableScreenShare();

    // Disabling ScreenShare
    disableScreenShare();

    // Toggle ScreenShare
    toggleScreenShare();
  };
  return <>...</>;
};

caution

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

Events

Events associated with enableScreenShare():

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

• onPresenterChanged() will also receive a callback with the presenterId.

Events associated with disableScreenShare():

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

• onPresenterChanged() will also receive a callback with null value.

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

function onStreamEnabled(stream) {
  if(stream.kind === 'share'){
    console.log("Screen Share Stream On: onStreamEnabled", stream);
  }
}

function onStreamDisabled(stream) {
  if(stream.kind === 'share'){
    console.log("Screen Share Stream Off: onStreamDisabled", stream);
  }
}

const {
  displayName
  ...
} = useParticipant(participantId,{
  onStreamEnabled,
  onStreamDisabled,
  ...
});

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

function onPresenterChanged(presenterId) {
  console.log(" onPresenterChanged", presenterId);
}

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