How to change webcam video source in webapps that don't support it

It’s easy with WebRTC to let the user choose audio and video sources in a browser. However, not all web-based video apps implement controls for changing the webcam video source.

With some browsers this isn't a problem. For instance, both Firefox and Edge let users select a video source per site. However, whilst Google Chrome lets users choose their default webcam using the special chrome://settings/content/camera URL, this default camera choice isn't used by WebRTC. Plenty of users have complained about this in the Google Chrome forums, but no solution is on the horizon.

As such, where users use apps that don't implement video source selection (such as vMix) and they use a browser that doesn't allow site-based video source selection (such as Chrome), they're stuck. Video apps that don't allow users to choose a video camera end up making an arbitrary choice, which means users may not be able to use the camera they want.

Fortunately, there's a quick hack we can use to force a web-based video app on Chrome to select a specific camera.

Here's how to do it for vMix's vmixcall.com service:

1. Load Chrome and start your video chat session.

2. Open "Developer Tools" in Chrome with the ⌥ Option + ⌘ Cmd + i keyboard shortcut, or by using the More Tools → Developer Tools menu.

3. Paste the following code into the default "Console" tab, and hit enter:

function gotDevices(deviceInfos) {
  // Look for the Reincubate Camo video input device.
  var deviceId;
  for (deviceInfo of deviceInfos) {
    if (deviceInfo.kind === 'videoinput' && deviceInfo.label === 'Reincubate Camo') {
      deviceId = deviceInfo.deviceId
      break;
    }
  }
  if (deviceId) {
    const constraints = {
      audio: true,
      video: { deviceId: { exact: deviceId } }
    };
    navigator.mediaDevices.getUserMedia(constraints).then(gotStream);
  } else {
    console.error('Unable to find Reincubate Camo video input device.');
  }
}
function gotStream (stream) {
  // Tell the vMix Call session to switch to a different stream.
  try {
    session.gotLocalStream(stream);
  } catch {
    console.error('Unable to trigger vMix Call session stream update.');
  }
}
// Ask the browser for a list of media devices.
navigator.mediaDevices.enumerateDevices().then(gotDevices)

With that done, Chrome should automatically switch to the Camo video source. If this workaround doesn't work for you, please let us know in the comments, or reach out to us directly so that we can help you.

Here's what that looks like:

If you'd like to avoid the need for this in future, please lobby your video provider to add a video selection in their app.