WebNC is a system for efficiently sharing, retrieving and viewing web applications. Unlike existing screencasting and screensharing tools, WebNC is optimized to work with web pages where a lot of scrolling happens. WebNC uses a tile-based encoding to capture, transmit and deliver web applications, and relies only on dynamic HTML and JavaScript. The resulting webcasts require very little bandwidth and are viewable on any modern web browser including Firefox and Internet Explorer as well as browsers on the iPhone and Android platforms.
Screencasting and screensharing are useful for real-time or asynchronous collaboration [1]. They were designed to capture desktop windows [2,4], not specifically web pages. But today a lot of user interaction happens inside a web browser window, so we designed WebNC (Figure 1) specifically to capture web applications.
Living inside a browser as a plugin, WebNC has access to the Document Object Model of the pages, including the type of its elements such as text, pictures, video clips, flash movies, applets, and the location of the scrollbars in these elements. By leveraging this data, WebNC can efficiently capture a rendered web page as image tiles along with metadata like viewport size, cursor position and scroll positions, and send them to a central server.
Once captured, these webcasts can then be viewed using a standard web browser without requiring any plugin. WebNC outputs its webcasts as standard HTML and Javascript, making them viewable with most modern web browsers, including smartphones such as the Apple iPhone and Google Android.
Because it uses only outbound HTTP requests for both the plugin and the viewing javascript code, WebNC avoids the need to reconfigure the network firewall. Unlike most video-codec based screen-recorders, WebNC captures webcasts at their native resolution, thus producing high-resolution and readable webcasts.
Unlike existing tools, WebNC also captures textual elements being rendered by the web browser and their location on screen, allowing users to retrieve webcasts by content.
Finally, WebNC solves a real privacy problem that emerges with existing tools: with WebNC, users can share just a single TAB in their browser, and any popup not part of that TAB will not be shared, like this private instant message or email popping up during a web-conference.
To start sharing a web page, the user simply clicks on the WebNC icon on the bottom/right corner of the browser window (after having installed the WebNC extension which works on all platforms, including Windows, Mac and Linux). The icon changes color to indicate that it is actively recording. The user is shown a sessionID that can be given to others for them to view the live webcast, or kept for later viewing.
By default, WebNC only captures the browser tab that was active when the user initiated the session. If the user switches to another tab in the browser, this new tab will not be captured. The user needs not worry about moving the window outside of the screen boundary as WebNC will still be able to capture these regions (see next section). When the user is done sharing, a simple click on the WebNC icon ends the session.
Living inside the browser, the WebNC plugin has access to the Document Object Model (DOM). It determines the vertical and horizontal positions of the scrollbars and uses them to name the tiles of 256x256 pixels that it captures, starting from the top/left corner of the viewable area on the web page. Tiles are captured using the drawWindow function of the canvas element in Firefox [3]. An equivalent call is available in Internet Explorer. Each tile is named after its position on the page, starting from 0,0 for the top/left tile and moving right and down until it reaches the entire scrollable area, not only the viewable area. WebNC has also access to the hidden pixels, so it can grab entire 256x256 tiles even when some of the pixel rows and columns fall outside of the viewable area.
Every once in a while, WebNC grabs the entire viewable area as a reference bitmap using drawWindow API from the canvas object [3]. It then compresses into PNG or JPG each tile until all tiles in the viewable area are compressed. Images are hashed into a unique signature comprising the MD5 of the URL, bits of the image itself, and the tile number. Tiles that have not been sent already are sent, along with the cursor position, its shape, and the size of the window, scroll position and scrollable area. This data is also sent even when no tile has changed, giving the server the latest cursor position and scrolling information.
WebNC also queries the nsIAccessibleText object of text elements to extract characters and their bounding boxes. This content is optionally sent along with the tile images and stored on the server. Users can retrieve specific parts of webcasts containing a given keyword. Privacy settings can filter out common entities such as email addresses, social security numbers, phone numbers, and street addresses.
A standard web browser pointed to the WebNC server is enough to view a session. The page embeds javascript code that uses Ajax polling to retrieve the metadata of tile names and viewport size, scroll position, and cursor data.
The javascript creates a DIV element set to the viewport width and height, and embeds another DIV set to the size of the scrollable area inside the first DIV. It then creates as many IMG elements are required, setting their SCR to the tile values received earlier. Finally, the p
This content is AI-processed based on open access ArXiv data.