Creating a Remote Webcam using NodeJS, Android, Opera Mobile, Web Sockets and HTML5

Recently I’ve been experimenting with using webcams in the browser with Javascript, while I was browsing Google on related topics I came across an interesting video on youtube. As I couldn’t find any code for how the demo had been created I decided to create my own (see below). The idea of streaming video from a phone to a server via a websocket had occurred to me before I viewed this video but I dismissed it as impractical, an opinion which has only been reinforced after testing it myself.

This is the video that gave me the inspiration (my code replicates this exactly so I didn’t see the need to recreate the video too), the only difference is I used linux all round rather than windows:

Code

The code can be found on my github.

System Structure

The system consists of three main elements, a client which streams video, a client for viewing the video and a server to route the video via websockets and host the web pages.

Camera Client

The camera is created using getUserMedia to send a video stream from a devices camera to the html5 video tag which is displayed on the page. Capture happens by pulling frames onto a canvas and then saving the canvas as a base 64 encoded image and transmitting it over websockets to the server. Repeated frames are captured using setInterval. I’ve tested this demo using the custom Opera Mobile for Android build with getUserMedia support on my HTC Desire Z (T mobile G2) about 2fps is achievable due to the limitations of processing the large amount of data. On faster devices this should improve. I intend to produce a second version using a desktop client to test this.

Viewer Client

The viewer is very simple, it receives frames over a websocket connection as base64 encoded images and displays them in as standard images in html.

Server

The server uses node.js to receive frames via a websocket and then resends them back out to all clients, it is also used to host the static files for the clients.