Added streaming example

dibaggioj · Sep 11, 2013 · 0d7cb3b · 0d7cb3b
1 parent a771dae
commit 0d7cb3b
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 0 deletions.
diff --git a/stream-example.html b/stream-example.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta name="viewport" content="width=320, initial-scale=1"/>
+	<title>jsmpeg streaming</title>
+	<style type="text/css">
+		body {
+			background: #333;
+			text-align: center;
+			margin-top: 10%;
+		}	
+	</style>
+</head>
+<body>		
+	<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>
+	<script type="text/javascript" src="jsmpg.js"></script>
+	<script type="text/javascript">
+		// Show loading notice
+		var canvas = document.getElementById('videoCanvas');
+		var ctx = canvas.getContext('2d');
+		ctx.fillStyle = '#444';
+		ctx.fillText('Loading...', canvas.width/2-30, canvas.height/3);
+
+		// Setup the WebSocket connection and start the player
+		var client = new WebSocket( 'ws://example.com:8084/' );
+		var player = new jsmpeg(client, {canvas:canvas});
+	</script>
+</body>
+</html>
diff --git a/stream-server.js b/stream-server.js
@@ -0,0 +1,71 @@
+
+var STREAM_PORT = 8082,
+	STREAM_SECRET = 's3cret', // CHANGE THIS!
+	WEBSOCKET_PORT = 8084,
+	STREAM_MAGIC_BYTES = 'jsmp'; // Must be 4 bytes
+
+var clients = {};
+var width = 320,
+	height = 240;
+
+// Websocket Server
+var socketServer = new (require('ws').Server)({port: WEBSOCKET_PORT});
+var _uniqueClientId = 1;
+
+var socketError = function() { /* ignore */ };
+socketServer.on('connection', function(socket) {
+	// Send magic bytes and video size to the newly connected socket
+	// struct { char magic[4]; unsigned short width, height;}
+	var streamHeader = new Buffer(8);
+	streamHeader.write(STREAM_MAGIC_BYTES);
+	streamHeader.writeUInt16BE(width, 4);
+	streamHeader.writeUInt16BE(height, 6);
+	socket.send(streamHeader, {binary:true}, socketError);
+
+	// Remember client in 'clients' object
+	var clientId = _uniqueClientId++;
+	clients[clientId] = socket;
+	console.log(
+		'WebSocket Connect: client #' + clientId + 
+		' ('+Object.keys(clients).length+' total)'
+	);
+
+	// Delete on close
+	socket.on('close', function(code, message){
+		delete clients[clientId];
+		console.log(
+			'WebSocket Disconnect: client #' + clientId +
+			' ('+Object.keys(clients).length+' total)'
+		);
+	});
+});
+
+
+// HTTP Server to accept incomming MPEG Stream
+var streamServer = require('http').createServer( function(request, response) {
+	var params = request.url.substr(1).split('/');
+	width = (params[1] || 320)|0;
+	height = (params[2] || 240)|0;
+
+	if( params[0] == STREAM_SECRET ) {
+		console.log(
+			'Stream Connected: ' + request.socket.remoteAddress + 
+			':' + request.socket.remotePort + ' size: ' + width + 'x' + height
+		);
+		request.on('data', function(data){
+			for( c in clients ) {
+				clients[c].send(data, {binary:true}, socketError);
+			}
+		});
+	}
+	else {
+		console.log(
+			'Failed Stream Connection: '+ request.socket.remoteAddress + 
+			request.socket.remotePort + ' - wrong secret.'
+		);
+		response.end();
+	}
+}).listen(STREAM_PORT);
+
+console.log('Listening for MPEG Stream on http://127.0.0.1:'+STREAM_PORT+'/<secret>/<width>/<height>');
+console.log('Awaiting WebSocket connections on ws://127.0.0.1:'+WEBSOCKET_PORT+'/');