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.

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 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({
  // ...
});

let mics;
try {
  mics = await liveStream?.getMics();
} catch (err) {
  console.error("getMics failed:", err);
}

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

try {
  await liveStream?.changeMic(deviceId);
} catch (err) {
  console.error("changeMic failed:", err);
}

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({
  // ...
});

let webcams;
try {
  webcams = await liveStream?.getWebcams();
} catch (err) {
  console.error("getWebcams failed:", err);
}

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

try {
  await liveStream?.changeWebcam(deviceId);
} catch (err) {
  console.error("changeWebcam failed:", err);
}

API Reference

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

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