On / Off Camera - React Native

This feature enables hosts to turn their cameras on or off to share their video stream with other hosts and audience members during the room. Only hosts (in SEND_AND_RECV mode) can broadcast their camera feed, while audience members (in RECV_ONLY mode) can view it in real time.

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()

enableCam()

• By using the enableCam() function of the useRoom hook, the host can publish their video to other hosts and audience members.

  • You can only call this method when the host is not broadcasting video. 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 live stream 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 host can stop publishing their video to other hosts and audience members.

• You can only call this method when the host is broadcasting video. Otherwise, it rejects with 3054 ERROR_ALREADY_IN_REQUESTED_STATE.

toggleCam()

• By using the toggleCam() function of the useRoom hook, the host can turn their camera off when it is on, and on when it is off. Use it for a single camera button.

• It takes the same optional custom video track as enableCam(), and uses it only when the camera is turned on.

isCamEnabled

• The isCamEnabled property of the useRoom hook tells whether the host is publishing video. Use it to show the state of the camera button.

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

note

• While a camera change is still in progress, another enableCam(), disableCam() or toggleCam() call rejects with 3055 ERROR_OPERATION_IN_PROGRESS.
• Audience members (in RECV_ONLY mode) cannot publish video. For them, enableCam() and toggleCam() reject with 3066 ERROR_ACTION_NOT_SUPPORTED_IN_MODE.

Example

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

const LiveStreamView = () => {
  //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 (
    <View>
      <TouchableOpacity onPress={handleEnableWebcam}>
        <Text>Enable Webcam</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={handleDisableWebcam}>
        <Text>Disable Webcam</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={handleToggleWebcam}>
        <Text>Toggle Webcam</Text>
      </TouchableOpacity>
    </View>
  );
};

note

To learn, how to render video in the live stream, follow this detailed guide.

Events associated with enableCam

• Every Participant—including all the hosts and audience members will receive a callback on onStreamEnabled() event of the useParticipant() hook with the RTCStream object.

Events associated with disableCam

• Every Participant—including all the hosts and audience members will receive a callback on onStreamDisabled() event of the useParticipant() hook with the RTCStream object.

Events associated with toggleCam

• Every Participant receives onStreamEnabled() when the camera is turned on, and onStreamDisabled() when it is turned off.

import { useParticipant } from "@videosdk.live/react-native-sdk";
import { View, 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 <View><Text>Participant View</Text></View>;
}

API Reference

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

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