ピュアJS:ブラウザで任意のカメラデバイスを選択

PCもしくはモバイル端末のブラウザ上で任意のカメラデバイスを選択し、videoタグで利用するサンプルです。 今回はピュアなJavaScriptだけを使って実現しています。

目次:

• 前提
• サンプルコード
• 実行例

前提

• Chromeブラウザ バージョン: 79.0.3945.79（Official Build）

サンプルコード

<video id="video" style="width: 100%; max-width: 1280px;" autoplay></video>

<script>
//
// WebカメラのデバイスIDの一覧を取得
//
const cameraDeviceIds = [/* { deviceId, label } */];
navigator.mediaDevices.enumerateDevices().then(function(mediaDevices) {
  for (let len = mediaDevices.length, i = 0; i < len; i++) {
    const item = mediaDevices[i];
    // NOTE: カメラデバイスの場合、 kind プロパティには "videoinput" が入っている:
    if (item.kind === "videoinput") {
      const deviceId = item.deviceId;
      const label = item.label;
      // NOTE: ここでデバイスID（とラベル）を適当な変数に保存しておく
      cameraDeviceIds.push({ deviceId, label });
    }
  }
});

//
// Webカメラを選択
//
const video = document.querySelector("#video");
navigator.mediaDevices.getUserMedia({
  audio: false,
  video: {
      // ここにカメラのデバイスIDをセット(ここではindex:0のカメラデバイスをセットしました):
    deviceId: cameraDeviceIds[0],
  },
}).then(function(stream) {
  video.srcObject = stream;
}).catch(function(e) {
  alert("ERROR: Webカメラの起動に失敗しました: " + e.message);
});
</script>

navigator.mediaDevices.enumerateDevices().then(function(mediaDevices) {...});で端末にビルトインされているカメラデバイス一覧を取得し、 navigator.mediaDevices.getUserMedia({...});でそれを利用しています。

実行例

この技術は芽萌丸ツールズのWebカメラツールで利用されています。 実行例はそちらをご確認ください。

以上です。