ccv.jsを使ってWeb上でリアルタイムな笑い男をやってみた

2016-01-11

先程の記事でHTML5を使った音の解析をやったので、ついでに映像をやってみようかと思いまして。 pythonでやって好評だった笑い男をやってみました。

とりあえず、必要なライブラリを揃えておきます。といってもccv.jsだけで出来ます。必要なのはccv.jsとface.jsです。適当にダウンロードします。あと、当然ながら笑い男も用意します。

で、とりあえず実行例。

こんなもん。ちょっと、いやすごく重い。

で、ソースコード。

<script src="ccv.js"></script>
<script src="face.js"></script>

<canvas></canvas>

<script>
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

var video = document.createElement('video');
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');

var laughingman = new Image();
laughingman.src = 'laughing.png';

navigator.getUserMedia(
    {video: true},
    function(stream){
        video.src = URL.createObjectURL(stream);

        video.addEventListener('loadedmetadata', function(){
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;

            (function animation(){
                context.drawImage(video, 0, 0);

                ccv.detect_objects({
                    'canvas': ccv.pre(canvas),
                    'cascade': cascade,
                    'interval': 5,
                    'min_neighbors': 1
                }).forEach(function(x){
                    context.drawImage(laughingman, x.x, x.y, x.width, x.height);
                });

                requestAnimationFrame(animation);
            })();
        });
    },
    console.log
);
</script>

実にシンプルです。 getUserMediaで映像を取得して、準備が出来たらcanvasのサイズを設定。映像はcanvasに描画させて、そいつをccv.detect_objectsに渡すことで検出を行なっています。出来ればvideoタグで描画させたかったのだけれど、videoタグを渡して検出させる方法が分からなかったのでcanvasを利用。

face.jsの中に認識に使うデータが書かれていて、そいつがcascadeって変数に入るようです。なのでこいつを別のファイルに差し替えれば顔以外も検出出来るはず。

参考： WebRTC（２）ccv.jsと組み合わせて顔認識を実装〜笑い男〜 | potter0517