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.

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 () => {
    const mics = await getMics();
    setMics(mics);
  };

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

  //Changing the mic with the selected deviceId
  const handleChangeMic = (event) => {
    changeMic(event.target.value);
    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 () => {
    const speakers = await getPlaybackDevices();
    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 () => {
    const webcams = await getWebcams();
    setCameras(webcams);
  };

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

  //Changing the camera with the selected deviceId
  const handleChangeCamera = (event) => {
    changeWebcam(event.target.value);
    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()