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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,772

Published on

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

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

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

No Downloads
Views
Total Views
1,772
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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/

×