幀繪玩=>使用video與canvas玩耍的偽“人體感應(yīng)”

qqlcbb 發(fā)布于2019-06-21 16:14 / 2449人閱讀

摘要：寫在前面感謝各位在前端一直努力奮斗的程序猿們，希望以后的會(huì)更美好。寫后呆成魔寫的跟流水賬樣的。最后希望寶強(qiáng)能夠好起來(lái)。

寫在前面

感謝各位在前端一直努力奮斗的程序猿們，希望以后的HelloWorld會(huì)更美好。

感謝來(lái)看看機(jī)智的前端童鞋怎么防盜作者的分享

感謝停了一天的網(wǎng)終于恢復(fù)

干貨

先來(lái)分享2張圖
1）王的憤怒

2) 程序猿的憤怒

原理

通過(guò)啟用瀏覽器攝像的方式，把每一幀的圖映射到canvas上，通過(guò)比較上一幀與當(dāng)前幀的差異，算出來(lái)的差異占的百分比，超過(guò)某個(gè)百分比就觸發(fā)函數(shù)。

栗子：我搖動(dòng)我的雙手，兩個(gè)幀的手的位置不一樣，從而差異占的比例就挺大的，就觸發(fā)了寫好的回調(diào)函數(shù){

給水杯添加一個(gè)動(dòng)畫
給body更換一個(gè)背景顏色

}
程序猿的憤怒是通過(guò)在來(lái)看看機(jī)智的前端童鞋怎么防盜借鑒的代碼實(shí)現(xiàn)的，
原作者項(xiàng)目GitHub地址

同時(shí)，在不破壞原作者源碼的基礎(chǔ)下，憤怒的程序猿代碼如下：



    
        
        憤怒的程序猿
        
        
    
    
        
            
            水杯    
            您可以嘗試敲打桌面
        
        
        
            
            每幀截取
        
        
        
            
            上一幀與這一幀的對(duì)比差異
        
        
        
            
            檢測(cè)到動(dòng)了一定幅度的截圖

Q：在谷歌瀏覽器上運(yùn)行的，表示頁(yè)面一片空白，啥都沒(méi)有，請(qǐng)問(wèn)這是為什么？

A：通過(guò)谷歌的文檔可以得知，這是為了安全性考慮，非 HTTPS 的服務(wù)端請(qǐng)求都不能接入攝像頭，簡(jiǎn)單來(lái)說(shuō)，chrome通過(guò)文件的方式打開一個(gè)html文件，是無(wú)法開啟攝像頭的，可以在本地服務(wù)端打開哦！如：localhost

還要注意寫兼容哦！樓主只寫了chrome的

嗨起來(lái)

程序猿們?cè)趺纯赡芫偷刂共剑屛覀冞\(yùn)用代碼，自己來(lái)寫一個(gè)自動(dòng)拍照吧！

AV.html

AV.js

(function() {
    var av = function(option) {
        
        option = option || {};
        this.op = (function(o) {
            for(var i in option) {
                o[i] = option[i];
            }
            return o;
        }({
            style: {
                width: 320,//視頻 畫布 寬
                height: 240//高
            },
            deg: 0.12,//靈敏度 觸發(fā)動(dòng)作幅度
            die: 500,//dwon機(jī)時(shí)間，觸發(fā)事件后500ms內(nèi)不觸發(fā)
            delta:300,//取幀間隔 300ms 獲取一次視頻幀
            sw:true//開關(guān)，默認(rèn)為開
        }));
        this.initEm();
        this.initMedia();
        this.initCanvas();
        this.switchAV();
    }
    var avpro = av.prototype;

    //初始化基礎(chǔ)元素
    avpro.initEm = function() {
        //video元素
        this.video = document.querySelector(this.op.el || "video");
        this.video.setAttribute("autoplay", "");
        this.video.style.objectFit = "fill";
        //初始化canvas元素
        var canvas = document.createElement("canvas");
        canvas.style.display = "none";
        canvas.style.backgroundColor = this.video.style.backgroundColor = "grey";
        canvas.style.width = this.video.style.width = (this.w = canvas.width = this.op.style.width) + "px";
        canvas.style.height = this.video.style.height = (this.h = canvas.height = this.op.style.height) + "px";
        
        //動(dòng)作畫布克隆，映射視頻  ac 動(dòng)作Action 便于記憶
        var acCanvas = canvas.cloneNode(true);
        //對(duì)比畫布克隆，比較差異 bw 表示黑白 便于記憶 
        var bwCanvas = canvas.cloneNode(true);
        //清除原體釋放資源
        canvas = null;
        //添加至頁(yè)面
        document.body.appendChild(acCanvas);
        document.body.appendChild(bwCanvas);
        
        this.canvas = acCanvas;
        this.acCanvas = acCanvas.getContext("2d");
        this.bwCanvas = bwCanvas.getContext("2d");
    }

    //初始化攝像頭
    avpro.initMedia = function() {
        var tv = this.video;
        navigator.getUserMedia || navigator.webkitGetUserMedia //ie chrome
            ({
                video: true
            }, function(se) {
                tv.src = window.URL.createObjectURL(se);
                tv.play();
            }, function(err) {
                console.log("err:" + err);
            });
    }

    //初始化畫布,幀數(shù)
    avpro.initCanvas = function() {
        //將第二個(gè)畫布混合模式設(shè)為“差異”
        this.bwCanvas.globalCompositeOperation = "difference";
        //   前一幀                          當(dāng)前幀                         差異幀
        this.preFrame = this.curFrame = this.diffFrame = null;
    }

    //開始AV
    avpro.startAv = function() {
        var tv = this;
        var call = arguments.callee;
        tv.zt = setTimeout(function() {
            tv.avSaveFrame();
            tv.renderDiff();
            setTimeout(function() {
                if(tv.calcDiff() >= tv.op.deg) {
                    //觸發(fā)事件
                    tv.handel();
                }
            }, 16.7);
            call.call(tv);
        },tv.op.delta);

    }
    
    //設(shè)置開關(guān) 和 回調(diào)函數(shù)
    avpro.switchAV = function(sw,fn){
        if(sw == undefined ? this.op.sw:sw){
            this.startAv();
        }else{
            this.stopAv();
        }
        fn && (this.op.fn = fn);
    }
    
    avpro.stopAv = function(){
        this.zt && clearTimeout(this.zt);
    }
    
    //觸發(fā)事件
    avpro.handel = function() {
        var tv = this;
        if(tv.t) {
            return;
        }
        console.log(tv.fn);
        tv.op.fn && tv.fn(tv.curFrame);
        tv.t = setTimeout(function() {
            tv.t = null;
        },tv.op.die);
        
    }
    
    avpro.getCurFrame = function(){
        return this.curFrame;
    }

    //捕獲并保存幀
    avpro.avSaveFrame = function() {
        //幀替換
        this.preFrame = this.curFrame;
        this.acCanvas.drawImage(this.video, 0, 0, this.w, this.h);
        //轉(zhuǎn)為base64并保存當(dāng)前幀
        this.curFrame = this.canvas.toDataURL();
    }

    //繪制base64圖像到畫布上
    avpro.drawImg = function(src, ctx) {
        ctx = ctx || this.bwCanvas;
        var img = new Image();
        img.src = src;
        ctx.drawImage(img, 0, 0 ,this.w, this.h);
        
    }

    //渲染前后兩幀差異
    avpro.renderDiff = function() {
        if(!this.preFrame || !this.curFrame) return;
        this.bwCanvas.clearRect(0, 0, this.w, this.h);
        this.drawImg(this.preFrame);
        this.drawImg(this.curFrame);
        //捕獲差異幀的imageData對(duì)象
        this.diffFrame = this.bwCanvas.getImageData(0, 0, this.w, this.h);
    }

    //計(jì)算差異
    avpro.calcDiff = function() {
        if(!this.diffFrame) return 0;
        var cache = arguments.callee,
            count = 0;
        cache.total = cache.total || 0; //整個(gè)畫布都是白色時(shí)所有像素的值的總和
        for(var i = 0, l = this.diffFrame.width * this.diffFrame.height * 4; i < l; i += 4) {
            count += this.diffFrame.data[i] + this.diffFrame.data[i + 1] + this.diffFrame.data[i + 2];
            if(!cache.isLoopEver) { //只需在第一次循環(huán)里執(zhí)行
                cache.total += 255 * 3; //單個(gè)白色像素值
            }
        }
        cache.isLoopEver = true;
        count *= 3; //亮度放大
        //返回“差異畫布高亮部分像素總值”占“畫布全亮情況像素總值”的比例
        return Number(count / cache.total).toFixed(2);
    }

    var nav = null;
    window.Av = function(op) {
        return nav || (nav = new av(op));
    };

}())

遺言

寫前圣成佛：感覺(jué)自己馬上要寫出一篇無(wú)與倫比的文章。
寫后呆成魔：寫的跟流水賬樣的。

最后希望寶強(qiáng)能夠好起來(lái)。