JSFiddle - React, Tailwind, and code Playground

by rasata

HTML

<!--<canvas id="videoCanvas" width="640" height="480">
        <p>
            Please use a browser that supports the Canvas Element, like
            <a href="http://www.google.com/chrome">Chrome</a>,
            <a href="http://www.mozilla.com/firefox/">Firefox</a>,
            <a href="http://www.apple.com/safari/">Safari</a> or Internet Explorer 10
        </p>
    </canvas>-->

JavaScript

var img = document.createElement('img');
document.body.appendChild(img);
var socket = new WebSocket('ws://localhost:8002');
socket.onmessage = function(message) {
//		  img.src = 'data:image/jpeg;base64,' + btoa(message.data);
//			console.log(message.data);
    var urlCreator = window.URL || window.webkitURL;
		var imageUrl = urlCreator.createObjectURL( message.data );
    img.src = imageUrl;
};

// Setup the WebSocket connection and start the player
/*var client = new WebSocket( 'ws:/localhost:8002/' );
client.onmessage = function onmessage (event) {
	if(event.data.size === undefined) {
		var canvas = document.getElementById('videoCanvas');
		var context = canvas.getContext('2d');
		var imageObj = new Image();
		imageObj.onload = function () {
			context.drawImage(imageObj, 0, 0, 1280, 720);
		};
		imageObj.src = event.data;
	}
}*/