JSFiddle - React, Tailwind, and code Playground

by Muhammad Nugroho

HTML

<div id="container">
		<h1>Warholiser!</h1>
		<div id="message"></div>
		<video loop id="video"></video>
		<div id="warhols">
			<canvas id="mycanvas"></canvas>
		</div>
		<div id="warholdiv">
			<canvas id="red"></canvas>
			<canvas id="green"></canvas>
			<br>
			<canvas id="blue"></canvas>
			<canvas id="yellow"></canvas>
		</div>
	</div>
    
<body>
<script>
var video = document.getElementById('video'),
    webmvideo = "http://shinydemos.com/media/warholiser/wsh.webm",
    mp4video = "http://shinydemos.com/media/warholiser/wsh.mp4",
    options = {audio: false, video:true},
    red = document.getElementById('red'),
    green = document.getElementById('green'),
    blue = document.getElementById('blue'),
    yellow = document.getElementById('yellow'),
    canvasWidth = red.width,
    canvasHeight = red.height,
    redCtx = red.getContext('2d'),
    greenCtx = green.getContext('2d'),
    yellowCtx = yellow.getContext('2d'),
    blueCtx = blue.getContext('2d');

  //"inlining" what used to be a for loop
  red.addEventListener('click', newImg);
  green.addEventListener('click', newImg);
  blue.addEventListener('click', newImg);
  yellow.addEventListener('click', newImg);
  
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

if (navigator.getUserMedia){
  navigator.getUserMedia(options, v_success, v_error);
} else {
  not_supported();
}

function not_supported() {
  video.innerHTML = "<source src=\""+webmvideo+"\" type=\"video\/webm\" ><\/source> <source src=\""+mp4video+"\" type=\"video\/mp4\" ><\/source>";
  video.muted= true;        
  setInterval(copyVideoToCanvas, 100);
}

function v_success(stream) {
  if (video.mozCaptureStream) { // Needed to check for Firefox
    video.mozSrcObject = stream;
  } else {
    video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
  }
 ...

CSS

@-o-viewport {
  width: device-width;
  height: device-height;
}

@font-face {
    font-family: 'DanielRegular';
    src: url('../fonts/daniel-webfont.eot');
    src: url('../fonts/daniel-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/daniel-webfont.woff') format('woff'),
         url('../fonts/daniel-webfont.ttf') format('truetype'),
         url('../fonts/daniel-webfont.svg#DanielRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Daniel font from http://www.fontsquirrel.com/fonts/Daniel
   License: http://www.fontsquirrel.com/license/Daniel */

body{
	background-color: #999;
	background-image: url('https://raw.githubusercontent.com/github-adi/shinydemos/master/demos/warholiser/images/back2.png');
	font-family: "DanielRegular";
	margin: 0;
	padding: 0;
	height: 100%;
	color: #fff;
}

#container{
	background-color: #3c3c3c;

	width: 610px;
	margin-top: 25px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	border-left: 1px solid #333;
	border-right:  1px solid #333;
	height: 100%;
	text-align: center;
	border-bottom: 1px solid #333;
	border-top: 1px solid #333;
	box-shadow: 1px 12px 10px #222;
	border-radius: 5px;
	opacity: 0.8;
}



a {
	text-decoration: none;
	color: inherit;
}

a:hover {
	text-decoration: underline;
}

video{
	visibility: unhidden;
	display: yes ;
}

canvas{
	width: 300px;
	height: 180px;
	box-shadow: 1px 1px 2px #000;
	-o-transition-property: -o-transform, box-shadow;
	-o-transition-timing-function: ease;
	-o-transition-duration: 0.4s;
	
	-webkit-transition-property: -webkit-transform, box-shadow;
	-webkit-transition-timing-function: ease;
	-webkit-transition-duration: 0.4s;
	
	-moz-transition-property: -moz-transform, box-shadow;
	-moz-transition-timing-function: ease;
	-moz-transition-duration: 0.4s;
	
	-ms-transition-property: -ms-transform, box-shadow;
	-ms-transition-timing-function: ease;
	-ms-transition-duration: 0.4s;
	
	transition-property: transform,...