ブラウザ上でプレビューを表示せずにカメラキャプチャする方法 #JavaScript

javascript を使うとウェブブラウザからカメラにアクセスして画像をキャプチャできる。が、多くのサンプルプログラムではプレビュー表示（カメラから取り込んだままの画像の表示）があったり、さらにその画像を取り込むためのキャンバスエリアがあったりするので、画面のレイアウト上で問題になることがある（なにか悪い目的で使うわけではない。ブラウザ上に必ず警告なりアイコンなりが出るし）。では、プレビュー表示なしにキャプチャができるか？というと、出来ますという話。

ポイント

<video> タグの領域を隠すのに css で display: none を指定する
そうすると画像が取り込まれなくなる（画像が更新されなくなる）ブラウザがあるので、play() を呼び出す
画像の取り出しのための canvas は createElement() で作成するが appendChild() しない

具体的には以下のような感じ。Mac の Chrome と Safari で動作確認。

navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(stream => {
        video.srcObject = stream;
        video.play(); // これがないと video タグを不可視にしたときに止まるブラウザがある
        setInterval(copyFrame, 30); // copyFrame 関数を 30msec に１度呼び出す
    }).catch(err => alert(`${err.name} ${err.message}`));
}, false);

プログラム例

動作の様子とソースコード全体は https://shiura.com/html5/aa2.html から見てみてください。取り込まれた画像を以下のようにアスキーアートで表示するプログラムになっています。説明はコメントでソースコード中に書いてあります。

参考資料

このプログラムを作成するにあたり、以下の記事を参考にしました。