Camera Controls - React Native

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-native-sdk";
const MeetingView = () => {
  const {
    enableWebcam,
    disableWebcam,
    getWebcams,
    changeWebcam,
    toggleWebcam,
  } = useMeeting();

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

    // Disable Camera in Meeting
    disableWebcam();

    // Toggle Camera in Meeting
    toggleWebcam();

    // Change Camera in Meeting
    changeWebcam();
  };

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