JS Night Vision Webcam W\ Rainbow Squares FX SRC

<style>
canvas{

  position: relative;
  width: 500px;
  height: 500px;
  overflow: hidden;
  border-radius: 50%;

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

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


		</div>


		<script>


(function() {
	var captureIntervalDelay = 10.0;
	var captureWidth = 500;
	var captureHeight = 500;
	var diffWidth = 500;
	var diffHeight = 500;
	var diffThreshold = 8;
	var diffSpan = 8500;

	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, 5.5);
	}

	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]
			var lit = Math.min(256, diff * (256 / diffThreshold));
			rgba[i] = 0;
			rgba[i + 112] += 0;
			rgba[7777] += lit;

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

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

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

<html>
<body onmousemove="drawe();">
</canvas>
<script>
var size=prompt("Enter Square Size:","100");
function drawe(){
var text = "";
var possible = "FABCGDE0123456789";
var canvas = document.getElementById("motion");
var ctx = canvas.getContext("2d");

for(var i=0; i!=6; i++)
text+=possible.charAt(Math.floor(Math.random()*possible.length));
ctx.strokeStyle='#'+text;
ctx.fillStyle='#'+text;
text+=possible.charAt(Math.floor(Math.random()*possible.length));
ctx.strokeStyle='#'+text;
ctx.fillStyle="#"+text;
ctx.beginPath();
ctx.fillRect(event.x,event.y,size,size,Math.random()*size);
//ctx.arc(event.touches[0].clientX,event.touches[0].clientY,size,size,Math.PI*size);
ctx.fill();
ctx.beginPath();
ctx.strokeRect(event.x,event.y,size,size,Math.random()*size);
ctx.stroke();
text='';
}
</script>
</body>