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

<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>