File "detection03.html"

Full Path: /home/analogde/www/New/update/detection03.html
File size: 5.14 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!doctype html>
<head>
	<title>motion detection</title>

	

</head>
<body>
	<video autoplay id="vid"></video>
<canvas id="canvas" width="640" height="480" style="border:1px solid #d3d3d3;"></canvas><br>


<script type="text/javascript">

    var video = document.querySelector("#vid");
    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext('2d');
    var localMediaStream = null;
    //
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var prevImageData = ctx.getImageData(0,0,canvas.width,canvas.height);
    //
    //
    var onCameraFail = function (e) {
        console.log('Camera did not work.', e);
    };

    function transformGrab() {
        //
        console.log("transform grab");
        //
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        //
        var input = document.querySelector('#setPixelSize');
        var p = parseFloat(input.value);
        console.log("p = " + p);
        pixellate(p);
    }

    function pixellate(size) {
        var x, y;
        for(x = 0; x < canvas.width; x += size) {
            for(y = 0; y < canvas.height; y += size) {
                //console.log("tick", y * canvas.width + x)
                ctx.fillStyle = getPixel(imageData, x, y);
                ctx.fillRect(x, y, size, size);
            }
        }
    }
     
    function getPixel(imageData, x, y) {
        var r, g, b, a, offset = x * 4 + y * 4 * imageData.width;
        r = imageData.data[offset];
        g = imageData.data[offset + 1];
        b = imageData.data[offset + 2];
        a = imageData.data[offset + 3];
        return "rgba(" + r + "," + g + "," + b + "," + a + ")";
    }

    function getPixel2(imageData, prevImageData, x, y) {
        //
        var cr, cg, cb, ca, pr, pg, pb, pa, offset = x * 4 + y * 4 * imageData.width;
        cr = imageData.data[offset];
        cg = imageData.data[offset + 1];
        cb = imageData.data[offset + 2];
        ca = imageData.data[offset + 3];
        //
        pr = prevImageData.data[offset];
        pg = prevImageData.data[offset + 1];
        pb = prevImageData.data[offset + 2];
        pa = prevImageData.data[offset + 3];
        //
        var diff = Math.abs(pr-cr) + Math.abs(pg-cg) + Math.abs(pb-cb);
        var str = new Object();
        if(diff > 20) {
            //str = "rgba(" + 255 + "," + 0 + "," + 0 + "," + 255 + ")";
            str.r = cr;
            str.g = cg;
            str.b = cb;
            str.a = 255;
        } else {
            //str = "rgba(" + 255 + "," + 255 + "," + 255 + "," + 255 + ")";
            str.r = 555;
            str.g = 555;
            str.b = 555;
            str.a = 255;
        }
        str.d = diff;
        //
        return str;
        //return "rgba(" + (255-(cr-pr)) + "," + (255-(cg-pg)) + "," + (255-(cb-pb)) + "," + 255 + ")";
    }

    function motionDetect() {
        //
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        //
        var size = 5;
        var startPoint = (Math.PI/180)*0;
        var endPoint = (Math.PI/180)*360;
        //
        ctx.clearRect(0,0,canvas.width, canvas.height);
        //
        var x, y;
        for(x = 0; x < canvas.width; x += size) {
            for(y = 0; y < canvas.height; y += size) {
                //
               //var obj1 = getPixel2(imageData, prevImageData, x, y);
               var cob = getPixel2(imageData, prevImageData, x, y);
               //console.log(cob.g);
               if(cob.g < 555) {
                    ctx.fillStyle = "rgba(" + cob.r + "," + cob.g + "," + cob.b + "," + 255 + ")";
                    //ctx.fillRect(x, y, size, size);
                    ctx.beginPath();
                    ctx.arc(x,y,cob.d/10, startPoint, endPoint,true);
                    ctx.fill();
                    ctx.closePath();
                } else {
                    //ctx.fillStyle = "rgba(" + cob.r + "," + cob.g + "," + cob.b + "," + 255 + ")";
                    //ctx.fillRect(x, y, size, size);
                }

               //console.log("obj", obj1.r);
            }
        }
        // update previous frame image data
        prevImageData = imageData;
    }

   function drawVideoAtCanvas(obj, context) {
        window.setInterval(function() { 
            // draw video image to canvas
            context.drawImage(obj, 0, 0);
            // update pixel data
            //imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            // pixellate
            //var input = document.querySelector('#setPixelSize');
            //var p = parseFloat(input.value);
            //pixellate(p);
            //
            motionDetect();
            //
        }, 60);
        //
        
    }


    video.addEventListener('play', function() { drawVideoAtCanvas(video, ctx) }, false);


    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia({video:true}, function (stream) {
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
    }, onCameraFail);

</script>
</body>

</html>