JSFiddle - React, Tailwind, and code Playground

by Timatnet

HTML

<div>
    <video id="video" style="display: none;" autoplay="">
        <source src="http://www.sintezplyus.ru/sites/all/themes/paint/img/background-paint-splatter-small.mp4" type="video/mp4;">
    </video>
        <canvas width="320" height="480" id="buffer"></canvas>
        <canvas width="320" height="240" id="output" style="display: block;"></canvas>
</div>

CSS

#buffer {
    display: none;
}

JavaScript

(function(){
			var outputCanvas = document.getElementById('output'),
				output = outputCanvas.getContext('2d'),
				bufferCanvas = document.getElementById('buffer'),
				buffer = bufferCanvas.getContext('2d'),
				video = document.getElementById('video'),
				width = outputCanvas.width,
				height = outputCanvas.height,
				interval;
				
			function processFrame() {
				buffer.drawImage(video, 0, 0);
				
				// this can be done without alphaData, except in Firefox which doesn't like it when image is bigger than the canvas
				var	image = buffer.getImageData(0, 0, width, height),
					imageData = image.data,
					alphaData = buffer.getImageData(0, height, width, height).data;
				
				for (var i = 3, len = imageData.length; i < len; i = i + 4) {
					imageData[i] = alphaData[i-1];
				}
				
				output.putImageData(image, 0, 0, 0, 0, width, height);
			}
			
			function randomColourVal() {
				return Math.floor( Math.random() * 256 );
			}
			
			video.addEventListener('play', function() {
				clearInterval(interval);
				interval = setInterval(processFrame, 40)
			}, false);
			
			// Firefox doesn't support looping video, so we emulate it this way
			video.addEventListener('ended', function() {
				video.play();
			}, false);
			
			document.getElementById('randomBg').addEventListener('click', function(event) {
				document.body.style.backgroundColor = 'rgb(' + randomColourVal() + ',' + randomColourVal() + ',' + randomColourVal() + ')';
				event.preventDefault();
			}, false);
			
			document.getElementById('start').addEventListener('click', function(event) {
				video.play();
				event.preventDefault();
			}, false);
			
			document.getElementById('stop').addEventListener('click', function(event) {
				video.pause();
				clearInterval(interval);
				event.preventDefault();
			}, false);
			
			document.getElementById('toggleProcessing').addEventListener('click', function(event) {
				var toShow = video,
					toHide = outputCanvas;
					
				if...