Change Input Device - React

During the meeting, at any point, a participant wishing to switch their input audio or 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.

• changeMic()
• changeWebcam()

Changing Audio Input Device

getMics()

• This method of the useMeeting hook will provide you with a list of all the available mics, which can be displayed in a dropdown list.

• It will return an array of objects, which will contain the deviceId and the label of the audio input device.

changeMic()

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

Example

const MeetingView = () => {
  //Creating two react states to store list of available mics and selected microphone
  const [mics, setMics] = useState([]);
  const [selectedMic, setSelectedMic] = useState("");

  //Getting the methods to change and get the microphone
  const { getMics, changeMic } = useMeeting();

  //Method to get the mics and load in our state
  const handleGetMics = async () => {
    let mics;
    try {
      mics = await getMics();
    } catch (err) {
      console.error("getMics failed:", err);
    }
    setMics(mics);
  };

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

  //Changing the mic with the selected deviceId
  const handleChangeMic = async (event) => {
    try {
      await changeMic(event.target.value);
    } catch (err) {
      console.error("changeMic failed:", err);
    }
    setSelectedMic(event.target.value);
  };

  return (
    <div>
      // Showing a selector for the availabe mics
      <select value={selectedMic} onChange={handleChangeMic}>
        {mics.map((mic) => {
          return <option value={mic.deviceId}>{mic.label}</option>;
        })}
      </select>
    </div>
  );
};

Changing Camera Input Device

getWebcams()

• This method of the useMeeting hook will provide you with a list of all the available cameras, which can be displayed in a dropdown 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

const MeetingView = () => {
  //Creating two react states to store list of available cameras and selected camera
  const [cameras, setCameras] = useState([]);
  const [selectedCamera, setSelectedCamera] = 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 (event) => {
    try {
      await changeWebcam(event.target.value);
    } catch (err) {
      console.error("changeWebcam failed:", err);
    }
    setSelectedCamera(event.target.value);
  };

  return (
    <div>
      // Showing a selector for the availabe cameras
      <select value={selectedCamera} onChange={handleChangeCamera}>
        {cameras.map((camera) => {
          return <option value={camera.deviceId}>{camera.label}</option>;
        })}
      </select>
    </div>
  );
};

API Reference

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

• getMics()
• getWebcams()
• changeMic()
• changeWebcam()