WebGazer.jsを使ってWebカメラで顔認識してみた

1 min read読了の目安(約1100字

WebGazer.jsという、Webカメラを使って視線の追跡機能を実装できる面白そうなものを見つけたので試してみました。

ただこの視線の追跡機能、私も試してみたのですがうまく精度が出なかったので途中で断念しました。。

なので顔認識させるところまでのやり方を書いておきます。

手順

まずこちらのURLから、webgazer.jsファイルをダウンロードします。

適当なエディタを開いてプロジェクトを作成し、index.htmlファイルを作成します。
先ほどダウンロードしたwebgazer.jsファイルも同じプロジェクト内に入れておきます。

head内でscriptタグを使ってwebgazer.jsを読み込みます。

<script src="webgazer.js" type="text/javascript"></script>

あとはbody内にscriptダグで下記コードを追加します。

<script>
  webgazer.setGazeListener(function (data, elapsedTime) {
    if (data == null) {
      return;
    }
    var xprediction = data.x;
    var yprediction = data.y;
    console.log(elapsedTime);
  }).begin();
</script>

もうこれだけでいけます。

ブラウザからサーバにアクセスするとカメラの使用許可を求められるので、許可を選択します。

するとこんな感じで顔認識してくれます。

Animated GIF-downsized_large (1).gif

ここからさらに視線追跡機能も試してみて、
動くには動いたのですが、私の環境だといまいち精度が出なかったので断念しました。。

興味ある方は是非試してみてください。

実装方法などについてはこちらをご参照ください。