顔検出のJavaScriptライブラリ、pico.js【今日のGitHubトレンド】

はじめに

PWAやWebVRやWebARなど、最近はブラウザ上でもアプリと遜色ない体験ができるようになってきました。
今回ご紹介するのは、PCやスマホのカメラを使用し、顔をリアルタイムで検出してくれるJavaScriptのライブラリ、pico.jsです。
こんな形で、カメラを起動すると円で顔をリアルタイムで検出し追い続けてくれます。

pico.jsの使い方

pico.jsを実際に使ってみましょう。

では、まずリポジトリをcloneします。
git clone git@github.com:tehnokv/picojs.git

pico.jsの中身ですが、実はこんな高度をしていますが200行ほどのJavaScriptで構成されています。
pico.jsの中身

cam/index.html の中身を見ていきましょう。

var cascadeurl = 'https://raw.githubusercontent.com/nenadmarkus/pico/c2e81f9d23cc11d1a612fd21e4f9de0921a5d0d9/rnt/cascades/facefinder';
            fetch(cascadeurl).then(function(response) {
                response.arrayBuffer().then(function(buffer) {
                    var bytes = new Int8Array(buffer);
                    facefinder_classify_region = pico.unpack_cascade(bytes);
                    console.log('* cascade loaded');
                })

ここでカスケードファイルを取得して展開しています。
カスケードファイルは、学習用の情報データと思ってください。
それをpico.js内のunpack_cascadeメソッドで展開しています。

そこからカメラから取得した情報をインプットとし、学習データから顔の範囲を算出し、canvasで円をその範囲で描いている、という仕組みです。

具体的にcanvasの円の部分を指定しているのはこちらです。
このパラメータをもとにビデオの画像にcanvas.jsでかぶせています。

ctx.beginPath();
ctx.arc(dets[i][1], dets[i][0], dets[i][2]/2, 0, 2*Math.PI, false);
ctx.lineWidth = 3;
ctx.strokeStyle = 'red';
ctx.stroke();

例えば ctx.strokeStyle = 'blue'; としてみましょう。

するとこのように青の円になりますね。

まとめ

pico.jsを使用することで、気軽にWeb上に顔認識の仕組みを実装することができます。
今回はカメラの映像をリアルタイムで検出する形でしたが、任意の画像や映像をそのリソースとすることもできます。

例えばWeb上で特定の写真に何人がいるかを検出するシステムを作ったり、動画からリアルタイムで人がどこにいるかわかるシステムを作るなど、様々な使い方が考えられます。
pico.jsのデモはこちらにあるので、ぜひ試してみてください！