webnc: vnc for web applications
Post on 25-May-2015
4.097 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related