HTML5とOSSで作るブラウザで簡単顔認識
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 1,978 views

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

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

Statistics

Views

Total Views
1,978
Views on SlideShare
1,968
Embed Views
10

Actions

Likes
8
Downloads
2
Comments
0

2 Embeds 10

https://twitter.com 8
https://www.google.co.jp 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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/