Camera Controls - React

Whenever any participant wants to start/stop broadcasting their video to other participant in a meeting, they can simply do it with VideoSDK Meeting.

This guide will provide an overview of how to implement enable, disable and switch webcam features in a meeting.

1. Enable Camera - By using enableWebcam() function, a participant can publish camera stream to other participants.

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

2. Disable Camera - By using disableWebcam() function, a participant can stop publishing camera stream to other participants.

3. Switch Camera - By using changeWebcam() function, a participant can stream from front / rear camera during the meeting.This function is only applicable for Mobile devices.

4. Toggle Camera - By using toggleWebcam() function, a participant start or stop publishing the video during the meeting.

Enable, Disable And Switch Webcam

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

const MeetingView = () => {
  const {
    enableWebcam,
    disableWebcam,
    getWebcams,
    changeWebcam,
    toggleWebcam,
  } = useMeeting();

  const onPress = async () => {
    // Enable Webcam in Meeting
    enableWebcam();

    // Disable Webcam in Meeting
    disableWebcam();

    // Toggle Webcam in Meeting
    toggleWebcam();

    // Change Webcam in Meeting
    const webcams = await getWebcams(); // returns all webcams

    const { deviceId, label } = webcams[0];

    changeWebcam(deviceId);
  };

  return <>...</>;
};

note

To get a better control over the Video Quality, we recommend you to use the custom video tracks. You can check out how to use custom video tracks here.

Events

Event associated with enableWebcam():

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

Event associated with disableWebcam():

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

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

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

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

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