JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<video autoplay id="videoElement" width="400" height="400" style="visibility:hidden;position:absolute;top:-1000; "></video>
<canvas id="canvas" width="400" height="400"
  
    style="visibility:hidden;position:absolute;top:-1000; "
  
></canvas>
<span id=s></span>
<img id=iii>

JavaScript

// webcam 1.2

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

var v = document.getElementById("videoElement");
var c = canvas.getContext('2d');
var freeze = 0;

var echo = function (text, clears) {
    if(clears==1) c.clearRect(0,0,400,400);
    c.font = 'bold 30px Oswald';
    height = 15;
    width = c.measureText(text).width;
    c.fillStyle = 'rgba(0,0,0,1)';
    c.fillText(text, 200 - (width/2),200 + height + 50);
    c.fillStyle = 'rgba(255,255,255,1)';
    c.fillText(text, 198 - (width/2),198 + height + 50);
}

var echo_status = function (text) {
    c.font = '18px Oswald';
    height = 9;
    width = c.measureText(text).width;
    c.fillStyle = 'rgba(0,0,0,1)';
    c.fillText(text, 200 - (width/2),200 + height + 80);
    c.fillStyle = 'rgba(255,255,255,1)';
    c.fillText(text, 199 - (width/2),199 + height + 80);
    //console.log(height);
}
var echo_status2 = function (text) {
    c.font = '18px Oswald';
    height = 9;
    width = c.measureText(text).width;
    c.fillStyle = 'rgba(0,0,0,1)';
    c.fillText(text, 200 - (width/2),200 + height +95);
    c.fillStyle = 'rgba(255,255,255,1)';
    c.fillText(text, 199 - (width/2),199 + height +95);
    //console.log(height);
}

if (navigator.getUserMedia) {
	echo('Loading...',1);
    navigator.getUserMedia({video: true}, handleVideoCallback, videoError);
} else {
	echo('cant access camera',1);
}

function handleVideoCallback(stream) {
    v.src = window.URL.createObjectURL(stream);
    echo ('Loaded.',1);
}

function videoError(e) {
	echo('cant access camera',1);
}

var snap = function () {

    c.clearRect(0,0,400,400);
    if(v.paused || v.ended || freeze) return false;
    c.fillStyle = 'rgba(0,0,0,0)';
    c.beginPath();
    c.fillRect(0,0,400,400);
    c.closePath();
    c.save();
    c.beginPath();
    c.strokeStyle='rgba(0,0,0,1)';
    c.arc(200,200, 198, 0, 2*Math.PI);
    c.lineWidth...