カメラ映像から画像を取得

シャッターを押して「名前をつけて画像を保存」

HTML5カメラ | 端末のカメラを有効にしてください

シャッターボタンを押すと、動画の下に画像が生成されます

サーバーに映像や画像は送信されないので気軽に使ってください


  view source
  JavaScript
  window.onload = () => {
  const video  = document.querySelector("#video");
  const canvas = document.querySelector("#picture");
  const se     = document.querySelector('#se');
  const se2     = document.querySelector('#se2');
  var w = document.body.clientWidth;
  var h = window.innerHeight;
  video.setAttribute('width', w);
  video.setAttribute('height', h);
  canvas.setAttribute('width', w);
  canvas.setAttribute('height', h);

  const constraints = {
    audio: false,
    video: {
      width: 300,
      height: 200,
      facingMode: "user"// フロントカメラ
      //facingMode: { exact: "environment" }  // リアカメラ
    }
  };

  navigator.mediaDevices.getUserMedia(constraints)
  .then( (stream) => {
    video.srcObject = stream;
    video.onloadedmetadata = (e) => {
      video.play();
    };
  })
  .catch( (err) => {
    console.log(err.name + ": " + err.message);
  });

   document.querySelector("#video").addEventListener("click", () => {
    const ctx = canvas.getContext('2d');

    video.pause();
    se.play();
    setTimeout( () => {
      video.play();
    }, 500);

    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  });

   document.querySelector("#picture").addEventListener("click", () => {
    const ctx = canvas.getContext('2d');

    var data = canvas.toDataURL('image/jpeg');
    var a = document.querySelector("a");
    a.href = data;
    a.download = 'camera.jpg';
    se2.play();
  });

};
  CSS
  form{
  display:block;
  text-align:center;
}
button{
  width:100%;
  height:40px;
}
video{
  width:100%;
  display:block;
  margin:0 auto;
}
canvas{
  width:100%;
  display:block;
  margin:0 auto;
}
form a{
  display:inline-block;
  border:1px solid #666;
  margin:8px;
  padding:16px;
  text-decoration:none;
}
form a[download]{
  background-color:#000;
  color:#fff;
}
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-camera-video/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。