Wednesday, January 19, 2011

Streaming ASCII Art Demo on html5rocks.com

I recently thought about building a WebSocket demo for html5rocks.com and I was thinking about building something which could not easily be replicated with any of the work arounds such as long-polling, etc but would require a real streaming socket connection.
The server is using node.js and it has two modes: it can either talk to a local QuickTime installation to stream the video or load a file into memory that contains all the text that makes up the frames of the video. For the production setup that runs on Joyent's no.de infrastructure the in-memory solution is used to avoid the dependency on QuickTime and to allow simulatenous access by multiple users.
The collaborative part comes into play with the scrub bar that scrubs the video for all users that are currently watching. This also means that the demo will not really be enjoyable with many concurrent watchers :)
I really love the simplicity of the client. It receives every frame as a single WebSocket messages and just puts that into a <pre> tag as soon as it is received. That's it.
2 Warnings:
  1. Most browsers recently disabled their WebSocket implementation, so it might not work for you.
    Updates:
    Chrome should work
    To view on Firefox 4, go to about:config and set network.websocket.override-security-block to true.
    For Opera: opera:config#UserPrefs|EnableWebSockets
  2. Lets see how much node.js can take :)

1 comment:

robottaway said...

This is a very creative little project. I think it really starts to freak people out seeing this sorta thing. Who knows what the next iteration of web technologies using HTML5 will hold. Like I figure presence will somehow just be the norm across a lot of sites, meaning you'll be able to see and chat will anyone on a page you currently are on (if said page uses FB presence or what ever company corners the tech). It'll be like meeting people out in the real world, at say a book store or a local music shop, but online where you haunt favorite sites... say hackernews :)