HTML5とOSSで作るブラウザで簡単顔認識

2013/10/31　業務システムのためのHTML5勉強会#05HALLOWEEN WEB NIGHT

小川　充（@mitsuruog）

自己紹介

小川充（おがわみつる）37歳

株式会社クレスコ　技術研究所

フロントエンジニア

HTML5j えんぷら部スタッフ

enja-ossメンバー

github:https://github.com/mitsuruogtwitter:https://twitter.com/mitsuruog

命題

Q.HTML5とOSSを組み合わせてブラウザで

顔認識ができるのか？

A.できます！

使用技術

・HTML5 Media Capture and Streams（以下、StreamAPIと略）

http://dev.w3.org/2011/webrtc/editor/getusermedia.html

・OSS headtrackr.js https://github.com/auduno/headtrackr

・Chrome28＋

StreamAPIの使い方navigator.getUserMedia = navigator.getUserMedia ||

navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||navigator.msGetUserMedia;

window.URL = window.URL || window.webkitURL || window.msURL ||　window.mozURL;

if (navigator.getUserMedia) {

} else {alert(‘あぼーん ’);

}

var videoInput = document.getElementById('video');

var videoSelector = {video: true, audio: true};navigator.getUserMedia(videoSelector, function (stream) {

}, function (e) {alert('あぼーん ');

});

videoInput.src = window.URL.createObjectURL(stream);

StreamAPIの使い方

ブラウザにて、サイトからのカメラへのアクセスの許可する。

→httpだと毎回、httpsだと永続的。

ブラウザサポート

http://caniuse.com/#feat=stream

顔認識させてみた

https://github.com/auduno/headtrackr

顔特徴認識させてみた

https://github.com/auduno/clmtrackr

デモ

https://github.com/mitsuruog/html5-webcam-demo

HTML5とOSSで出来ること

・カメラ入力データの二次利用

（ストリーミング、顔認識、顔特徴認識など）

他にもできること

スクリーンショットの取得

画像処理

・CSS Filter（Webkitのみ）

http://caniuse.com/css-filtershttp://www.html5rocks.com/en/tutorials/getusermedia/intro/#toc-effects-css・WebGL（Three.js利用）

http://learningthreejs.com/blog/2012/02/07/live-video-in-webgl/

課題

StreamAPIがEditor’s Draft。（2013年10月末現在）

画像解析の演算処理パフォーマンスがマシンスペックと直結している。

→サーバサイドやネイティブなど要件に応じて処理分担する。

→必ずしもリアルタイムである必要はない。

OSSの演算処理の関係上、入力データサイズが固定。

→headtrackr(320×240)、clmtrackr(400×300)

二次利用する際に画像としてCanvasにコピーする必要がある。

canvasContext.drawImage(videoInput, 0, 0, canvas.width, canvas.height);

reuseData = canvasContext.getImageData(0, 0, canvas.width, canvas.height);

reuseData.some();

まとめ

HTML5とOSSで顔認識ができる。

Web上での表現方法の幅が広がった。

ご清聴ありがとうございました。

photo credit

・http://www.flickr.com/photos/twistermc/57364804/

・http://www.flickr.com/photos/27656397@N05/2988598127/

ただし、制限や制約が多く、既存の顔認識の代替となるほどではない。

（HTML5の登場でブラウザでできることは増えたが、必ずしも万能ではない。）