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).
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.