Download as PDF, PPTX
HTML5とOSSで作るブラウザで簡単顔認識
- 1.
- 2.
- 3.
- 4. 使用技術 ・HTML5 Media Captureand 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.
- 7.
- 8.
- 9.
- 10.
- 11.
- 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.