来看看机智的前端童鞋怎么防盗

于是我们再建多一个画布来展示前后两帧差异：

<video width="640" height="480" autoplay></video>
<canvas width="640" height="480"></canvas>
<canvas width="640" height="480"></canvas>

<script>
    var video = document.querySelector('video');
    var canvas = document.querySelectorAll('canvas')[0];
    var canvasForDiff = document.querySelectorAll('canvas')[1];

    // video捕获摄像头画面
    navigator.webkitGetUserMedia({
                video: true
            }, success, error);

    function success(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();
    }

    function error(err) {
        alert('video error: ' + err)
    }

    //canvas
    var context = canvas.getContext('2d'),
        diffCtx = canvasForDiff.getContext('2d');
    //将第二个画布混合模式设为“差异”
    diffCtx.globalCompositeOperation = 'difference';

    var preFrame,   //前一帧
        curFrame;   //当前帧

    //捕获并保存帧内容
    function captureAndSaveFrame(){
        preFrame = curFrame;
        context.drawImage(video, 0, 0, 640, 480);
        curFrame = canvas.toDataURL();  //转为base64并保存
    }

    //绘制base64图像到画布上
    function drawImg(src, ctx){
        ctx = ctx || diffCtx;
        var img = new Image();
        img.src = src;
        ctx.drawImage(img, 0, 0, 640, 480);
    }

    //渲染前后两帧差异
    function renderDiff(){
        if(!preFrame || !curFrame) return; 
        diffCtx.clearRect(0, 0, 640, 480);
        drawImg(preFrame);
        drawImg(curFrame);
    }

    //定时捕获
    function timer(delta){
        setTimeout(function(){
            captureAndSaveFrame();
            renderDiff();
            timer(delta)
        }, delta || 500);
    }

    timer();

</script>

效果如下（夭寿啊，做完这个动作我又把雪碧洒在键盘上了。。。(＃－－)/ ）：

可以看到，当前后两帧差异不大时，第三个画布几乎是黑乎乎的一片，只有当摄像头捕获到动作了，第三个画布才有明显的高亮内容出现。

因此，我们只需要对第三个画布渲染后的图像进行像素分析——判断其高亮阈值是否达到某个指定预期：

    var context = canvas.getContext('2d'),
        diffCtx = canvasForDiff.getContext('2d');
    //将第二个画布混合模式设为“差异”
    diffCtx.globalCompositeOperation = 'difference';

    var preFrame,   //前一帧
        curFrame;   //当前帧

    var diffFrame;  //存放差异帧的imageData

    //捕获并保存帧内容
    function captureAndSaveFrame(){
        preFrame = curFrame;
        context.drawImage(video, 0, 0, 640, 480);
        curFrame = canvas.toDataURL();  //转为base64并保存
    }

    //绘制base64图像到画布上
    function drawImg(src, ctx){
        ctx = ctx || diffCtx;
        var img = new Image();
        img.src = src;
        ctx.drawImage(img, 0, 0, 640, 480);
    }

    //渲染前后两帧差异
    function renderDiff(){
        if(!preFrame || !curFrame) return;
        diffCtx.clearRect(0, 0, 640, 480);
        drawImg(preFrame);
        drawImg(curFrame);
        diffFrame = diffCtx.getImageData( 0, 0, 640, 480 );  //捕获差异帧的imageData对象
    }

    //计算差异
    function calcDiff(){
        if(!diffFrame) return 0;
        var cache = arguments.callee,
            count = 0;
        cache.total = cache.total || 0; //整个画布都是白色时所有像素的值的总和
        for (var i = 0, l = diffFrame.width * diffFrame.height * 4; i < l; i += 4) {
            count += diffFrame.data[i] + diffFrame.data[i + 1] + diffFrame.data[i + 2];
            if(!cache.isLoopEver){  //只需在第一次循环里执行
                cache.total += 255 * 3;   //单个白色像素值
            }
        }
        cache.isLoopEver = true;
        count *= 3;  //亮度放大
        //返回“差异画布高亮部分像素总值”占“画布全亮情况像素总值”的比例
        return Number(count/cache.total).toFixed(2);
    }

    //定时捕获
    function timer(delta){
        setTimeout(function(){
            captureAndSaveFrame();
            renderDiff();
            setTimeout(function(){
                console.log(calcDiff());
            }, 10);

            timer(delta)
        }, delta || 500);
    }

    timer();

注意这里我们使用了 count *= 3 来放大差异高亮像素的亮度值，不然得出的数值实在太小了。我们运行下页面（图片较大加载会有点慢）：

经过试（xia）验（bai），个人觉得如果 calcDiff() 返回的比值如果大于 0.20，那么就可以定性为“一间空屋子，突然有人闯进来”的情况了。

step4. 上报异常图片

当上述的计算发现有状况时，需要有某种途径通知我们。有钱有精力的话可以部署个邮件服务器，直接发邮件甚至短信通知到自己，but 本文走的吃吐少年路线，就不搞的那么高端了。

那么要如何简单地实现异常图片的上报呢？我暂且想到的是 —— 直接把问题图片发送到某个站点中去。

（编辑：淮北站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!