02日 11月 2016

HTMLでカメラを作る

紹介内容

html5で追加された「WebRTC」の機能を使えば、ブラウザからカメラを起動して、写真を写すことができます。

今回はブラウザからカメラを起動して、写真を写して、jpeg画像としてダウンロードするところまで作ってみます。

概要

html5の「video」領域にWebカメラの映像を映し、それを「canvas」領域にコピーし、さらにそれを「img」領域に書き出します。

canvasは見せる必要がないため、隠します。

img領域を右クリックでダウンロードすれば、ファイルとして作成できるという流れです。

WebRTCの「getUserMedia」というメソッドによってカメラにアクセスします。
Chrome、Firefox、Operaなどが対応しています。一方でIEやSafariは未対応となっています。

ブラウザを使用しますが、http通信はlocalhostへのみ可能です。外部からアクセスして利用するにはhttps通信にしなければいけません。

ソース

<!DOCTYPE html>
<html>
<head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<style>
#camera {
 width: 350px;
     height: 280px;
     transform: rotateY(180deg);
}
#img {
     width: 350px;
     height: 280px;
}
</style>


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
<!--
$(function() {
  //videoタグを取得
  var video = document.getElementById('camera');
  //カメラが起動できたかのフラグ
  var localMediaStream = null;
  //カメラ使えるかチェック
  var hasGetUserMedia = function() {
          return (navigator.getUserMedia || navigator.webkitGetUserMedia ||
                 navigator.mozGetUserMedia || navigator.msGetUserMedia);
  };

  //エラー
  var onFailSoHard = function(e) {
          console.log('Error!', e);
          alert("Error !");
  };

  if(!hasGetUserMedia()) {
          alert("Unsupported browser.");
  } else {
          window.URL = window.URL || window.webkitURL;
          navigator.getUserMedia  = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia;
          navigator.getUserMedia({video: true}, function(stream) {
                  video.src = window.URL.createObjectURL(stream);
                  localMediaStream = stream;
          }, onFailSoHard);
  }

  $("#snap").click(function() {
          if (localMediaStream) {
                  var canvas = document.getElementById('canvas');
                  //canvasの描画モードを2sに
                  var ctx = canvas.getContext('2d');
                  var img = document.getElementById('img');

                  //videoの縦幅横幅を取得
                  var w = video.offsetWidth;
                  var h = video.offsetHeight;

                  //同じサイズをcanvasに指定
                  canvas.setAttribute("width", w);
                  canvas.setAttribute("height", h);

                  //canvasにコピー
                  ctx.drawImage(video, 0, 0, w, h);
                  //imgにpng形式で書き出し
                  img.src = canvas.toDataURL('image/png');
          }
  });
});
//-->
</script>
<body>
        <video id="camera" autoplay></video><br>
        <img id="img">
        <div style="display:none"><canvas id="canvas"></canvas></div>
</body>
</html>

カテゴリ： yoshizawa, HTML, Javascript, yoshipon, Camera, 2016/11