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 theuseMeeting
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 theuseParticipant
hook.
disableScreenShare()
- By using the
disableScreenShare()
function of theuseMeeting
hook, the local participant can stop sharing their mobile screen to other participants.
toggleScreenShare()
-
By using the
toggleScreenShare()
function of theuseMeeting
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 theuseParticipant
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
For React Native iOS Screen Share feature, you need to follow this guide React Native iOS Screen Share
Rendering Screen Share Stream
- To render the screenshare, you will need the
participantId
of the user presenting the screen. This can be obtained from thepresenterId
property of theuseMeeting
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>;
};
- Now that you have the
presenterId
, you can obtain thescreenShareStream
using theuseParticipant
hook and play it in theRTCView
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 theuseParticipant()
hook with theStream
object. -
Every Participant will receive the
onPresenterChanged()
callback of theuseMeeting
hook, which provides theparticipantId
as thepresenterId
of the participant who started the screen share.
Events associated with disableScreenShare
-
Every Participant will receive a callback on
onStreamDisabled()
event of theuseParticipant()
hook with theStream
object. -
Every Participant will receive the
onPresenterChanged()
callback of theuseMeeting
hook, with thepresenterId
asnull
, indicating that there is no current presenter.
Events associated with toggleScreenShare
-
Every Participant will receive a callback on
onStreamEnabled()
event of theuseParticipant()
hook with theStream
object, if the screen share broadcasting was started. -
Every Participant will receive a callback on
onStreamDisabled()
event of theuseParticipant()
hook with theStream
object, if the screen share broadcasting was stopped. -
Every Participant will receive the
onPresenterChanged()
callback of theuseMeeting
hook, providing theparticipantId
as thepresenterId
of the participant who started the screen share ornull
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.
Got a Question? Ask us on discord