2013/10/31　HTML5jえんぷら部主催　HALLOWEEN WEB NIGHT発表スライド

1. HTML5とOSSで作る
ブラウザで簡単顔認識
2013/10/31 業務システムのためのHTML5勉強会#05
HALLOWEEN WEB NIGHT
小川 充（@mitsuruog）

2. 自己紹介
小川充（おがわみつる）37歳
株式会社クレスコ 技術研究所
フロントエンジニア
HTML5j えんぷら部スタッフ
enja-ossメンバー
github:https://github.com/mitsuruog
twitter:https://twitter.com/mitsuruog

3. 命題
Q.
HTML5とOSSを組み合わせてブラウザで
顔認識ができるのか？
A.できます！

4. 使用技術
・HTML5 Media Capture and Streams
（以下、StreamAPIと略）
http://dev.w3.org/2011/webrtc/editor/getusermedia.html
・OSS headtrackr.js https://github.com/auduno/headtrackr
・Chrome28＋

5. StreamAPIの使い方
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.msURL || window.mozURL;
var videoInput = document.getElementById('video');
if (navigator.getUserMedia) {
var videoSelector = {video: true, audio: true};
navigator.getUserMedia(videoSelector, function (stream) {
videoInput.src = window.URL.createObjectURL(stream);
}, function (e) {
alert('あぼーん');
});
} else {
alert(‘あぼーん’);
}

6. StreamAPIの使い方
ブラウザにて、サイトからのカメラへのアクセスの許可する。
→httpだと毎回、httpsだと永続的。

7. ブラウザサポート
http://caniuse.com/#feat=stream

8. 顔認識させてみた
https://github.com/auduno/headtrackr

9. 顔特徴認識させてみた
https://github.com/auduno/clmtrackr

10. デモ
https://github.com/mitsuruog/html5-webcam-demo

11. HTML5とOSSで出来ること
・カメラ入力データの二次利用
（ストリーミング、顔認識、顔特徴認識など）
他にもできること
スクリーンショットの取得
画像処理
・CSS Filter（Webkitのみ）
http://caniuse.com/css-filters
http://www.html5rocks.com/en/tutorials/getusermedia/intro/#toc-effects-css
・WebGL（Three.js利用）
http://learningthreejs.com/blog/2012/02/07/live-video-in-webgl/

12. 課題
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();

13. まとめ
HTML5とOSSで顔認識ができる。
Web上での表現方法の幅が広がった。
ただし、制限や制約が多く、既存の顔認識の代替となるほどではない。
（HTML5の登場でブラウザでできることは増えたが、必ずしも万能ではない。）
ご清聴ありがとうございました。
photo credit
・http://www.flickr.com/photos/twistermc/57364804/
・http://www.flickr.com/photos/27656397@N05/2988598127/