On / Off Camera - React Native

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, 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-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 camera 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's camera 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

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

• Every Participant will receive a callback on onMediaStatusChanged() event of the useParticipant() hook with the type of media and its status.

Events associated with disableWebcam

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

• Every Participant will receive a callback on onMediaStatusChanged() event of the useParticipant() hook with the type of media and its status.

Events associated with toggleWebcam

• Every Participant will receive a callback on onStreamEnabled() event of the useParticipant() hook with the Stream object if the video broadcasting was started.

• Every Participant will receive a callback on onStreamDisabled() event of the useParticipant() hook with the Stream object if the video broadcasting was stopped.

• Every Participant will receive a callback on onMediaStatusChanged() event of the useParticipant() hook with the type of media and its status.

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.

• enableWebcam()
• disableWebcam()
• toggleWebcam()
• onStreamEnabled()
• onStreamDisabled()
• onMediaStatusChanged()