Change Audio Output Device - React

During the meeting, at any point, a participant wishing to switch their output audio device, such as from headphones to speakers, can do so using the below-mentioned methods.

Getting Output device

• To get all the available audio output devices, you can use the getPlaybackDevices() method of the useMediaDevice hook.

import { useMediaDevice } from "@videosdk.live/react-sdk";

function SpeakerSelector() {
  // Hooks run inside a component; calling useMediaDevice() at module scope throws.
  const { getPlaybackDevices } = useMediaDevice();

  const getAudioOutputDevice = async () => {
    let speakers;
    try {
      speakers = await getPlaybackDevices();
    } catch (err) {
      console.error("getPlaybackDevices failed:", err);
    }
    return speakers;
  };
}

note

To learn more about the getPlaybackDevices() method check this API reference.

Changing Output Device

• To change the output audio device, you need to set the sinkId for each <audio> element used to render the audio in the meeting.

const setAudioOutputDevice = (deviceId) => {
  const audioTags = document.getElementsByTagName("audio");
  Array.from(audioTags).forEach((tag) => {
    tag.setSinkId(deviceId);
  });
};

note

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

Setting Audio Volume

• To set the audio volume for the meeting, you need to adjust the volume property for each <audio> element used to render the paricipant audio.

• Value for the volume property for the <audio> can be between 0 and 1.

const setAudioVolume = (volume) => {
  const audioTags = document.getElementsByTagName("audio");
  Array.from(audioTags).forEach((tag) => {
    tag.volume = volume;
  });
};

note

To learn more about adjusting the audio volume check this documentation.