Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

3,863 views

Published on

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

  • Follow the link, new dating source: ❶❶❶ http://bit.ly/2F7hN3u ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ http://bit.ly/2F7hN3u ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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/

×