ピュア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カメラツールで利用されています。 実行例はそちらをご確認ください。

以上です。

オススメ:Zattoyomiで時事ネタチェックの時間節約!
芽萌丸プログラミング部 @programming
プログラミング関連アカウント。Web標準技術を中心に書いていきます。フロントエンドからサーバサイドまで JavaScript だけで済ませたい人たちの集いです。記事は主に @TanakaSoftwareLab が担当。