Switch devices during calls

SignalWire Video API allows you to host real-time video calls and conferences on your website. In this guide, we’ll learn to allow users to change the camera and microphone that’s being used in the call.

Getting Started

If you haven’t yet set up a video conference project using the Video SDK, you can check out the build a video application guide first. After you have a video application set up, you can continue with this guide.

Getting a list of supported input devices

First, we want to find out what devices are available as input. Getting the list of media devices is handled by the WebRTC object available via SignalWire.WebRTC from the SDK. The methods in the WebRTC allow you to get the list of microphones, cameras, and speakers.

Listing webcams

To get the list of connected devices that can be used via the browser, we use the getCameraDevicesWithPermissions() method in WebRTC. The method returns an array of InputDeviceInfo object, each of which have two attributes of interest to us here: InputDeviceInfo.deviceId and InputDeviceInfo.label. The label will be used to refer to the webcam via the UI, and looks like ‘Facetime HD Camera’ or ‘USB camera’. The deviceId is used in your code to address a particular device.

1
const cams = await SignalWire.WebRTC.getCameraDevicesWithPermissions();
2
cams.forEach((cam) => {
3
  console.log(cam.label, cam.deviceId);
4
});

Listing microphones

Exactly as with getCameraDevicesWithPermissions(), we can use the getMicrophoneDevicesWithPermissions() to get a list of allowed microphones.

1
const mics = await SignalWire.WebRTC.getMicrophoneDevicesWithPermissions();
2
mics.forEach((mic) => {
3
  console.log(mic.label, mic.deviceId);
4
});

Changing webcams and microphones

Once you have set up the video call with SignalWire.Video.joinRoom() or equivalent methods, we can use Room.updateCamera() and Room.updateMicrophone() to change devices.

As a simplified example:

1
const roomSession = new SignalWire.Video.RoomSession({
2
  token,
3
  rootElement: document.getElementById("root"), // an html element to display the video
4
  iceGatheringTimeout: 0.01,
5
  requestTimeout: 0.01,
6
});
7
8
try {
9
  await roomSession.join();
10
} catch (error) {
11
  console.error("Error", error);
12
}
13
14
const cams = await SignalWire.WebRTC.getCameraDevicesWithPermissions();
15
const mics = await SignalWire.WebRTC.getMicrophoneDevicesWithPermissions();
16
17
// Pick the first camera in the list as the new video input device
18
roomSession.updateCamera({
19
  deviceId: cams[0].deviceId,
20
});
21
22
// Pick the first microphone in the list as the new audio input device
23
roomSession.updateMicrophone({
24
  deviceId: mics[0].deviceId,
25
});

Note that you don’t explicitly have to update camera and microphone. SignalWire Video SDK chooses the preferred input devices by default on setup. Only updateCamera or updateMicrophone when you want to switch to a non-default device.