JSFiddle - React, Tailwind, and code Playground

by Santiago J

HTML

<script src="http://santiago.gotdns.com/socket.io/socket.io.js"></script>
<h3>Initializing web camera display demo</h3>

CSS

video, canvas {display: block; border: 1px solid #333; background-color: #222;}

JavaScript

function $(s,a,p) { return (p||document)[a?"querySelectorAll":"querySelector"](s); }
function mkEl(tag, attr) {
    var el = document.createElement(tag);
    for (var a in attr) el.setAttribute(a, attr[a]);
    return el;
}

var heading;

var size = { width: 320, height: 240 };

var video = mkEl("video", size);
var canvas = mkEl("canvas", size);
var ctx = canvas.getContext("2d");

var socket = io.connect("http://santiago.gotdns.com");

function sendFrame() {
    try{
        video.pause();
        ctx.drawImage(video, 0, 0);
        video.play();
        var data = canvas.toDataURL("image/jpeg");
        socket.emit("framesend", {dataURL: data});
    } catch (e) {
        heading.innerHTML = e;
    }
}

function init() {
    heading = $('h3');
    
    function streamSuccess(stream) {
        heading.textContent = "Video stream live!";
        $("body").appendChild(video);
        $("body").appendChild(canvas);
        video.src = stream;
        video.play();
        
        var button = mkEl("button", {innerHTML: "Begin sending"});
        button.onclick = function() {
            setInterval(sendFrame, 500);
        };
        $("body").appendChild(button);
    }
    function streamFailure(error) {
        heading.textContent = "An error occurred: [CODE " + error.code + "]";
    }
    
    if(navigator.getUserMedia) {
        navigator.getUserMedia('video', streamSuccess, streamFailure);
    } else {
        heading.textContent = "navigator.getUserMedia is not supported in this browser.";
    }
}

window.onload = init;