webRTCで顔認識(face.js)を試してみた。

face.jsって、なんか、顔認識できるらしいぞ。凄い！
そんなわけで、試してみる。

ccv.jsとface.jsを使うと実現できるぽい。
ccv.jsは、コンピュータビジョンのライブラリ。
face.jsは、顔認識するためのパターンデータみたい。

２つのソースは、以下から取得してきた。（どこがオリジナルかわからず。。。）
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の認識が微妙だけど、こんな感じです！
なんか１ネタできそう。

f:id:alumican:20120322163301j:plain