getUserMedia で Web camera を使ってみる

いろいろ調べたので復習を兼ねて不確かに解説。まずはデモ。今回はエフェクトをかけるために video からデータをひっぱって canvas に描画しているものの、ただ表示させるだけなら video の src につっこむだけで終わる。

メディアへのアクセスはユーザの認証が必要になる。アクセスの可否を決めるバーがウィンドウ上部に出るのだけれど、いまいち分かりずらい。

ちなみに確認は Chrome と Firefox のみ。Safari はとりあえずこのコードでは動かなかった。

まずカメラにアクセスするには navigator オブジェクトに追加された getUserMedia メソッドを呼び出す。

多分第一引数がオブジェクト型でどのメディア(video か audio かあるいはどちらとも)にアクセスするのかを指定、第二引数がコールバック関数だと思う。

navigator.getUserMedia({//ユーザのメデイアにアクセスするAPI video: true,//アクセスする audio: true //メディアのタイプ }, function(localMediaStream) {//コールバック video.src = window.URL.createObjectURL(localMediaStream);//取得したメディアのデータを参照するURLを生成 }, function(e) { if (e.code === 1) { console.log('Error'); } });

上記の window.URL.createObjectURL() はどうも File API のひとつらしくて、ローカルデータへの参照 URL を生成してくれるっぽい。

これを使えば JavaScript で巨大なデータを読み込んでメモリに展開する必要がなく、ファイルを参照しながらストリーミングできる。

これで video 要素の参照先をローカルデータに設定すれば後は video の方が勝手にやってくれるので、そのデータを拾ってきて好きなようにすればいい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です