There are many VNC clients available, differing in their capabilities and support. If you are looking cross-platform VNC client, you can have Java-based VNC viewers (e.g., RealVNC or TightVNC). However, there is also a new way, web-based VNC clients.

VNC web clients are typically faster than Java-based VNC viewers and could be easily integrated into other third-party application.

In this article, we will discuss about how to access VNC remote desktop in web browser by using VNC web client called noVNC. All experiment is done on Linux, Slackware64 14.0.

What is noVNC

noVNC is a HTML5-based remote desktop web client which can communicate with a remote VNC server via Web Sockets. Using noVNC, you can control a remote computer in a web browser over VNC.

noVNC has been integrated into a number of other projects including OpenStack, OpenNebula, CloudSigma, Amahi and PocketVNC.

noVNC Feature List

The following list shows full features offered by noVNC.

  • Supports all modern browsers including those on iOS, Android.
  • Supported VNC encodings: raw, copyrect, rre, hextile, tight, tightPNG
  • WebSocket SSL/TLS encryption (i.e. “wss://”) support
  • 24-bit true color and 8 bit colour mapped
  • Supports desktop resize notification/pseudo-encoding
  • Local or remote cursor
  • Clipboard copy/paste
  • Clipping or scrolling modes for large remote screens

Web Browser Requirements

Not all web browser can run noVNC. We need web browsers which capable of running HTML5, in specific: HTML5 Canvas and WebSockets. Therefore, older age web browsers are excluded from our list.

The following browser meet the requirements:

  1. Chrome 8+
  2. Firefox 3.6+
  3. Safari 5+
  4. iOS Safari 4.2+
  5. Opera 11+
  6. Internet Explorer 9+

If your browser does not have native WebSockets support, you can use web-socket.js, which is included in noVNC package.

More detailed on browser compatibility can be seen on the the official guide.

Installation

To install noVNC remote desktop web client, clone the noVNC repository:

Running

Launch Webcokify WebSockets Proxy

The first step is to launch Websockify (which comes with noVNC package) on local host. noVNC relies on Websockify to communicate with a remote VNC server. Websockify is a WebSocket to TCP proxy/bridge, which allows a web browser to connect to any application, server or service via local TCP proxy.

Here we assume we have already set up a running VNC server somewhere. Let say we have VNC server at 192.168.1.102:5901 using TightVNC.

To launch Websockify, use a startup script called launch.sh. This script starts a mini-webserver as well as Websockify. The “–vnc” option is used to specify the location of a remotely running VNC server. Run it on noVNC source code root directory:

And you should have something like this:

Connect using Browsers

At this point, you can open up a web browser, and navigate to the URL shown in the output of Websockify (e.g., http://BlueWyvern:6080/vnc.html?host=BlueWyvern&port=6080).

If the remote VNC server requires password authentication, you will see the following screen in your web browser.

vnc-1

After you have successfully connected to a remote VNC server, you will be able to access the remote desktop.

vnc-2

You can also adjust the settings of a VNC session by clicking the settings icon.

vnc-3

The above examples are running on Slacwkware64 14.0 (client) and Raspbian Wheezy / Raspberry Pi (server)

Create Encrypted VNC Session with noVNC

By default a VNC session created by noVNC is not encrypted. If you want, you can create encrypted VNC connections by using the WebSocket ‘wss://’ URI scheme. For that, you need to generate a self-signed encryption certificate (e.g., by using OpenSSL), and have Websockify load the certificate.

To create a self-signed certificate with OpenSSL:

After that, place the certification in noVNC/utils directory. Then you can run launch.sh, Websockify will automatically load the certificate.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">