Connect to Your Ubuntu Machine with an HTML5 VNC Client

Nathan Osman's Gravatar

Nathan Osman
published Jan. 24, 2013, 7:30 p.m.

We all know that VNC is hard to beat when it comes to remote access of an Ubuntu Desktop. Well, okay, some of us use SSH but that isn't always an option. Take my Kindle Touch for example. There are currently no third party apps for the Kindle Touch and the only means I have to connect to anything is the built in web browser. Thankfully this browser implements a good chunk of the HTML 5 spec. Therefore, in order to connect to my machine via the Kindle, I would need to employ a browser-based solution - something that utilized the HTML5 canvas and WebSocket APIs.

Enter noVNC.

Now before I do any further explaining, it's important to realize just exactly what noVNC is not. It is not a VNC client - that would be impossible to implement using WebSockets, which is an application layer protocol, as is VNC. In less technical terms: it just isn't going to happen. So instead, noVNC provides a Python script that acts as a "proxy". The actual HTML5 page communicates with the proxy using the WebSockets protocol and the proxy communicates with the actual VNC server using, well, the VNC protocol.

The Setup

  • First of all, we need a VNC server. My greatest success has been with x11rdp which runs on the Gnome, KDE, and XFCE desktops. (In fact, it will run on any machine with an X11 server.)

  • Don't forget to start the server:

  • Next, grab the latest archive for noVNC from here:

  • Extract the archive and open a terminal. Enter the directory containing the contents of the archive. Now run:

    ./utils/ --vnc localhost:5900
  • The terminal will provide you with a URL to paste into your browser that you can use to connect to your machine. Note that you will need to use the appropriate IP address if you are accessing the page from outside your local network.

I have not been able to get the client working in Firefox sadly. It seems to work fine in Chromium, however. If anything, this little tool is a demonstration of just how much is possible with HTML5.