2011 Eighth International Conference on Information Technology: New Generations
Remote Data Visualization through WebSockets Andrew Wessels
Mike Purvis
Jahrain Jackson
Syed (Shawon) Rahman
[email protected]
[email protected]
[email protected]
[email protected]
EPSCoR CYBER Team 2010 Computer Science Dept. University of Hawai’i at Hilo engine handles the visualization processing, and the daemon manages client connections.
Abstract— The exponential growth in data storage capacity and collection are beginning to strain the limits of traditional web-based visualization solutions. Remote rendering is a solution that can address the bandwidth limitations of visualizing large datasets over the Internet. In this paper, we have proposed a remote visualization system architecture using web sockets that utilizes a few new technologies available in modern web browsers to make remote visualization accessible to anyone without the need to neither download any of the data nor need specialized hardware to visualize it.
III.
The visualization engine is an application interface that can execute a visualization application as a sub process. It is launched directly from the daemon. The output from the visualization application, including its Graphical User Interface (GUI), windows, and console output is compressed as a JPEG image. The JPEG image output is passed from the engine to the daemon, and sent to the client's web browser in real time. Input such as keyboard and mouse events are captured by the client's web browser and sent to the visualization application through the daemon. To optimize bandwidth and processing power, the image output does not have to be streamed continuously. Instead, it can be transferred on an event-driven basis. For example, if the visualization was a rendered 3-dimensional microbe, the image would update during a camera rotation or zoom event, but would otherwise remain idle, not steaming duplicate images.
Keywords- HTML5;mobile;smartphone;websocket;visualization
I.
INTRODUCTION
Scientific visualization can require large datasets, as well as high-performance computing for rendering. Client-side rendering can become limited, both in terms of storage space and processing power. We have proposed an approach that uses existing web technologies to service a broad user base by offloading the processing tasks to a specialized server, and securely sending rendered visualizations to client machines with limited resources. This paper suggests a framework for providing remote visualization to clients through the Internet by making use of features in the upcoming HTML5 standard. This method will eventually allow for access via mobile devices [1], which have been shown to be increasing in popularity, and especially for accessing video content [2]. This will give scientists the ability to access powerful visualization servers through mobile devices while collecting field data.
IV.
SERVER OVERVIEW
We propose utilizing a central server to process the image generation then sending the image data to the client through a web browser. Features of the central server would include a large storage capacity and high-end graphics hardware. The server’s visualization engine can use Graphics Processing Units (GPUs) to process high-performance visualizations – a task that wouldn't be possible on mobile devices or client machines with limited resources. The server architecture is composed of two parts: the visualization engine and the daemon (See figure 1.) The
978-0-7695-4367-3 2011 U.S. Government Work Not Protected by U.S. Copyright DOI 10.1109/ITNG.2011.182
DAEMON
A daemon is a program that runs continuously as a background process. Our daemon prototype is written in python, and serves as the gateway between the client and the visualization engine. It handles multiple client connections, serving visualization data generated by the visualization engine, and traffics additional information received from the client, such as keyboard and mouse events. The daemon launches visualization processes as necessary, routing visual data to clients through the WebSocket protocol [3]. Input captured from the client is forwarded to the visualization engine for real-time interaction. Multiple visualizations may be running concurrently, and future implementations could allow multiple clients to view the same visualization concurrently.
The four major components to the proposed framework: 1. Server 2. Visualization Engine 3. Daemon 4. Client II.
VISUALIZATION ENGINE
V.
CLIENT
The client needs to create a connection to the daemon, receive image data from the daemon, and then display it to the end user. Our system is designed to stream image data to the client in real-time. To accomplish this we make use of HTML5’s Canvas, WebSocket API, and Base64 image encoding. 1050
Figure 1. Example workflow of visualization architecture.
This type of open connection eliminates network overhead, and allows the connection to remain idle until the client or server initiates a request. This means that the server will be able to send image data continuously as the visualization changes, and remain idle when needed. In summary, for the client/server connection, we propose WebSockets as an ideal solution for streaming real-time image data to the browser.
The HTML5 canvas tag allows image data to be displayed to the user’s screen, WebSockets provide the connection to the server, and Base64 encoding allows the transfer of image data [4]. Together, these three technologies are used to send images to the browser in realtime, producing a stream-like video. VI.
ADVANTAGES OF HTML5
A.
Canvas The Canvas tag enables the web browser to natively manipulate, compose, and layer image data. Similar to an artist’s canvas for which it’s named, the canvas area can superimpose new image data over the existing canvas. If a canvas is updated rapidly, the result offers a stream-like video experience.
C. Base 64 encoding Base64 encoding is essential for allowing image data to be sent through WebSockets, and allowing JavaScript to use the data as an image in the canvas element. Without this encoding, the image data could interfere with the WebSocket protocol, resulting in corrupted data. This is also the only way for the client’s browser to handle raw image data.
B. WebSockets The new WebSocket API resolves the issue of sending data directly to the client by allowing the browser to maintain an asynchronous socket connection to a server. By maintaining this connection, the client is able to instantly send data to the server without needing to re-establish a connection. Additionally, the server is able to send data to the client at any time while the connection remains open. The WebSocket API defines a simple protocol to transfer information, and provides a method for creating secure connections which is beneficial for authentication purposes. Conventional web connections use a system referred to as “polling.” That is, the client’s browser asks the web server for a resource, and the server responds by sending the resource and closing the connection. This system may work well for static webpages, but can become limiting for modern web applications. WebSockets promise to remedy this situation by allowing the client to establish a connection to the server that will remain open. Using WebSockets, the server is able to send data directly to the client without the constant polling from the client for new updates.
VII. CONCLUSION By utilizing the technologies provided by HTML5, a unique approach to high-performace real-time data visualization can be implemented for computationally intensive rendering. ACKNOWLEDGMENT This work is supported by EPSCoR award EPS-0903833 from the National Science Foundation to the University of Hawaii. REFERENCES [1]
[2] [3] [4]
1051
Deveria. (December 2010). Bidirectional communication technology for web apps. [Online]. Available: http://www.caniuse.com/#feat=websockets Novarra. (October 2009). Mobile Internet Experience Update. [Online]. Available: www.novarra.com/contact (registration required) A. Hickson. (January, 2011). The WebSocket API. [Online]. Available: http://dev.w3.org/html5/websockets/ A. Nadel. (June 29, 2010). Pushing Base64-Encoded Images Over HTML5 WebSockets With Pusher And ColdFusion. [Online]. Available: http://www.bennadel.com/blog/1955-Pushing-Base64Encoded-Images-Over-HTML5-WebSockets-With-Pusher-AndColdFusion.htm
