JS カメラの映像を表示させる

カメラの映像をブラウザに表示させるサンプルです。

このサンプルではパソコンやスマホの画面側についているカメラの映像を取得して、ブラウザに表示します。

以下のボタンを押すとブラウザがカメラにアクセスして良いか、の許諾が表示されます。

前方にカメラがついている場合、以下のボタンで切替が可能です。

カメラから取得された映像はこの黒い四角に描画されます。

※このJSはローカルで動いているので、動画はどこにもアップロードされません。

このサンプルは、ユーザーがびっくりしないように自分のアクションでカメラが起動すること、自分で止められること、カメラを選択できることが特徴です。

JSは以下です



    window.onload = () => {

        const video  = document.querySelector("#camera");
      
        // 手前のカメラの設定
        const constraints1 = {
          audio: false,
          video: {
            width: 300,
            height: 200,
            facingMode: "user",
          }
        };
      
        // 向こう側のカメラの設定
        const constraints2 = {
          audio: false,
          video: {
            width: 300,
            height: 200,
            facingMode: { exact: "environment" },
          }
        };
      
      
      
        //ボタンが押されたらカメラの映像を<video>に写す
        document.querySelector("#video_start1").addEventListener("click", () => {
          navigator.mediaDevices.getUserMedia(constraints1)
          .then( (stream) => {
            video.srcObject = stream;
          });
        });
      
        //ボタンが押されたら向こう側カメラの映像を<video>に写す
          document.querySelector("#video_start2").addEventListener("click", () => {
          navigator.mediaDevices.getUserMedia(constraints2)
          .then( (stream) => {
            video.srcObject = stream;
          });
        });
      
        //ボタンが押されたらカメラの映像を止める
        document.querySelector("#video_stop").addEventListener("click", () => {
          video.srcObject.getTracks().forEach(track => track.stop());
        });
      
      
      };

HTMLはこちら


<button type="button" id="video_start1" class="demo">自分側のカメラの映像を表示</button>
<button type="button" id="video_start2" class="demo">向こう側のカメラの映像を表示</button>
<button type="button" id="video_stop" class="demo">表示を止める</button>

<video id="camera" width="300" height="200" class="demo" autoplay playsinline ></video>

こんな簡単にカメラと連携できる時代になっていたんですね。

今後はもっと機能を拡張したサンプルを載せていきたいと思います。