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.

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 () => {
    const webcams = await getWebcams();
    setCameras(webcams);
  };

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

  //Changing the camera with the selected deviceId
  const handleChangeCamera = (value) => {
    changeWebcam(value);
  };

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