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の登場でブラウザでできることは増えたが、必ずしも万能ではない。)