JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<video autoplay controls></video>
<canvas width="300" height="300"></canvas>

JavaScript

var width = 300, height = 300;
var video = document.getElementsByTagName('video')[0];
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext('2d');

var glcanvas = document.getElementsByTagName('canvas')[0];
var glcontext = canvas.getContext('experimental-webgl');

function update() {
    context.drawImage(video, 0, 0, width, height);
    webkitRequestAnimationFrame(update);
}

navigator.webkitGetUserMedia(
    {video: true},
    function start(stream) {
        video.src = window.webkitURL.createObjectURL(stream);
        webkitRequestAnimationFrame(update);
    },
    function error() {
        console.log('error', arguments);
    }
);