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

2,782 views
2,488 views

Published on

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

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,782
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
6
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

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

  1. 1. HTML5とOSSで作る ブラウザで簡単顔認識 2013/10/31 業務システムのためのHTML5勉強会#05 HALLOWEEN WEB NIGHT 小川 充(@mitsuruog)
  2. 2. 自己紹介 小川充(おがわみつる)37歳 株式会社クレスコ 技術研究所 フロントエンジニア HTML5j えんぷら部スタッフ enja-ossメンバー github:https://github.com/mitsuruog twitter:https://twitter.com/mitsuruog
  3. 3. 命題 Q. HTML5とOSSを組み合わせてブラウザで 顔認識ができるのか? A.できます!
  4. 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. 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. 6. StreamAPIの使い方 ブラウザにて、サイトからのカメラへのアクセスの許可する。 →httpだと毎回、httpsだと永続的。
  7. 7. ブラウザサポート http://caniuse.com/#feat=stream
  8. 8. 顔認識させてみた https://github.com/auduno/headtrackr
  9. 9. 顔特徴認識させてみた https://github.com/auduno/clmtrackr
  10. 10. デモ https://github.com/mitsuruog/html5-webcam-demo
  11. 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. 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. 13. まとめ HTML5とOSSで顔認識ができる。 Web上での表現方法の幅が広がった。 ただし、制限や制約が多く、既存の顔認識の代替となるほどではない。 (HTML5の登場でブラウザでできることは増えたが、必ずしも万能ではない。) ご清聴ありがとうございました。 photo credit ・http://www.flickr.com/photos/twistermc/57364804/ ・http://www.flickr.com/photos/27656397@N05/2988598127/

×