VNC for web apps Laurent Denoue, Scott Carter, John Adcock, Gene Golovchinsky, Andreas Girgensohn FX Palo Alto Laboratory
What is WebNC? <ul><li>WebNC is Web Network Computing </li></ul><ul><li>  </li></ul><ul><ul><li>A lightweight framework fo...
Why WebNC? <ul><li>Need to  share a web browser  window </li></ul><ul><ul><li>co-browsing: husband and wife reserve a car ...
System overview
Sender side: firefox extension <ul><ul><li>Grab screenshot of web page: canvas drawWindow </li></ul></ul><ul><ul><li>Split...
Using the Canvas <ul><li>HTML5 element “canvas” originally introduced by Apple </li></ul><ul><ul><li>Firefox extension “dr...
What Tile Size is Best? <ul><ul><li>Compare different PNG tile sizes for Wikipedia page </li></ul></ul><ul><ul><li>Larger ...
Server and Viewer <ul><li>For a given sessionid,  server  maintains in RAM: </li></ul><ul><ul><li>cursor position </li></u...
Some Benchmarks <ul><li>Used WinMacro to automate record a 2.5 min web session </li></ul><ul><li>Wireshark to measure netw...
Other features <ul><ul><li>Sharing is limited to a single browser tab </li></ul></ul><ul><ul><ul><li>Simple privacy  </li>...
Upcoming SlideShare
Loading in...5
×

WebNC: VNC for web applications

4,113

Published on

http://www.webnc.net
WebNC (for "web and see")is a browser plugin that leverages the Document Object Model for efficiently sharing web browser windows or recording web browsing sessions to be replayed later. Unlike existing screen-sharing or screencasting tools, WebNC is specially optimized to handle scrolling within a web page. Rendered pages are captured as image tiles, and transmitted to a central server through http post. Viewers can watch the webcasts in real-time or asynchronously using a standard web browser: WebNC only relies on html and javascript to reproduce the captured web content. Along with the visual content of web pages, WebNC also captures their layout and textual content for later retrieval. The resulting webcasts require very little bandwidth, are viewable on any modern web browser including the iPhone and Android phones, and are searchable by keyword

Published in: Technology, News & Politics
2 Comments
1 Like
Statistics
Notes
  • Another good alternative to get access via web is http://www.onlinevnc.com Free, Modern, Fast.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ThinVNC is another pure web alternative that uses HTML5 to replace the old VNC.
    http://www.supportsmith.com/ThinVNC/HTML5-VNC.Aspx

    For those who are not familiar with ThinVNC, there's a video demonstration at:
    http://www.youtube.com/user/CybeleSoftware

    Visit our web to find further product descriptions, a quick guide and
    a download link to get the latest build.

    http://www.supportsmith.com/ThinVNC/Getting-Started.aspx

    Beside the HTML5 remote access, we developed an optional client which
    supports a nice feature yet not present on the pure-web mode:
    seamless windows.

    See you around!

    :)

    PS: ThinVNC is free for non commercial use.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,113
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
2
Likes
1
Embeds 0
No embeds

No notes for slide

WebNC: VNC for web applications

  1. 1. VNC for web apps Laurent Denoue, Scott Carter, John Adcock, Gene Golovchinsky, Andreas Girgensohn FX Palo Alto Laboratory
  2. 2. What is WebNC? <ul><li>WebNC is Web Network Computing </li></ul><ul><li>  </li></ul><ul><ul><li>A lightweight framework for realtime webpage sharing </li></ul></ul>
  3. 3. Why WebNC? <ul><li>Need to share a web browser window </li></ul><ul><ul><li>co-browsing: husband and wife reserve a car online </li></ul></ul><ul><ul><li>webcasting: demo-ing latest web ui to designer team </li></ul></ul><ul><ul><li>tutorial: here is how you can reserve a car on our site </li></ul></ul><ul><ul><li>link sharing: I found this great web site, look here, click there </li></ul></ul><ul><li>  </li></ul><ul><li>Need to view anywhere: no download, plugin, any device </li></ul><ul><ul><li>WebNC viewer is pure HTML/javascript </li></ul></ul><ul><ul><li>works on iPhone </li></ul></ul><ul><ul><li>low bandwidth, high quality </li></ul></ul><ul><li>  </li></ul><ul><li>Need to search and retrieve </li></ul><ul><ul><li>full-text search of recorded &quot;WebNCasts&quot; </li></ul></ul>
  4. 4. System overview
  5. 5. Sender side: firefox extension <ul><ul><li>Grab screenshot of web page: canvas drawWindow </li></ul></ul><ul><ul><li>Split into tiles (256x256 pixels) </li></ul></ul><ul><ul><li>Compress each tile to JPEG and PNG and keep the smaller </li></ul></ul><ul><ul><li>Hash each tile to create a small signature </li></ul></ul><ul><ul><li>For each tile, if signature has changed: send to server </li></ul></ul><ul><li>Firefox extension also: </li></ul><ul><ul><li>gets viewport size, document size, scroll pos., mouse pos. </li></ul></ul><ul><ul><li>sends this along with changed tiles </li></ul></ul><ul><li>Firefox extension also: </li></ul><ul><ul><li>addListeners to FORMS e.g. SELECT, DROP DOWN </li></ul></ul><ul><ul><li>native C++ component (on Windows) grabs Flash, Applets, etc. </li></ul></ul>
  6. 6. Using the Canvas <ul><li>HTML5 element “canvas” originally introduced by Apple </li></ul><ul><ul><li>Firefox extension “drawWindow” https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas </li></ul></ul><ul><ul><li>Draws a snapshot of the contents of a DOM window </li></ul></ul><ul><ul><li>Only for code running with Chrome privileges </li></ul></ul><ul><li>Second canvas for image tile </li></ul><ul><ul><li>Use “drawImage” to copy a tile of the first canvas </li></ul></ul><ul><ul><li>Use “toDataURI” to get compressed image data data:image/png;base64, iVBO…gg== </li></ul></ul><ul><ul><li>Compare size of PNG and JPEG </li></ul></ul><ul><ul><li>MD4 of first 256 bytes to detect changes </li></ul></ul><ul><ul><li>Upload changed tiles </li></ul></ul>
  7. 7. What Tile Size is Best? <ul><ul><li>Compare different PNG tile sizes for Wikipedia page </li></ul></ul><ul><ul><li>Larger tiles are much better with respect to total size </li></ul></ul><ul><ul><li>Smaller tiles can deal more efficiently with local changes </li></ul></ul><ul><ul><li>90% overhead for 128x128 vs. 256x256 </li></ul></ul><ul><ul><li>37% overhead for 256x256 vs. 512x512 </li></ul></ul><ul><ul><ul><li>Should be worth it if only a few tiles change </li></ul></ul></ul>2 KB 88 KB 4 512x512 0.5 KB 78 KB 1 1024x1024 8 KB 116 KB 16 256x256 28 KB 208 KB 56 128x128 112 KB 317 KB 224 64x64 HTTP Headers Size #Tiles Tile
  8. 8. Server and Viewer <ul><li>For a given sessionid, server maintains in RAM: </li></ul><ul><ul><li>cursor position </li></ul></ul><ul><ul><li>document size and viewport size and position </li></ul></ul><ul><ul><li>each hash and corresponding byte[] of image tile </li></ul></ul><ul><li>HTML/Javascript viewer : </li></ul><ul><ul><li>Uses Ajax polling to get meta info and tile images as needed </li></ul></ul><ul><ul><li>Creates a <div> sized to viewport size </li></ul></ul><ul><ul><li>Creates <div> sized to document size (scrollable size) </li></ul></ul><ul><ul><li>Adds <img> tiles at fixed positions inside document <div> </li></ul></ul><ul><ul><li>Animates position of document <div> behind viewport <div> based on scroll position </li></ul></ul><ul><ul><li>Animates cursor <img> to cursor position </li></ul></ul>
  9. 9. Some Benchmarks <ul><li>Used WinMacro to automate record a 2.5 min web session </li></ul><ul><li>Wireshark to measure network utilization </li></ul><ul><ul><li>Microsoft Remote Desktop: 225 kbps </li></ul></ul><ul><ul><li>WebNC: 280 kbps </li></ul></ul><ul><ul><li>UltraVNC: 512 kbps </li></ul></ul><ul><ul><li>Microsoft SharedView: 729 kbps </li></ul></ul><ul><li>WebNC bandwidth requirements low enough to be accommodated by typical broadband connections. </li></ul><ul><li>http://www.webnc.net </li></ul>
  10. 10. Other features <ul><ul><li>Sharing is limited to a single browser tab </li></ul></ul><ul><ul><ul><li>Simple privacy </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><li>Document layout structure can be overlayed in viewer </li></ul></ul><ul><ul><ul><li>enables iPhone double-tap zoom feature </li></ul></ul></ul><ul><li>  </li></ul><ul><ul><li>  Document text can be included in the stream </li></ul></ul><ul><ul><ul><li>Enables sharing archives to be full-text searchable </li></ul></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×