VNC for web apps

Laurent Denoue, Scott Carter,John Adcock, Gene Golovchinsky,

Andreas Girgensohn

FX Palo Alto Laboratory

What is WebNC?

WebNC is Web Network Computing • A lightweight framework for realtime webpage sharing

Why WebNC?

Need to share a web browser window• co-browsing: husband and wife reserve a car online• webcasting: demo-ing latest web ui to designer team• tutorial: here is how you can reserve a car on our site• link sharing: I found this great web site, look here, click there

 Need to view anywhere: no download, plugin, any device• WebNC viewer is pure HTML/javascript• works on iPhone• low bandwidth, high quality

 Need to search and retrieve• full-text search of recorded "WebNCasts"

System overview

Sender side: firefox extension

1. Grab screenshot of web page: canvas drawWindow2. Split into tiles (256x256 pixels)3. Compress each tile to JPEG and PNG and keep the smaller4. Hash each tile to create a small signature5. For each tile, if signature has changed: send to server

Firefox extension also:• gets viewport size, document size, scroll pos., mouse pos.• sends this along with changed tiles

Firefox extension also:• addListeners to FORMS e.g. SELECT, DROP DOWN• native C++ component (on Windows) grabs Flash, Applets,

etc.

Using the Canvas

HTML5 element “canvas” originally introduced by Apple• Firefox extension “drawWindow”

https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas• Draws a snapshot of the contents of a DOM window• Only for code running with Chrome privileges

Second canvas for image tile• Use “drawImage” to copy a tile of the first canvas• Use “toDataURI” to get compressed image data

data:image/png;base64, iVBO…gg==• Compare size of PNG and JPEG• MD4 of first 256 bytes to detect changes• Upload changed tiles

What Tile Size is Best?

• Compare different PNG tile sizes for Wikipedia page

• Larger tiles are much better with respect to total size• Smaller tiles can deal more efficiently with local changes• 90% overhead for 128x128 vs. 256x256• 37% overhead for 256x256 vs. 512x512

• Should be worth it if only a few tiles change

Tile #Tiles Size HTTP Headers

64x64 224 317 KB 112 KB

128x128 56 208 KB 28 KB

256x256 16 116 KB 8 KB

512x512 4 88 KB 2 KB

1024x1024 1 78 KB 0.5 KB

Server and Viewer

For a given sessionid, server maintains in RAM:• cursor position• document size and viewport size and position• each hash and corresponding byte[] of image tile

HTML/Javascript viewer:• Uses Ajax polling to get meta info and tile images as needed• Creates a <div> sized to viewport size• Creates <div> sized to document size (scrollable size) • Adds <img> tiles at fixed positions inside document <div>• Animates position of document <div> behind viewport <div> based on scroll position

• Animates cursor <img> to cursor position

Some Benchmarks

Used WinMacro to automate record a 2.5 min web sessionWireshark to measure network utilization

• Microsoft Remote Desktop: 225 kbps• WebNC: 280 kbps• UltraVNC: 512 kbps• Microsoft SharedView: 729 kbps

WebNC bandwidth requirements low enough to be accommodated by typical broadband connections.

http://www.webnc.net

Other features

• Sharing is limited to a single browser tabo Simple privacy

 • Document layout structure can be overlayed in viewer

o enables iPhone double-tap zoom feature  •  Document text can be included in the stream

o Enables sharing archives to be full-text searchable