Switching Webcams or Microphones while in call with SignalWire Video SDK

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

It is very easy to switch between input devices once you have the SDK up and running. However, if you haven't yet set up a video conference project using the Video SDK, you can check out the Getting Started with the SignalWire Video API guide first.

Getting a list of supported input devices with WebRTC object

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.

List webcams with SignalWire.WebRTC.getCameraDevicesWithPermissions()

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.

let cams = await SignalWire.WebRTC.getCameraDevicesWithPermissions();
cams.forEach((cam) => {
  console.log(cam.label, cam.deviceId);
});

List microphones with SignalWire.WebRTC.getMicrophoneDevicesWithPermissions()

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

let mics = await SignalWire.WebRTC.getMicrophoneDevicesWithPermissions();
mics.forEach((mic) => {
  console.log(mic.label, mic.deviceId);
});

Changing webcams and microphones with Room.updateCamera() and Room.updateMicrophone() methods

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:

roomSession = new SignalWire.Video.RoomSession({
  token,
  rootElement: document.getElementById('root'), // an html element to display the video
  iceGatheringTimeout: 0.01,
  requestTimeout: 0.01
})

try {
  await roomSession.join()
} catch (error) {
  console.error('Error', error)
}

let cams = await SignalWire.WebRTC.getCameraDevicesWithPermissions();

let mics = await SignalWire.WebRTC.getMicrophoneDevicesWithPermissions();

roomSession.updateCamera({
    deviceId: cams[0].deviceId
});
roomSession.updateMicrophone({
    deviceId: mics[0].deviceId
});

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.

A complete code example

Complete demo of switching between examples is available for you to read and experiment on at CodeSandbox. You can tinker with the code without leaving your browser. The functions of interest to us here are at src/frontend/index.js. Look for functions populateMicrophone() and populateCamera().


Did this page help you?