Change Video Input Device - React Native

During the room, at any point, a participant wishing to switch their input video device, can do so using the below-mentioned methods.

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.

• getCameras()
• changeCam()

getCameras()

• This method of the useMediaDevice hook gives you a list of all the available cameras, which can be displayed in a list.

• It will return an array of objects, which will contain the deviceId, label and facingMode ("front" or "back") of the camera input device.

• It works before and after the room is joined.

changeCam()

• Once you know which device you want to switch the camera input to, you can pass the deviceId to this method of the useRoom hook to change the camera input device. You can also pass a camera track created with createCameraVideoTrack().

• If the camera is on, it is turned off and on again with the new camera, so every participant receives onStreamDisabled() and then onStreamEnabled() for the video stream.

• If the camera is off, it stays off. The next enableCam() call uses the new camera.

• Call changeCam() with no argument to switch to the next camera in the getCameras() list, wrapping around to the first one. Use it, for example, to flip between the front and back cameras.

• If the deviceId does not match any camera, the call rejects with 3051 ERROR_NO_WEBCAM_DEVICE_FOUND, which is also reported on onError.

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

Example

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

const RoomView = () => {
  //Creating a react state to store the list of available cameras
  const [cameras, setCameras] = useState([]);

  //Getting the method to list the cameras
  const { getCameras } = useMediaDevice();

  //Getting the method to change the camera
  const { changeCam } = useRoom({
    //Loading the cameras once the room is joined
    onRoomJoined: () => {
      handleGetCameras();
    },
  });

  //Method to get the cameras and load in our state
  const handleGetCameras = async () => {
    try {
      const cameras = await getCameras();
      setCameras(cameras);
    } catch (err) {
      console.error("getCameras failed:", err);
    }
  };

  //Changing the camera with the selected deviceId
  const handleChangeCamera = async (value) => {
    try {
      await changeCam(value);
    } catch (err) {
      console.error("changeCam failed:", err);
    }
  };

  return (
    <>
      {/* Showing a selector for the available cameras */}
      {cameras.map((camera) => {
        return (
          <TouchableOpacity
            key={camera.deviceId}
            onPress={() => {
              handleChangeCamera(camera.deviceId);
            }}
          >
            <Text>{camera.label}</Text>
          </TouchableOpacity>
        );
      })}
    </>
  );
};

Selected devices

• getSelectedVideoDevice() of the useMediaDevice hook returns the camera in use as { deviceId }, or null when no camera is known yet.

• getSelectedAudioDevice() returns the microphone or audio route in use as { deviceId }, or null when none is known yet. It follows route changes, such as a switch to the speaker or a headset.

• Both are updated after every device change, so they also report the camera VideoSDK opens for you, for example on enableCam() or when the room joins with camEnabled.

• Both are also available as VideoSDK.getSelectedVideoDevice() and VideoSDK.getSelectedAudioDevice().

Example

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

const SelectedDevices = () => {
  const { getSelectedVideoDevice, getSelectedAudioDevice } = useMediaDevice();

  const logSelectedDevices = () => {
    const camera = getSelectedVideoDevice(); // { deviceId } or null
    const audioDevice = getSelectedAudioDevice(); // { deviceId } or null
    console.log("Camera:", camera?.deviceId, "Audio:", audioDevice?.deviceId);
  };

  return (
    <TouchableOpacity onPress={logSelectedDevices}>
      <Text>Show selected devices</Text>
    </TouchableOpacity>
  );
};

API Reference

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

• getCameras()
• changeCam()
• onRoomJoined()
• getSelectedVideoDevice()
• getSelectedAudioDevice()