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:
- Chrome 8+
- Firefox 3.6+
- Safari 5+
- iOS Safari 4.2+
- Opera 11+
- 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.
To install noVNC remote desktop web client, clone the noVNC repository:
git clone git://github.com/kanaka/noVNC
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:
./utils/launch.sh --vnc 192.168.102:5901
And you should have something like this:
Warning: could not find self.pem Starting webserver and WebSockets proxy on port 6080 WebSocket server settings: - Listen on :6080 - Flash security policy server - Web server. Web root: /home/xathrya/gitku/noVNC - No SSL/TLS support (no cert file) - proxying from :6080 to 192.168.1.102:5901 Navigate to this URL: http://BlueWyvern:6080/vnc.html?host=BlueWyvern&port=6080 Press Ctrl-C to exit
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.
After you have successfully connected to a remote VNC server, you will be able to access the remote desktop.
You can also adjust the settings of a VNC session by clicking the settings icon.
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:
openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem
After that, place the certification in noVNC/utils directory. Then you can run launch.sh, Websockify will automatically load the certificate.vnc