new

VaJoy · Jul 10, 2016 · d588c54 · d588c54
1 parent f097b9e
commit d588c54
Show file tree

Hide file tree

Showing 8 changed files with 444 additions and 0 deletions.
diff --git a/alarm.wav b/alarm.wav
diff --git a/final.html b/final.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>监控系统</title>
+    <script src="lib/jq.js"></script>
+</head>
+<body>
+<video width="640" height="480" autoplay></video>
+<canvas width="640" height="480"></canvas>
+<canvas width="640" height="480"></canvas>
+
+<audio src="alarm.wav"></audio>
+<script>
+    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)
+            }
+        });
+    }
+
+</script>
+</body>
+</html>
diff --git a/lib/jq.js b/lib/jq.js
diff --git a/step1.html b/step1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>监控系统</title>
+</head>
+<body>
+<video width="640" height="480" autoplay></video>
+
+<script>
+    var video = document.querySelector('video');
+
+    navigator.webkitGetUserMedia({
+                video: true
+            }, success, error);
+
+    function success(stream) {
+        video.src = window.webkitURL.createObjectURL(stream);
+        video.play();
+    }
+
+    function error(err) {
+        alert('video error: ' + err)
+    }
+</script>
+</body>
+</html>
diff --git a/step2.html b/step2.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>监控系统</title>
+</head>
+<body>
+<video width="640" height="480" autoplay></video>
+<canvas width="640" height="480"></canvas>
+
+<script>
+    var video = document.querySelector('video');
+    var canvas = document.querySelector('canvas');
+
+    // video捕获摄像头画面
+    navigator.webkitGetUserMedia({
+                video: true
+            }, success, error);
+
+    function success(stream) {
+        video.src = window.webkitURL.createObjectURL(stream);
+        video.play();
+    }
+
+    function error(err) {
+        alert('video error: ' + err)
+    }
+
+    //canvas
+    var context = canvas.getContext('2d');
+
+    setTimeout(function(){
+        //把当前视频帧内容渲染到画布上
+        context.drawImage(video, 0, 0, 640, 480);
+    }, 5000);
+
+</script>
+</body>
+</html>
diff --git a/step3.html b/step3.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>监控系统</title>
+</head>
+<body>
+<video width="640" height="480" autoplay></video>
+<canvas width="640" height="480"></canvas>
+
+<script>
+    var video = document.querySelector('video');
+    var canvas = document.querySelector('canvas');
+
+    // 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');
+    var preFrame,   //前一帧
+        curFrame;   //当前帧
+
+    //捕获并保存帧内容
+    function captureAndSaveFrame(){
+        preFrame = curFrame;
+        context.drawImage(video, 0, 0, 640, 480);
+        curFrame = canvas.toDataURL();  //转为base64并保存
+    }
+
+    //定时捕获
+    function timer(delta){
+        setTimeout(function(){
+            captureAndSaveFrame();
+            timer(delta)
+        }, delta || 500);
+    }
+
+    timer();
+
+</script>
+</body>
+</html>
diff --git a/step4.html b/step4.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>监控系统</title>
+</head>
+<body>
+<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; console.log(9);
+        diffCtx.clearRect(0, 0, 640, 480);
+        drawImg(preFrame);
+        drawImg(curFrame);
+    }
+
+    //定时捕获
+    function timer(delta){
+        setTimeout(function(){
+            captureAndSaveFrame();
+            renderDiff();
+            timer(delta)
+        }, delta || 500);
+    }
+
+    timer();
+
+</script>
+</body>
+</html>