xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

window.URL.createObjectURL

https://html5.xgqfrms.xyz/Canvas/safety-canvas.html

	    var video = document.querySelector('video');
	    var audio = document.querySelector('audio');
	    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;   //当前帧

	    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(){
	        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 fireAlarm(){
	        audio.play()
	    }


	    //定时捕获
	    function timer(delta){
	        setTimeout(function(){
	            captureAndSaveFrame();
	            if(preFrame && curFrame){
	                renderDiff();
	                if(calcDiff() > 0.2){  //监控到异常
	                    //发日记
	                    submit();
	                    //播放音频告警
	                    fireAlarm();
	                }
	            }
	            timer(delta)
	        }, delta || 500);
	    }

	    setTimeout(timer, 60000 * 10);  //设定打开页面十分钟后才开始监控


	    //异常图片上传处理
	    function submit(){
	        var cache = arguments.callee,
	            now = Date.now();
	        if(cache.reqTime && (now - cache.reqTime < 5000)) return;  //日记创建最小间隔为5秒

	        cache.reqTime = now;

	        //ajax 提交form
	        $.ajax({
	            url : 'http://i.cnblogs.com/EditDiary.aspx?opt=1',
	            type : "POST",
	            timeout : 5000,
	            data : {
	                '__VIEWSTATE': '',
	                '__VIEWSTATEGENERATOR': '4773056F',
	                'Editor$Edit$txbTitle': '告警' + Date.now(),
	                'Editor$Edit$EditorBody': '<img src="' + curFrame + '" />',
	                'Editor$Edit$lkbPost': '保存'
	            },
	            success: function(){
	                console.log('submit done')
	            },
	            error: function(err){
	                cache.reqTime = 0;
	                console.log('error: ' + err)
	            }
	        });
	    }
	

---

---