JS Webcam Motion Detection Night Vision SRC V13 Coded By BrU


<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2020 by anonymous (http://jsbin.com/bajamohibi/1/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<meta name="robots" content="noindex">
<body>
<font color="white">
      <center>
		<figure>
			<video id="video" hidden></video>
		</figure>

		<figure>
			<canvas id="motion"></canvas>
			<figcaption>

			<br>
				 <span id="score"></span><p>
                 <button id="reset" onclick="script:ammount=0;majamm=0;large=0;vlarge=0;extreme=0;max=0;max1=0;">Reset All</button>
                  <button id="stats" onclick="script:if(majamm!=0){majamm--;}
                                              alert('Minor Movement: '+ammount);alert('Major Movement: '+majamm);alert('Large Movement: '+large);alert('Very Large Movement: '+vlarge);alert('Extreme Movement: '+extreme);alert('Extremely Large Movement: '+max);alert('Maximum Movement: '+max1);">View Movement Statistics</button>

			</figcaption>
		</figure><p>


<script>
var DiffCamEngine = (function() {
	var stream;					// stream obtained from webcam
	var video;					// shows stream
	var captureCanvas;			// internal canvas for capturing full images from video
	var captureContext;			// context for capture canvas
	var diffCanvas;				// internal canvas for diffing downscaled captures
	var diffContext;			// context for diff canvas
	var motionCanvas;			// receives processed diff images
	var motionContext;			// context for motion canvas

	var initSuccessCallback;	// called when init succeeds
	var initErrorCallback;		// called when init fails
	var startCompleteCallback;	// called when start is complete
	var captureCallback;		// called when an image has been captured and diffed

	var captureInterval;		// interval for continuous captures
	var captureIntervalTime;	// time between captures, in ms
	var captureWidth;			// full captured image width
	var captureHeight;			// full captured image height
	var diffWidth;				// downscaled width for diff/motion
	var diffHeight;				// downscaled height for diff/motion
	var isReadyToDiff;			// has a previous capture been made to diff against?
	var pixelDiffThreshold;		// min for a pixel to be considered significant
	var scoreThreshold;			// min for an image to be considered significant
	var includeMotionBox;		// flag to calculate and draw motion bounding box
	var includeMotionPixels;	// flag to create object denoting pixels with motion

	function init(options) {

		// sanity check
		if (!options) {
			throw 'No options object provided';
		}

		// incoming options with defaults
		video = options.video || document.createElement('video');
		motionCanvas = options.motionCanvas || document.createElement('canvas');
		captureIntervalTime = options.captureIntervalTime || 100;
		captureWidth = options.captureWidth || 850;
		captureHeight = options.captureHeight || 450;
		diffWidth = options.diffWidth || 850;
		diffHeight = options.diffHeight || 450;
		pixelDiffThreshold = options.pixelDiffThreshold || 32;
		scoreThreshold = options.scoreThreshold || 16;
		includeMotionBox = options.includeMotionBox || false;
		includeMotionPixels = options.includeMotionPixels || false;

		// callbacks
		initSuccessCallback = options.initSuccessCallback || function() {};
		initErrorCallback = options.initErrorCallback || function() {};
		startCompleteCallback = options.startCompleteCallback || function() {};
		captureCallback = options.captureCallback || function() {};

		// non-configurable
		captureCanvas = document.createElement('canvas');
		diffCanvas = document.createElement('canvas');
      var img=document.getElementById('img')
		isReadyToDiff = false;

		// prep video
		video.autoplay = true;

		// prep capture canvas
		captureCanvas.width = captureWidth;
		captureCanvas.height = captureHeight;
		captureContext = captureCanvas.getContext('2d');

		// prep diff canvas
		diffCanvas.width = diffWidth;
		diffCanvas.height = diffHeight;
		diffContext = diffCanvas.getContext('2d');

		// prep motion canvas
		motionCanvas.width = diffWidth;
		motionCanvas.height = diffHeight;
		motionContext = motionCanvas.getContext('2d');

		requestWebcam();
	}

	function requestWebcam() {
		var constraints = {
			audio: false,
			video: { width: captureWidth, height: captureHeight }
		};

		navigator.mediaDevices.getUserMedia(constraints)
			.then(initSuccess)
			.catch(initError);
	}

	function initSuccess(requestedStream) {
		stream = requestedStream;
		initSuccessCallback();
	}

	function initError(error) {
		console.log(error);
		initErrorCallback();
	}

	function start() {
		if (!stream) {
			throw 'Cannot start after init fail';
		}

		// streaming takes a moment to start
		video.addEventListener('canplay', startComplete);
		video.srcObject = stream;
	}

	function startComplete() {
		video.removeEventListener('canplay', startComplete);
		captureInterval = setInterval(capture, captureIntervalTime);
		startCompleteCallback();
	}

	function stop() {
		clearInterval(captureInterval);
		video.src = '';
		motionContext.clearRect(0, 0, diffWidth, diffHeight);
		isReadyToDiff = false;
	}

	function capture() {
		// save a full-sized copy of capture
		captureContext.drawImage(video, 0, 0, captureWidth, captureHeight);
		var captureImageData = captureContext.getImageData(0, 0, captureWidth, captureHeight);

		// diff current capture over previous capture, leftover from last time
		diffContext.globalCompositeOperation = 'difference';
		diffContext.drawImage(video, 0, 0, diffWidth, diffHeight);
		var diffImageData = diffContext.getImageData(0, 0, diffWidth, diffHeight);

		if (isReadyToDiff) {
			var diff = processDiff(diffImageData);

			motionContext.putImageData(diffImageData, 0, 0);
			if (diff.motionBox) {
				motionContext.strokeStyle = '#fff';
				motionContext.strokeRect(
					diff.motionBox.x.min + 0.5,
					diff.motionBox.y.min + 0.5,
					diff.motionBox.x.max - diff.motionBox.x.min,
					diff.motionBox.y.max - diff.motionBox.y.min
				);
			}
			captureCallback({
				imageData: captureImageData,
				score: diff.score,
				hasMotion: diff.score >= scoreThreshold,
				motionBox: diff.motionBox,
				motionPixels: diff.motionPixels,
				getURL: function() {
					return getCaptureUrl(this.imageData);
				},
				checkMotionPixel: function(x, y) {
					return checkMotionPixel(this.motionPixels, x, y)
				}
			});
		}

		// draw current capture normally over diff, ready for next time
		diffContext.globalCompositeOperation = 'source-over';
		diffContext.drawImage(video, 0, 0, diffWidth, diffHeight);
		isReadyToDiff = true;
	}

	function processDiff(diffImageData) {
		var rgba = diffImageData.data;

		// pixel adjustments are done by reference directly on diffImageData
		var score = 0;
		var motionPixels = includeMotionPixels ? [] : undefined;
		var motionBox = undefined;
		for (var i = 0; i < rgba.length; i += 4) {
			var pixelDiff = rgba[i] * 0.3 + rgba[i + 1] * 0.6 + rgba[i + 2] * 0.1;
			var normalized = Math.min(255, pixelDiff * (255 / pixelDiffThreshold));
			rgba[i] = normalized;
			rgba[i + 1] = normalized^255;
			rgba[i + 2] = 0;

			if (pixelDiff >= pixelDiffThreshold) {
				score++;
				coords = calculateCoordinates(i / 4);

				if (includeMotionBox) {
					motionBox = calculateMotionBox(motionBox, coords.x, coords.y);
				}

				if (includeMotionPixels) {
					motionPixels = calculateMotionPixels(motionPixels, coords.x, coords.y, pixelDiff);
				}

			}
		}

		return {
			score: score,
			motionBox: score > scoreThreshold ? motionBox : undefined,
			motionPixels: motionPixels
		};
	}

	function calculateCoordinates(pixelIndex) {
		return {
			x: pixelIndex % diffWidth,
			y: Math.floor(pixelIndex / diffWidth)
		};
	}

	function calculateMotionBox(currentMotionBox, x, y) {
		// init motion box on demand
		var motionBox = currentMotionBox || {
			x: { min: coords.x, max: x },
			y: { min: coords.y, max: y }
		};

		motionBox.x.min = Math.min(motionBox.x.min, x);
		motionBox.x.max = Math.max(motionBox.x.max, x);
		motionBox.y.min = Math.min(motionBox.y.min, y);
		motionBox.y.max = Math.max(motionBox.y.max, y);

		return motionBox;
	}

	function calculateMotionPixels(motionPixels, x, y, pixelDiff) {
		motionPixels[x] = motionPixels[x] || [];
		motionPixels[x][y] = true;

		return motionPixels;
	}

	function getCaptureUrl(captureImageData) {
		// may as well borrow captureCanvas
		captureContext.putImageData(captureImageData, 0, 0);
		return captureCanvas.toDataURL();
	}

	function checkMotionPixel(motionPixels, x, y) {
		return motionPixels && motionPixels[x] && motionPixels[x][y];
	}

	function getPixelDiffThreshold() {
		return pixelDiffThreshold;
	}

	function setPixelDiffThreshold(val) {
		pixelDiffThreshold = val;
	}

	function getScoreThreshold() {
		return scoreThreshold;
	}

	function setScoreThreshold(val) {
		scoreThreshold = val;
	}

	return {
		// public getters/setters
		getPixelDiffThreshold: getPixelDiffThreshold,
		setPixelDiffThreshold: setPixelDiffThreshold,
		getScoreThreshold: getScoreThreshold,
		setScoreThreshold: setScoreThreshold,

		// public functions
		init: init,
		start: start,
		stop: stop
	};
})();
        var video = document.getElementById('video');
var canvas = document.getElementById('motion');
var score = document.getElementById('score');
var photo = document.getElementById('motion');

function initSuccess() {
	DiffCamEngine.start();
}

function initError() {
	alert('Something went wrong.');
}
var ammount=0;
  var majamm=0;
  var large=0;
  var vlarge=0;
  var extreme=0;
  var max=0;
  var max1=0;
function capture(payload) {
 var p= photo.getContext('2d')
	//score.textContent = payload.score;
 oscillator.stop(0);
                           if(payload.score>380000){
                                     //alert(payload.score);
var Message = new SpeechSynthesisUtterance("The Maximum Amount Of Movement Has Been Detected!!");
var Voices = window.speechSynthesis.getVoices();
Message.Voice = Voices[1];
window.speechSynthesis.speak(Message);
                                     max1++;
      //alert(payload.score);
      //alert('Super SUPER Large Amount Of Movement Detected!!');
                       //majamm++;

//photo.setAttribute('src',canvas.toDataUrl('image/png'));

                        //window.open(captureImageData.ToDataURL());
                        return;
                       // p.putImage(captureImageData, 100, 100, 200, 200);
                       }
                                   if(payload.score>370000){
                                     //alert(payload.score);
var Message = new SpeechSynthesisUtterance("An Extremely Extremely Large Amount Of Movement Has Been Detected!!");
var Voices = window.speechSynthesis.getVoices();
Message.Voice = Voices[1];
window.speechSynthesis.speak(Message);
                                     max++;
      //alert(payload.score);
      //alert('Super SUPER Large Amount Of Movement Detected!!');
                       //majamm++;

//photo.setAttribute('src',canvas.toDataUrl('image/png'));

                        //window.open(captureImageData.ToDataURL());
                        return;
                       // p.putImage(captureImageData, 100, 100, 200, 200);
                       }

                                   if(payload.score>210000){
                                     //alert(payload.score);
var Message = new SpeechSynthesisUtterance("An Extremely Large Amount Of Movement Has Been Detected!!");
var Voices = window.speechSynthesis.getVoices();
Message.Voice = Voices[1];
window.speechSynthesis.speak(Message);
                                     extreme++;
      //alert(payload.score);
      //alert('Super SUPER Large Amount Of Movement Detected!!');
                       //majamm++;

//photo.setAttribute('src',canvas.toDataUrl('image/png'));

                        //window.open(captureImageData.ToDataURL());
                        return;
                       // p.putImage(captureImageData, 100, 100, 200, 200);
                       }
                                 if(payload.score>130000){
var Message = new SpeechSynthesisUtterance("A Very Large Amount Of Movement Has Been Detected!!");
var Voices = window.speechSynthesis.getVoices();
Message.Voice = Voices[1];
window.speechSynthesis.speak(Message);
                                   vlarge++;
      //alert(payload.score);
      //alert('Super SUPER Large Amount Of Movement Detected!!');
                       //majamm++;

//photo.setAttribute('src',canvas.toDataUrl('image/png'));

                        //window.open(captureImageData.ToDataURL());
                        return;
                       // p.putImage(captureImageData, 100, 100, 200, 200);
                       }
    if(payload.score>100000){
var Message = new SpeechSynthesisUtterance("A Large Amount Of Movement Has Been Detected!!");
var Voices = window.speechSynthesis.getVoices();
Message.Voice = Voices[1];
window.speechSynthesis.speak(Message);
      large++
      //alert(payload.score);
      //alert('Super Large Amount Of Movement Detected!!');
                       //majamm++;

//photo.setAttribute('src',canvas.toDataUrl('image/png'));

                        //window.open(captureImageData.ToDataURL());
                        return;
                       // p.putImage(captureImageData, 100, 100, 200, 200);
                       }
                   if(payload.score>115){score.textContent =('A Normal Amount Of Movement Has Been Detected '+majamm +' times!!')
                       majamm++;

//photo.setAttribute('src',canvas.toDataUrl('image/png'));

                        //window.open(captureImageData.ToDataURL());
                 //       return;
                       // p.putImage(captureImageData, 100, 100, 200, 200);
                       }
  if(payload.score<35){}else{
    //p.putImage(captureImageData, 100, 100, 200, 200);
    console.log('Minor Movement Detected '+ammount+' times!!')
    ammount++;
    return;
  }
}

DiffCamEngine.init({
	video: video,
	motionCanvas: canvas,
	initSuccessCallback: initSuccess,
	initErrorCallback: initError,
	captureCallback: capture
});
          var context = new AudioContext();
oscillator=context.createOscillator();
          </script>

          <center>
<body bgcolor="black">
<font color="white">
<canvas id="canvas" width="850" height="450"></canvas>
<script>
var canvas = document.getElementById("motion");
var ctx = canvas.getContext("2d");
var width=120
ctx.fillStyle = "white";
ctx.fillRect(0,0,120,1000);
ctx.fillStyle = "blue";
ctx.fillRect(0,400,120,100);
ctx.fillStyle = "yellow";
ctx.fillRect(width,0,120,1000);
ctx.fillStyle = "magenta";
ctx.fillRect(width,400,120,100);
ctx.fillStyle = "cyan";
ctx.fillRect(width*2,0,120,1000);
ctx.fillStyle = "yellow";
ctx.fillRect(width*2,400,120,100);
ctx.fillStyle = "#0FFF00";
ctx.fillRect(width*3,0,120,1000);
ctx.fillStyle = "red";
ctx.fillRect(width*3,400,120,100);
ctx.fillStyle = "magenta";
ctx.fillRect(width*4,0,120,1000);
ctx.fillStyle = "cyan";
ctx.fillRect(width*4,400,120,100);
ctx.fillStyle = "red";
ctx.fillRect(width*5,0,120,1000);
ctx.fillStyle = "#0FFF00";
ctx.fillRect(width*5,400,120,100);
ctx.fillStyle = "blue";
ctx.fillRect(width*6,0,120,1000);
ctx.fillStyle = "white";
ctx.fillRect(width*6,400,120,100);

oscillator.type = 'sine';
oscillator.frequency.value = 1000;
oscillator.connect(context.destination);
oscillator.start(0);
</script>