navigator.mediaDevices.getUserMediaを実行した際にstreamを取得するカメラをlabelを使って指定する 🎥

developer.mozilla.org

navigator.mediaDevices.getUserMediaを使ってカメラに接続しようとする際、

const stream = await navigator.mediaDevices.getUserMedia({
  audio: false,
  video: {
    deviceId: 'HOGEHOGE'
  }
});

という形でdeviceIdを指定できます。
上記の場合、HOGEHOGEというIDのカメラが見つからない場合は別のカメラへの接続を試みますが、

const stream = await navigator.mediaDevices.getUserMedia({
  audio: false,
  video: {
    deviceId: {
      exact: 'HOGEHOGE'
    }
  }
});

とexactをキーとして渡すことで、HOGEHOGEというIDのカメラが見つからない場合にエラーを投げることもできます。

今回は、若干特殊なケースですが、デバイスIDは分からずとも、デバイス名（label）がわかっている場合に、カメラを指定する方法を紹介します。

デバイス名（label）で接続先を指定する

try {
  const devices = await navigator.mediaDevices.enumerateDevices();
  let deviceId = '';

  devices.forEach((device) => {
    if (device.kind === 'videoinput') {
      if (device.label.includes('HD Pro Webcam C920')) {
        deviceId = device.deviceId;
      }
    }
  });

  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
      deviceId
    }
  });

  setStream(stream);
} catch (err) {
  alert(err);
}

developer.mozilla.org

❶ navigator.mediaDevices.enumerateDevicesで利用可能なデバイスのリストを取得する
❷ リストをループで回し、デバイス名（label）をチェックする
❸ navigator.mediaDevices.getUserMediaを実行する際に、該当するlabelのdevideIdを渡す

という手順でOKです。

上記コードでは、exactを使っていないので、見つからない場合は他のカメラに接続します。
見つからない場合にエラーを発生させたい場合は、

try {
  const devices = await navigator.mediaDevices.enumerateDevices();
  let deviceId = '';

  devices.forEach((device) => {
    if (device.kind === 'videoinput') {
      if (device.label.includes('HD Pro Webcam C920')) {
        deviceId = device.deviceId;
      }
    }
  });

  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
      deviceId: {
        exact: deviceId
      }
    }
  });

  setStream(stream);
} catch (err) {
  alert(err);
}