webRTCで顔認識(face.js)を試してみた。
face.jsって、なんか、顔認識できるらしいぞ。凄い!
そんなわけで、試してみる。
ccv.jsとface.jsを使うと実現できるぽい。
ccv.jsは、コンピュータビジョンのライブラリ。
face.jsは、顔認識するためのパターンデータみたい。
2つのソースは、以下から取得してきた。(どこがオリジナルかわからず。。。)
https://github.com/wesbos/HTML5-Face-Detection
顔を認識っていったら、誰もが一度はやってみたいと思ったはず。
顔を笑い男に上書きするやつを書いてみた。
ソース(sample02.html)
<html> <head> <title>sample02</title> <script type="text/javascript" src="./js/ccv.js"></script> <script type="text/javascript" src="./js/face.js"></script> </head> <body> <h1>webRTC with face.js</h1> <script type="text/javascript"> var src; var dest; var width; var height; var image = new Image(); image.src = "./laughingman.gif"; initialize = function() { src = document.getElementById("src"); dest = document.getElementById("dest"); navigator.webkitGetUserMedia("video,audio",onGotStream,onFailedStream); } onGotStream = function (stream) { var url = webkitURL.createObjectURL(stream); src.src = url; setInterval(draw,500); } onFailedStream = function(error) { alert("onFailedStream"); } var draw = function () { width = src.videoWidth; height = src.videoHeight; var canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; var context = canvas.getContext('2d'); context.drawImage(src,0,0,width,height); dest.width = width; dest.height = height; var context2 = dest.getContext('2d'); context2.drawImage(src,0,0,width,height); var comp = ccv.detect_objects({"canvas" :ccv.grayscale(canvas), "cascade" : cascade, "interval" : 5, "min_neighbors" : 1 }); for(var i=0;i < comp.length;i++) { context2.drawImage(image,comp[i].x-30,comp[i].y-30,comp[i].width+60,comp[i].height+60); } } setTimeout(initialize,1); </script> <video id="src" autoplay></video> <canvas id="dest"></canvas> </body> </html>
デモ
動かしてみたいけど面倒くさい人のためにデモページを用意しました。
WebRTCは、Google Chromeの開発版でしか動作しないので、
Chromeの開発版でMediaStreamを有効にして試してください。
あと、Webカメラが必要です。
http://alumican.ddo.jp/webrtc/sample02.html
※動画データは、サーバに送信されませんよ。
動作画面
ちょっとface.jsの認識が微妙だけど、こんな感じです!
なんか1ネタできそう。