With all the recent Goruck-ness it’s time to throw out a tech post. I’ve been prepping for a NodeJS presentation recently and wanted a unique demo. I had also come across the experimental build of Opera which supports accessing the native webcam of a mobile device. So I threw these two technologies together and came up with a Javascript powered way to stream a video camera from a mobile device to a bunch of desktop (or mobile) clients.

HTML5 had originally laid out support for a new element (the “device” element) but it appears this element has been scrapped now in favour of the “getUserMedia” API. So far I have only seen the Opera Mobile Experimental build support this but hopefully it’ll get into Dolphin and other mobile browsers soon.

http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview

If you just want to cut to the chase here’s a video of the final result:

There are three moving parts here

• a) The client page which captures the video
• b) the server which is a simple Node broadcast server
• c) and the Client which is just a web page that renders the output.

The client is just a copy-paste from Opera’s website. I take the video stream, render it to a canvas, then grab the canvas as a base64 encoded image. One image per frame. I could not find a way to limit the video’s size so the resulting image is fairly large (240×400 on an HTC Incredible). I down-sampled, cutting the image data to reduce the traffic over the wire. Framerates are still pretty poor but this is just an experiment.

The server is a generic websockets server and gets a message which is a raw data/base64 stream. It broadcasts this down the any connected clients.

The client then is the simplest of all, just connects to the socket server and renders whatever it gets to an tag.

It’s all Javascript.

Client (this is a jade view).

h1
    Remote Webcam using NodeJS, Opera, Web Sockets and HTML5/Canvas
video(autoplay=true,id="sourcevid")
canvas(id="output")
div(id="log")
script
    var log = function(msg) {
       document.getElementById('log').innerHTML = document.getElementById('log').innerHTML + msg + "<br/>";
    };
    var video = document.getElementsByTagName('video')[0], 
        heading = document.getElementsByTagName('h1')[0];
    if(navigator.getUserMedia) {
        navigator.getUserMedia('video', successCallback, errorCallback);
     
        function successCallback( stream ) {
            video.src = stream;
        };
     
        function errorCallback( error ) {
            heading.textContent = "An error occurred: [CODE " + error.code + "]";
        };
    } else { 
        heading.textContent = "Native web camera streaming is not supported in this browser!";
    };
        
    var back = document.createElement('canvas');
    var backcontext = back.getContext('2d');
    
    var ws;

    if('WebSocket' in window){
        connect('ws://192.168.2.100:8080/');        
    } else {
        log ('web sockets not supported');
     }
    
    function connect(host) {
        ws = new WebSocket(host);
        ws.onopen = function () {
            log('connected');
        };
 
        ws.onclose = function () {
            log('socket closed');
        };

        ws.onerror = function (evt) { 
            log('<span style="color: red;">ERROR:</span> ' + evt.data); 
        };
    };
      
    function send(msg){  
        if (ws != null) {  
            if(ws.readyState === 1) {
               ws.send(msg);
            }        
        } else {
            //log ('not ready yet');
        }
    }    

    cw = 120;//240;//video.clientWidth;
    ch = 200;//400;//video.clientHeight;
    log('width = ' + ch);
    back.width = cw;
    back.height = ch;
    draw(video, backcontext, cw, ch);
    
    function draw(v, bc, w, h) {
    
        // First, draw it into the backing canvas
        bc.drawImage(v, 0, 0, w, h);
        
        // Grab the pixel data from the backing canvas
        var stringData=back.toDataURL();
        
        // send it on the wire
        send(stringData);
        
        // Start over! 10 frames a second = 100milliseconds
        setTimeout(function(){ draw(v, bc, w, h); });
    }

The server. Simple Broadcast app.

var sys = require("sys"),
    ws = require("./ws.js");

var clients = [];

ws.createServer(
	function (websocket) {
	
		clients.push(websocket);

		websocket.addListener("connect", function (resource) {
			// emitted after handshake
			sys.debug("connect: " + resource);
		}).addListener("data", function (data) {

		// handle incoming data
		// send data to ALL clients whenever ANY client send up data
		for (var i = 0 ; i < clients.length ; i ++ ) {
			clients[i].write(data);
		}

    }).addListener("close", function () {

		// emitted when server or client closes connection
		sys.debug("close");
    });
  }).listen(8080);
  
  sys.debug("Listening on port 8080");

The client.

<img src="" id="frame" style="width:240px;height:400px"/>

<div id="log"></div>

<script type="text/javascript">

	

	var img; 

	

	function Init() {

		img = document.getElementById("frame");	

	}

	

	$(document).ready(function () {

		Init();

	});



// Web socket connection stuff is next...	

	if('WebSocket' in window){

		connect('ws://localhost:8080/');		

	} else {

		log ('web sockets not supported');

	}

	var ws;



	function connect(host) {

		ws = new WebSocket(host);

		ws.onopen = function () {

			log('connected');

		};

 

		ws.onmessage = function (evt) {  	

            if (evt.data != null) {		

			  if ((evt.data[0]=== "d") &amp;amp;amp;amp;&amp;amp;amp;amp; (evt.data[1]==="a") ) img.src=evt.data;	//log('got' + evt.data);

			}

		};

 

		ws.onclose = function () {

			log('socket closed');

		};



		ws.onerror = function (evt) { 

			log('<span style="color: red;">ERROR:</span> ' + evt.data); 

		};

	};

	

	function log(msg){

		document.getElementById('log').innerHTML = msg + "<br/>" + document.getElementById('log').innerHTML ;

	}	
</script>

Instead of broadcasting, you could store these frames in a MongoDB for assembly later. This would make the ultimate, storage independent video camera. Never run out of storage again!

I really need to start storing these snippets on github…

P.S. Everyone knows insects are clockwork which is why god made so many of them. Today’s image is from http://www.insectlabstudio.com/