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.

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• enableWebcam()
• disableWebcam()
• toggleWebcam()
• changeWebcam()

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
    try {
      await enableWebcam();
    } catch (err) {
      console.error("enableWebcam failed:", err);
    }

    // Disable Webcam in Meeting
    try {
      await disableWebcam();
    } catch (err) {
      console.error("disableWebcam failed:", err);
    }

    // Toggle Webcam in Meeting
    try {
      await toggleWebcam();
    } catch (err) {
      console.error("toggleWebcam failed:", err);
    }

    // Change Webcam in Meeting
    let webcams;
    try {
      webcams = await getWebcams(); // returns all webcams
    } catch (err) {
      console.error("getWebcams failed:", err);
    }

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

    try {
      await changeWebcam(deviceId);
    } catch (err) {
      console.error("changeWebcam failed:", err);
    }
  };

  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,
  ...
});