バーコードリーダーを作る必要があったので、周辺技術を学ぶためにブラウザからカメラのスナップショットを撮るスクリプトを作りました。WebRTCのAPIを使っていますが、すべてクライアントサイドで完結します。今回のコードはGoogle Chromeでしか動きませんが、書き方が違うだけでメジャーなブラウザであれば実現できます。
もっと簡単にできるような気がしますが、WebRTCはこういうことは想定されていないのかもしれません。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Chromeからカメラのスナップショットを取る</title>
</head>
<body>
<video id="myVideo" autoplay></video>
<button type="button" onclick="snapshot()">実行</button>
<img id="myImg">
<script>
window.addEventListener("load", function() {
navigator.webkitGetUserMedia({ video: true, audio: false },
function(stream) {
// カメラの映像をvideoに映す
document.getElementById("myVideo").src = webkitURL.createObjectURL(stream)
},
function(error) {
// ブラウザが対応していない場合や
// カメラへのアクセスを拒否されたりした場合はエラーとなる
console.log(error)
console.log(error.code)
})
}, false)
var snapshot = function() {
var myVideo = document.getElementById("myVideo")
// 仮想のcanvasを生成
var tmpCanvas = document.createElement('canvas')
// アスペクト比を維持するためにvideoタグと同じサイズにしておく
tmpCanvas.width = myVideo.clientWidth
tmpCanvas.height = myVideo.clientHeight
// canvasにvideoの1フレームを描画
tmpCanvas.getContext("2d")
.drawImage(myVideo, 0, 0, myVideo.clientWidth, myVideo.clientHeight)
// canvasの描画データを取得してimgにセット
document.getElementById("myImg").src = tmpCanvas.toDataURL()
}
</script>
</body>
</html>