JS Best Night Vision Ever UPDATED FINAL By BrU


<!DOCTYPE html>
<html>

	<body>
		<div>
			<figure>
				<video id="stream" autoplay hidden></video>

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


		</div>


		<script>


(function() {
	var captureIntervalDelay = 10;
	var captureWidth = 500;
	var captureHeight = 500;
	var diffWidth = 500;
	var diffHeight = 500;
	var diffThreshold = 31;
	var diffSpan = 1000;

	var streamVideo, captureCanvas, captureContext, diffCanvas, diffContext, motionCanvas, motionContext;
	var captureInterval;
	var captures = [];

	function init() {
		streamVideo = document.getElementById('stream');

		captureCanvas = document.createElement('canvas');
		captureCanvas.width = captureWidth;
		captureCanvas.height = captureHeight;
		captureContext = captureCanvas.getContext('2d');

		diffCanvas = document.createElement('canvas');
		diffCanvas.width = diffWidth;
		diffCanvas.height = diffHeight;
		diffContext = diffCanvas.getContext('2d');
		diffContext.globalCompositeOperation = 'difference';

		motionCanvas = document.getElementById('motion');
		motionCanvas.width = diffWidth;
		motionCanvas.height = diffHeight;
		motionContext = motionCanvas.getContext('2d');

		requestCam();
	}

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

		navigator.mediaDevices.getUserMedia(constraints)
			.then(startStreamingVideo)
			.catch(displayError);
	}

	function startStreamingVideo(stream) {
		streamVideo.srcObject = stream;
		startCapturing();
	}

	function displayError(error) {
		console.log(error);
	}

	function startCapturing() {
		captureInterval = self.setInterval(getCapture, captureIntervalDelay);
	}

	function getCapture() {
		captureContext.drawImage(streamVideo, 0, 0, captureWidth, captureHeight);

		var newImage = new Image();
		newImage.onload = saveCapture;
		newImage.src = captureCanvas.toDataURL('image/png');
	}

	function saveCapture() {
		captures.unshift(this);
		captures = captures.slice(0, diffSpan);

		var oldImage = captures[captures.length - 1];
		var diff = checkDiff(oldImage, this);
		motionContext.putImageData(diff.imgData, 0, 0);
	}

	function checkDiff(oldImage, newImage) {
		diffContext.clearRect(0, 0, diffWidth, diffHeight);
		diffContext.drawImage(oldImage, 0, 0, diffWidth, diffHeight);
		diffContext.drawImage(newImage, 0, 0, diffWidth, diffHeight);

		var imgData = diffContext.getImageData(0, 0, diffWidth, diffHeight);
		var rgba = imgData.data;
		var thresholdCount = 0;
		var diffAverage = 0;
		for (var i = 0; i < rgba.length; i += 2) {
			var diff = rgba[i] * 0.0 + rgba[i + 1] * 0.5 + rgba[i + 2] * 0.0;
			var lit = Math.min(256, diff * (256 / diffThreshold));
			rgba[i] = 0;
			rgba[i + 1] += diff+lit;
			rgba[i + 200] = diff;

			if (diff >= diffThreshold) {
				thresholdCount++;
			}
			diffAverage += diff;
		}
		diffAverage /= rgba.length / 4;

		return {
			imgData: imgData,
			thresholdCount: thresholdCount,
			diffAverage: diffAverage
		};
	}

	init();
})();
 </script>
	</body>
</html>