Change Video Input Device - React Native

During the meeting, 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.

• changeWebcam()

getWebcams()

• This method of the useMeeting hook will provide you with 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 and label of the camera input device.

changeWebcam()

• Once you know which device you want to switch the camera input to, you can pass the deviceId to this method to change the camera input device.

Example

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

const MeetingView = () => {
  //Creating two react states to store list of available cameras and selected camera
  const [cameras, setCameras] = useState([]);

  //Getting the methods to change and get the camera
  const { getWebcams, changeWebcam } = useMeeting();

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

  useEffect(() => {
    handleGetWebcams();
  }, []);

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

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

API Reference

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

• getWebcams()
• changeWebcam()