肥溜め
肥溜め
ブラウザだけでカメラのスナップショットを取る
ブラウザだけでカメラのスナップショットを取る

ブラウザだけでカメラのスナップショットを取る

タグ
WebRTCBrowserJavaScript
投稿日
July 15, 2018
著者
💩 うんち

バーコードリーダーを作る必要があったので、周辺技術を学ぶためにブラウザからカメラのスナップショットを撮るスクリプトを作りました。WebRTCのAPIを使っていますが、すべてクライアントサイドで完結します。今回のコードはGoogle Chromeでしか動きませんが、書き方が違うだけでメジャーなブラウザであれば実現できます。

<!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>

処理の流れ

  1. カメラの映像をvideoに表示
  2. videoの1フレームを仮想のcanvasに描画
  3. canvasの描画情報をimgに落とし込む

もっと簡単にできるような気がしますが、WebRTCはこういうことは想定されていないのかもしれません。