サポートしていないウェブアプリでウェブカメラビデオソースを変更する方法

更新しました 1週間以上前

によって

WebRTCを使用すると、ユーザーがブラウザーでオーディオソースとビデオソースを選択するのが簡単になります。ただし、すべてのWebベースのビデオアプリがWebカメラのビデオソースを変更するためのコントロールを実装しているわけではありません。

一部のブラウザでは、これは問題ではありません。たとえば、FirefoxとEdgeのどちらでも、 サイトごとに動画ソースを選択できます。ただし、Google Chromeでは特別なchrome://settings/content/camera URLを使用してデフォルトのウェブカメラを選択できますが、このデフォルトのカメラの選択はWebRTCでは使用されません。多くのユーザーがGoogle Chromeフォーラムでこれについて不満を述べていますが、解決策はまだありません。

そのため、ユーザーがビデオソースの選択を実装していないアプリ（vMixなど）を使用し、サイトベースのビデオソースの選択が許可されていないブラウザー（Chromeなど）を使用している場合は、行き詰まります。ユーザーがビデオカメラを選択できないビデオアプリは、最終的に任意の選択をすることになります。つまり、ユーザーは必要なカメラを使用できない場合があります。

幸いなことに、Chrome上のWebベースのビデオアプリに特定のカメラを選択させるために使用できる簡単なハックがあります。

vMixのvmixcall.comサービスでこれを行う方法は次のとおりです。

Chromeをロードして、ビデオチャットセッションを開始します。
Chromeで⌥ Option + ⌘ Cmd + iキーボードショートカットを使用するか、[ More Tools Developer Tools ]→[ Developer Tools ]メニューを使用して、「デベロッパーツール」を開きます。
次のコードをデフォルトの「コンソール」タブに貼り付け、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)