Manage Audio and Video Devices - JavaScript

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

let liveStream;

// Initialize liveStream
liveStream = VideoSDK.initMeeting({
  // ...
});

const mics = await liveStream?.getMics();

const { deviceId, label } = mics[0];

liveStream?.changeMic(deviceId);

Changing Audio Output Device

getPlaybackDevices()

• This method 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 speakers = await VideoSDK?.getPlaybackDevices();

const { deviceId, label } = speakers[0];

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

note

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

Changing Camera Input Device

getWebcams()

• This method 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

let liveStream;

// Initialize liveStream
liveStream = VideoSDK.initMeeting({
  // ...
});

const webcams = await liveStream?.getWebcams();

const { deviceId, label } = webcams[0];

liveStream?.changeWebcam(deviceId);

API Reference

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

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