HTML5のgetUserMedia APIでカメラの映像を取得する方法。
またカメラの映像を画像化する方法も記載しました。

jsdo.itを使用してまとめてみました。
もし、Webカメラがない場合は以前に紹介した「WebカメラがないPCのための仮想Webカメラ「ManyCam」」


カメラの使用出来るかのチェックを行う。
ブラウザ毎に微妙に呼び出し方が違うので同時にチェックを行います。

//カメラ使えるかチェック
var hasGetUserMedia = function() {
    return (navigator.getUserMedia || navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
    console.log("カメラ OK");
} else {
    alert("未対応ブラウザです。");
}

カメラの映像をストリーミング取得する。

var video = document.getElementById('video'); // ビデオ
var localMediaStream = null; // ストリーミング

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);

カメラの映像をcanvasに描画後、canvasの内容を画像化する。

var video = document.getElementById('video');　// ビデオ
var canvas = document.getElementById('canvas'); // キャンバス
var ctx = canvas.getContext('2d');　// 2Dコンテキスト 
var localMediaStream = null;　// ストリーミング

//カメラ画像キャプチャ
var snapshot = function() {
    if (localMediaStream) {
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        document.getElementById('img').src = canvas.toDataURL('image/webp');
    }
}

// キャプチャ実行
snapshot();

これをうまく利用すれば要らなくなったスマホで防犯カメラが作れるかも知れません。
今度時間があれば挑戦しようかと思っております。


«前の記事：15分だけ有効なメールアドレスを作成してくれる「QuickMail」カメラの画像をPHPでサーバー上に保存する方法：次の記事»