{"id":1653,"date":"2009-08-24T06:44:55","date_gmt":"2009-08-24T13:44:55","guid":{"rendered":"http:\/\/palblog.fxpal.com\/?p=1653"},"modified":"2009-08-23T19:02:56","modified_gmt":"2009-08-24T02:02:56","slug":"webnc-a-vnc-for-web-applications","status":"publish","type":"post","link":"https:\/\/blog.fxpal.net\/?p=1653","title":{"rendered":"WebNC, a VNC for Web Applications"},"content":{"rendered":"

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

WebNC is a tool for sharing your browser window in real-time with someone else. It\u2019s similar to screen sharing tools like VNC<\/a> or WebEx<\/a>, except it\u2019s 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.<\/p>\n

Technically, WebNC could have been implemented using video compression technologies. Many tools use Java\u2019s Robot<\/a> 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<\/a>, Screenr<\/a>).<\/p>\n

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<\/a>, Android<\/a> and Palm Pre<\/a>.<\/p>\n

So how do we do it? As a Firefox extension, WebNC can listen to DOM<\/a> 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\u2019s canvas implementation called drawWindow<\/a>() 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\u2019re sharing, a little bit like Google Maps<\/a>. 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\u2019s amazing to see that WebNC uses only slightly more bandwidth than Windows Remote Desktop Protocol<\/a> over web pages. Effectively, WebNC works well even over slow caf\u00e9 WIFI networks.<\/p>\n

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

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

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\u2019s similar to screen […]<\/p>\n","protected":false},"author":27,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[111],"tags":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.fxpal.net\/index.php?rest_route=\/wp\/v2\/posts\/1653"}],"collection":[{"href":"https:\/\/blog.fxpal.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.fxpal.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.fxpal.net\/index.php?rest_route=\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.fxpal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1653"}],"version-history":[{"count":4,"href":"https:\/\/blog.fxpal.net\/index.php?rest_route=\/wp\/v2\/posts\/1653\/revisions"}],"predecessor-version":[{"id":1661,"href":"https:\/\/blog.fxpal.net\/index.php?rest_route=\/wp\/v2\/posts\/1653\/revisions\/1661"}],"wp:attachment":[{"href":"https:\/\/blog.fxpal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.fxpal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.fxpal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}