HTML5とJavaScriptでウェブカメラから写真を撮影する方法【getUserMedia活用ガイド】

HTML5を使ってウェブカメラから写真を撮るには

HTML5の getUserMedia APIを利用すれば、ブラウザ上でウェブカメラにアクセスし、映像を取得して写真として保存することができます。ここでは、基本的な実装手順を段階的に解説します。

1. 必要な変数を宣言する

まず、動画・キャンバス・撮影ボタンなどの要素への参照と、映像サイズを管理する変数を用意します。

var streaming = false,
    video = document.querySelector('#video'),
    canvas = document.querySelector('#canvas'),
    photo = document.querySelector('#photo'),
    startbutton = document.querySelector('#startbutton'),
    width = 320,
    height = 0;

streaming フラグは、カメラ映像のストリーミングが既に開始されているかどうかを判定するために使います。height を 0 にしておくことで、指定した幅に応じてアスペクト比が自動的に計算されます。

2. getUserMedia を使ってカメラにアクセスする

次に、ブラウザごとの実装の違いを吸収するため、getUserMedia のベンダープレフィックス付きメソッドをまとめて定義します。

navigator.getMedia = ( navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia);

このように記述することで、Chrome（webkit）、Firefox（moz）、Internet Explorer / Edge（ms）など、主要なブラウザで共通のコードとして動作させられます。

3. カメラ映像を video 要素に表示する

続いて、navigator.getMedia を呼び出し、許可された映像ストリームを <video> 要素に接続します。

navigator.getMedia(
  { video: true, audio: false },
  function(stream) {
    if (navigator.mozGetUserMedia) {
      video.mozSrcObject = stream;
    } else {
      var vendorURL = window.URL || window.webkitURL;
      video.src = vendorURL.createObjectURL(stream);
    }
    video.play();
  },
  function(err) {
    console.log("エラーが発生しました: " + err);
  }
);

4. 映像を canvas に描画して写真を撮る

video の再生準備ができたら、canplay イベントでキャンバスのサイズを調整します。撮影ボタンが押されたタイミングで、現在のフレームを canvas に描画し、画像データとして取り出します。

video.addEventListener('canplay', function(ev){
  if (!streaming) {
    height = video.videoHeight / (video.videoWidth / width);
    video.setAttribute('width', width);
    video.setAttribute('height', height);
    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);
    streaming = true;
  }
}, false);

startbutton.addEventListener('click', function(ev){
  takepicture();
  ev.preventDefault();
}, false);

function takepicture() {
  var context = canvas.getContext('2d');
  if (width && height) {
    canvas.width = width;
    canvas.height = height;
    context.drawImage(video, 0, 0, width, height);
    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
  } else {
    clearphoto();
  }
}

canvas.toDataURL() を使うことで、撮影した瞬間の画像を PNG 形式の Base64 データとして取得でき、そのまま <img> 要素に表示したり、サーバーへアップロードしたりできます。

注意点

• HTTPSが必要： getUserMedia はセキュリティ上の理由から、HTTPS環境または localhost でのみ動作します。
• ユーザーの許可： カメラへのアクセス時には、ブラウザが許可を求めるダイアログを表示します。ユーザーが拒否するとエラーコールバックが呼ばれます。
• モダンブラウザでの書き方： 最近のブラウザでは、Promise ベースの標準APIである navigator.mediaDevices.getUserMedia() を使用するのが推奨されています。