Skip to main content
Version: Next

On / Off Camera - React Native

Any participant can turn on or off his camera in the meeting using below methods.

enableWebcam()

  • By using enableWebcam() function of useMeeting hook, local participant can publish video to other participants.

  • You can call this method when the local participant is not broadcasting any video to others.

  • You can pass customised video track in enableWebcam() by using Custom Video Track.

  • Video stream of the participant can be accessed from the webcamStream property of useParticipant hook.

disableWebcam()

  • By using disableWebcam() function of useMeeting hook, local participant can stop publish video to other participants.

  • You can call this method when the local participant is broadcasting any video to others.

toggleWebcam()

  • By using toggleWebcam() function of useMeeting hook, local participant can start or stop publish video to other participants based on the current state of the camera.

  • You can pass customised video track in toggleWebcam() by using Custom Video Track.

  • Video stream of the participant can be accessed from the webcamStream property of useParticipant hook.

Example

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

const MeetingView = () => {
//Getting the camera methods from hook
const { enableWebcam, disableWebcam, toggleWebcam } = useMeeting();

const handleEnableWebcam = () => {
// Enabling camera
enableWebcam();
};

const handleDisableWebcam = () => {
// Disabling camera
disableWebcam();
};

const handleToggleWebcam = () => {
// Toggling webcam
toggleWebcam();
};

return (
<>
<TouchableOpacity
onPress={() => {
handleEnableWebcam();
}}
>
<Text>Enable Webcam</Text>
</TouchableOpacity>

<TouchableOpacity
onPress={() => {
handleDisableWebcam();
}}
>
<Text>Disable Webcam</Text>
</TouchableOpacity>

<TouchableOpacity
onPress={() => {
handleToggleWebcam();
}}
>
<Text>Toggle Webcam</Text>
</TouchableOpacity>
</>
);
};
note

To learn, how to render video in the meeting, follow this detailed guide.

Getting Participant Camera Status

  • You can get the local participant's media status from the useMeeting hook property named localWebcamOn.
  • If localWebcamOn is true, it means that the local participant's camera is currently active. If it is false, it means that the local participant's camera is currently disable or inactive.
import { useMeeting } from "@videosdk.live/react-native-sdk";
const MeetingView = () => {
// Get the localWebcamOn property
const { localWebcamOn } = useMeeting();

return (
<>
<Text>Local Camera is {localWebcamOn}</Text>
</>
);
};
  • To get the status of any participant you can use the webcamOn property of the useParticipant hook. This parameter will be true if participant's camera is on else it will be false.
import { useParticipant } from "@videosdk.live/react-native-sdk";
const ParticipantView = (participantId) => {
// Get the webcamOn property
const { webcamOn } = useParticipant(participantId);

return (
<>
<Text>Participant Camera is {webcamOn}</Text>
</>
);
};

Events associated with enableWebcam

Events associated with disableWebcam

Events associated with toggleWebcam

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

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

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


//Callback for when participants media gets changed
function onMediaStatusChanged(data) {
const { kind, newStatus} = data;
console.log("Participant Media Kind: ", kind, " newStatus: ", newStatus);
}

const {
displayName
...
} = useParticipant(participantId,{
onStreamEnabled,
onStreamDisabled,
onMediaStatusChanged
...
});
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