On / Off Camera - React Native

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

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.

• enableCam()
• disableCam()
• toggleCam(), which rejects with the errors of enableCam() and disableCam()

enableCam()

• By using the enableCam() function of the useRoom 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. Otherwise, it rejects with 3054 ERROR_ALREADY_IN_REQUESTED_STATE.

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

• A stopped or released track is refused with ERROR_INVALID_CUSTOM_VIDEO_TRACK (3029).

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

• On Android, the SDK does not ask the user for camera access. Ask for it with requestPermission() of the useMediaDevice hook before the room joins. Without it, enableCam() rejects with 3017 ERROR_CAMERA_ACCESS_DENIED_OR_DISMISSED. On iOS, the SDK asks the user itself.

disableCam()

• By using the disableCam() function of the useRoom 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. Otherwise, it rejects with 3054 ERROR_ALREADY_IN_REQUESTED_STATE.

toggleCam()

• By using the toggleCam() function of the useRoom hook, the local participant can turn their camera off when it is on, and on when it is off. It rejects with the same errors as enableCam() and disableCam().

• You can pass a custom video track to toggleCam(). It is used only when the camera is turned on.

note

While a camera change is still in progress, another enableCam(), disableCam() or toggleCam() call rejects with 3055 ERROR_OPERATION_IN_PROGRESS.

Example

import { useRoom } from "@videosdk.live/react-native-sdk";
import { TouchableOpacity, Text } from "react-native";

const RoomView = () => {
  //Getting the camera methods from hook
  const { enableCam, disableCam, toggleCam } = useRoom();

  const handleEnableWebcam = async () => {
    // Enabling camera
    try {
      await enableCam();
    } catch (err) {
      console.error("enableCam failed:", err);
    }
  };

  const handleDisableWebcam = async () => {
    // Disabling camera
    try {
      await disableCam();
    } catch (err) {
      console.error("disableCam failed:", err);
    }
  };

  const handleToggleWebcam = async () => {
    // Toggling webcam
    try {
      await toggleCam();
    } catch (err) {
      console.error("toggleCam failed:", err);
    }
  };

  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 room, follow this detailed guide.

Getting Participant Camera Status

• You can get the local participant's camera status from the useRoom hook property named isCamEnabled.
• If isCamEnabled 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 { useRoom } from "@videosdk.live/react-native-sdk";
import { Text } from "react-native";

const RoomView = () => {
  // Get the isCamEnabled property
  const { isCamEnabled } = useRoom();

  return (
    <>
      <Text>Local Camera is {isCamEnabled ? "on" : "off"}</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";
import { Text } from "react-native";

const ParticipantView = ({ participantId }) => {
  // Get the webcamOn property
  const { webcamOn } = useParticipant(participantId);

  return (
    <>
      <Text>Participant Camera is {webcamOn ? "on" : "off"}</Text>
    </>
  );
};

Events associated with enableCam

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

Events associated with disableCam

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

note

On Android, the SDK turns your camera off while the app is in the background and turns it back on when the app returns to the foreground, so these events also fire at those times. Learn more in Background Handling.

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

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

  const {
    displayName,
    // ...
  } = useParticipant(participantId,{
    onStreamEnabled,
    onStreamDisabled,
    // ...
  });
  return <Text>{displayName}</Text>;
}

API Reference

The API references for all the methods and events utilised in this guide are provided below.

• enableCam()
• disableCam()
• onStreamEnabled()
• onStreamDisabled()