WebNC, a VNC for Web Applications


Recently, we presented our work on WebNC at several venues, including WWW 2009 in Madrid, Hypertext 2009 in Turin, Italy, and at a very interesting SF Bay Area Google App Engine Developers meetup in Palo Alto, CA.

WebNC is a tool for sharing your browser window in real-time with someone else. It’s similar to screen sharing tools like VNC or WebEx, except it’s built for sharing only web pages. This sounds limiting, but since a lot of work is done inside web browsers these days (browsing, editing documents, watching videos, booking reservations, vacations, reading email), we thought it would be useful. For example, my wife always calls me when she rents a car online: what car model should she pick? With WebNC, she can easily show me her browser window and we can talk more efficiently as I can see what she sees on her screen.

Technically, WebNC could have been implemented using video compression technologies. Many tools use Java’s Robot class createScreenCapture() in applets to grab frames off your screen, compress them and make them available on the Internet for all to see. (e.g. ScreenToaster, Screenr).

The downside of this implementation is that viewers often need to have Flash installed to see your screen. Sometimes, they may need to download an ActiveX control, or even install Java. With WebNC, we wanted to only rely on HTML/Javascript to render the screencasts, so any person with a modern web browser could view your screen, including newest phones like the iPhone, Android and Palm Pre.

So how do we do it? As a Firefox extension, WebNC can listen to DOM events such as scrolling, selections, scrollbar positions, as well as the general geometry of the browser window. It also has access to a wonderful method added to Mozilla’s canvas implementation called drawWindow() that renders the content of a web page onto a canvas object. WebNC takes advantage of these capabilities to build up a tile-map of the page you’re sharing, a little bit like Google Maps. It compares differences to see if the tiles have changed, and only sends the updates when required. All data is sent to a web server using normal outbound HTTP connections, so nobody has to touch their firewall settings! It’s amazing to see that WebNC uses only slightly more bandwidth than Windows Remote Desktop Protocol over web pages. Effectively, WebNC works well even over slow café WIFI networks.

On the viewer side, WebNC recreates the view of your page by tiling small IMG elements inside a DIV element sized to the original’s width and height. It also moves a fake cursor image according to the cursor location sent by the extension to the server.

For fun, we wrote WebNC over Google App Engine in Python (and Java) and it’s available here: http://www.webnc.net. Currently, App Engine doesn’t provide COMET-like javascript tricks available on other web stacks, but WebNC works reasonably well. We could probably publish an ongoing  WebNC session as a Google Wave to allow immediate update of the sender’s screen to all viewers. We are also working hard to persist the sessions and make them re-playable, like a YouTube video. Stay tuned!