Manage Audio and Video Devices - React

This feature allows hosts to switch their microphone, speaker, or camera devices during a live stream. Only hosts (in SEND_AND_RECV mode) can change input/output devices, ensuring they maintain control over their audio and video quality, while audience members (in RECV_ONLY mode) continue to receive the broadcast seamlessly.

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 provides a list of all available microphones, which can be shown in a dropdown for selection.

• It returns an array of objects, each containing a deviceId and a label representing an audio input device.

changeMic()

• To change the input audio device of the host, you need to call this method by passing the desired device's deviceId.

Example

const LiveStreamView = () => {
  //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 Audio Output Device

getPlaybackDevices()

• This method of the useMediaDevice hook provides a list of all available speakers, which can be shown in a dropdown for selection.

• It returns an array of objects, each containing deviceId , groupId , kind and the label of the audio output device..

setSinkId()

• To change the output audio device of the host, you need to set the sinkId for each <audio> element used to render the audio during the livestream.

const LiveStreamView = () => {
  //Creating two react states to store list of available speakers and selected speaker
  const [speakers, setSpeakers] = useState([]);
  const [selectedSpeaker, setSelectedSpeaker] = useState("");

  //Getting the methods to get the speakers
  const { getPlaybackDevices } = useMediaDevice();

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

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

  //Changing the speaker with the selected deviceId
  const handleChangeSpeaker = (event) => {
    const audioTags = document.getElementsByTagName("audio");
    audioTags.forEach((tag) => {
      tag.setSinkId(event.target.value);
    });
    setSelectedSpeaker(event.target.value);
  };

  return (
    <div>
      // Showing a selector for the availabe speakers
      <select value={selectedSpeaker} onChange={handleChangeSpeaker}>
        {speakers.map((speaker) => {
          return <option value={speaker.deviceId}>{speaker.label}</option>;
        })}
      </select>
    </div>
  );
};

note

To learn more about changing the audio output device check this documentation.

Changing Camera Input Device

getWebcams()

• This method of the useMeeting hook provides a list of all available cameras, which can be shown in a dropdown for selection.

• It returns an array of objects, each containing a deviceId and a label representing the camera device.

changeWebcam()

• To change the camera device of the host, you need to call this method by passing the desired device's deviceId.

Example

const LiveStreamView = () => {
  //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()
• getPlaybackDevices()
• changeMic()
• changeWebcam()