JS　動画から静止画を作成

カメラから動画を表示し、その動画から画像を作成するサンプルです。

動画を表示するの続きになります。

動画から静止画を作成するサンプルです。

まず、動画を写すカメラを選択。

ブラウザの通知を許可すると映像が表示されます。

下のボタンを押すと動画から画像を作成します。

カメラを止めるボタンはこちら。

シンプルなカメラアプリと同じような機能がブラウザでも可能です。

JSはこちら


    window.onload = () => {

        const video  = document.querySelector("#demo_camera");
        const canvas = document.querySelector("#demo_picture");
      
        // 手前のカメラの設定
        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());
        });

        
//静止画を作成
document.querySelector("#shutter").addEventListener("click", () => {
    const ctx = canvas.getContext("2d");

    // 演出
    video.pause();  
    //se.play();      // 音は一旦つけない
    setTimeout( () => {
    video.play();    
    }, 500);

    // canvasに画像を作成
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
});

    };