Skip to main content
Version: 0.1.x

On / Off Camera - React

Participants in the meeting have the ability to toggle their cameras on or off using the methods outlined below.

enableWebcam()

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

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

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

  • The video stream of a participant can be accessed from the webcamStream property of the useParticipant hook.

disableWebcam()

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

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

toggleWebcam()

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

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

  • The video stream of a participant can be accessed from the webcamStream property of useParticipant hook.

Example

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

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 (
<>
<button onClick={handleEnableWebcam}>Enable Webcam</button>
<button onClick={handleDisableWebcam}>Disable Webcam</button>
<button onClick={handleToggleWebcam}>Toggle Webcam</button>
</>
);
};
note

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

Events associated with enableWebcam

Events associated with disableWebcam

Events associated with toggleWebcam

import { useParticipant } from "@videosdk.live/react-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 participant's 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 </>;
}

Getting Participant's Camera Status

  • You can get the local participant's camera status from the useMeeting hook using a property called 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-sdk";
const MeetingView = () => {
// Get the localWebcamOn property
const { localWebcamOn } = useMeeting();

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

return <> Participant Camera is {webcamOn} </>;
};

Video Permissions

  • By default, VideoSDK will request video permission when the participants attempts to turn on the camera. Once the permission is granted the camera gets turned on. If the permission is denied, VideoSDK will send an error message in the onError event callback of the useMeeting hook.

Troubleshoot Video Permissions

  • If a participant denies the camera permission, they can manually grant it by following below shown steps.
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.

Got a Question? Ask us on discord