Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

HTML5のvideoタグを使ってブラウザからWEBカメラを呼び出す

javascript

ブラウザからWEBカメラを呼び出す方法です。
当初、Python + OpenCVの組み合わせを考えてましたが……
重い画像処理をするわけでもない場合、HTML5から導入された仕組みを使えばイケます。

実際のところ

navigator.mediaDevices.getUserMediaメソッドを用いてUSBカメラの動画をHTML5のvideoタグの内部に表示しています

<!DOCTYPE html>
<html>
<body>
    <video autoplay="true" id="videoElement">
    </video>
    <script>
        var video = document.querySelector("#videoElement");

        if (navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: true })
                .then(function (stream) {
                    video.srcObject = stream;
                })
                .catch(function (error) {
                    console.log("Something went wrong!");
                });
        }
    </script>
</body>
</html>

参考もと