Tiny File Manager

Back Back Up Advanced Editor

<!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>

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 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>