2010-07-02 18:02:57 +01:00
|
|
|
## noVNC: HTML5 VNC Client
|
2010-04-07 03:34:56 +01:00
|
|
|
|
|
|
|
|
2010-07-02 18:02:57 +01:00
|
|
|
### Description
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-05-12 15:39:38 +01:00
|
|
|
noVNC is a VNC client implemented using HTML5 technologies,
|
2010-07-16 02:18:39 +01:00
|
|
|
specifically Canvas and WebSockets (supports 'wss://' encryption).
|
2010-09-08 21:06:34 +01:00
|
|
|
noVNC is licensed under the
|
|
|
|
[LGPLv3](http://www.gnu.org/licenses/lgpl.html).
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-07-13 23:51:26 +01:00
|
|
|
Special thanks to [Sentry Data Systems](http://www.sentryds.com) for
|
|
|
|
sponsoring ongoing development of this project (and for employing me).
|
2010-07-09 17:41:36 +01:00
|
|
|
|
2010-07-23 18:30:31 +01:00
|
|
|
Notable commits, announcements and news are posted to
|
|
|
|
@<a href="http://www.twitter.com/noVNC">noVNC</a>
|
|
|
|
|
|
|
|
|
2010-07-09 17:41:36 +01:00
|
|
|
### Screenshots
|
|
|
|
|
2010-07-09 16:51:51 +01:00
|
|
|
Running in Chrome before and after connecting:
|
2010-07-09 16:52:42 +01:00
|
|
|
|
2010-07-09 16:51:51 +01:00
|
|
|
<img src="http://kanaka.github.com/noVNC/img/noVNC-1.jpg" width=400> <img src="http://kanaka.github.com/noVNC/img/noVNC-2.jpg" width=400>
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-07-09 17:41:36 +01:00
|
|
|
See more screenshots <a href="http://kanaka.github.com/noVNC/screenshots.html">here</a>.
|
|
|
|
|
|
|
|
|
2010-09-24 16:29:42 +01:00
|
|
|
### Browser Requirements
|
|
|
|
|
|
|
|
<a href="http://github.com/kanaka/noVNC/blob/master/docs/browsers.md">
|
|
|
|
Detailed browser status/testing</a>.
|
|
|
|
|
|
|
|
* HTML5 Canvas: Except for Internet Explorer, most
|
|
|
|
browsers have had Canvas support for quite some time. Internet
|
|
|
|
Explorer 9 will have Canvas support (finally).
|
|
|
|
|
|
|
|
* HTML5 WebSockets: For browsers that do not have builtin
|
|
|
|
WebSockets support, the project includes
|
|
|
|
<a href="http://github.com/gimite/web-socket-js">web-socket-js</a>,
|
|
|
|
a WebSockets emulator using Adobe Flash.
|
|
|
|
|
|
|
|
* Fast Javascript Engine: noVNC avoids using new Javascript
|
|
|
|
functionality so it will run on older browsers, but decode and
|
|
|
|
rendering happen in Javascript, so a slow Javascript engine will
|
|
|
|
mean noVNC is painfully slow.
|
|
|
|
|
|
|
|
### Server Requirements
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-07-16 02:18:39 +01:00
|
|
|
Unless you are using a VNC server with support for WebSockets
|
|
|
|
connections (only my [fork of libvncserver](http://github.com/kanaka/libvncserver)
|
|
|
|
currently), you need to use a WebSockets to TCP socket proxy. There is
|
|
|
|
a python proxy included ('wsproxy'). One advantage of using the proxy
|
|
|
|
is that it has builtin support for SSL/TLS encryption (i.e. "wss://").
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-04-19 02:53:54 +01:00
|
|
|
There a few reasons why a proxy is required:
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-07-16 02:18:39 +01:00
|
|
|
1. WebSockets is not a pure socket protocol. There is an initial HTTP
|
2010-04-19 02:53:54 +01:00
|
|
|
like handshake to allow easy hand-off by web servers and allow
|
2010-07-16 02:18:39 +01:00
|
|
|
some origin policy exchange. Also, each WebSockets frame begins
|
2010-04-19 02:53:54 +01:00
|
|
|
with 0 ('\x00') and ends with 255 ('\xff').
|
2010-04-07 03:37:35 +01:00
|
|
|
|
|
|
|
2. Javascript itself does not have the ability to handle pure byte
|
2010-07-16 02:22:55 +01:00
|
|
|
arrays. The python proxy encodes the data as base64 so that the
|
|
|
|
Javascript client can decode the data as an integer array.
|
2010-04-19 02:53:54 +01:00
|
|
|
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-07-16 02:18:39 +01:00
|
|
|
### Quick Start
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-07-16 02:18:39 +01:00
|
|
|
* Use the launch script to start a mini-webserver and the WebSockets
|
|
|
|
proxy. The `--vnc` option is used to specify the location of
|
|
|
|
a running VNC server:
|
|
|
|
|
|
|
|
`./utils/launch.sh --vnc localhost:5901`
|
|
|
|
|
|
|
|
* Point your browser to the cut-and-paste URL that is output by the
|
|
|
|
launch script. Enter a password if the VNC server has one
|
|
|
|
configured. Hit the Connect button and enjoy!
|
|
|
|
|
|
|
|
|
|
|
|
### Advanced usage
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-06-14 20:34:05 +01:00
|
|
|
* To encrypt the traffic using the WebSocket 'wss://' URI scheme you
|
2010-07-16 02:18:39 +01:00
|
|
|
need to generate a certificate for the proxy to load. By default the
|
2010-07-16 02:22:55 +01:00
|
|
|
proxy loads a certificate file name `self.pem` but the `--cert=CERT`
|
|
|
|
option can override the file name. You can generate a self-signed
|
|
|
|
certificate using openssl. When asked for the common name, use the
|
|
|
|
hostname of the server where the proxy will be running:
|
2010-06-14 20:34:05 +01:00
|
|
|
|
|
|
|
`openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem`
|
|
|
|
|
2010-07-16 02:18:39 +01:00
|
|
|
* `tightvnc` provide a nice startup script that can be used to run
|
|
|
|
a separate X desktop that is served by VNC. To install and run the
|
|
|
|
server under Ubuntu you would do something like this:
|
|
|
|
|
|
|
|
`sudo apt-get install tightvncserver`
|
2010-07-26 23:41:19 +01:00
|
|
|
|
2010-04-19 02:53:54 +01:00
|
|
|
`vncserver :1`
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-07-16 02:18:39 +01:00
|
|
|
The VNC server will run in the background. The port that it runs
|
|
|
|
on is the display number + 5900 (i.e. 5901 in the case above).
|
|
|
|
|
|
|
|
* `x11vnc` can be used to share your current X desktop. Note that if
|
|
|
|
you run noVNC on the X desktop you are connecting to via VNC you
|
|
|
|
will get a neat hall of mirrors effect, but the the client and
|
|
|
|
server will fight over the mouse.
|
|
|
|
|
|
|
|
`sudo apt-get install x11vnc`
|
2010-07-26 23:41:19 +01:00
|
|
|
|
2010-07-16 02:18:39 +01:00
|
|
|
`x11vnc -forever -display :0`
|
|
|
|
|
|
|
|
Without the `-forever` option, x11vnc will exit after the first
|
|
|
|
disconnect. The `-display` option indicates the exiting X display to
|
|
|
|
share. The port that it runs on is the display number + 5900 (i.e.
|
|
|
|
5900 in the case above).
|
|
|
|
|
|
|
|
* To run the python proxy directly without using launch script (to
|
|
|
|
pass additional options for example):
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-07-16 02:22:55 +01:00
|
|
|
`./utils/wsproxy.py -f source_port target_addr:target_port`
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-06-17 23:50:15 +01:00
|
|
|
`./utils/wsproxy.py -f 8787 localhost:5901`
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-07-16 02:18:39 +01:00
|
|
|
* To run the mini python web server without the launch script:
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-06-07 18:47:02 +01:00
|
|
|
`./utils/web.py PORT`
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-06-07 18:47:02 +01:00
|
|
|
`./utils/web.py 8080`
|
2010-04-07 03:34:56 +01:00
|
|
|
|
|
|
|
* Point your web browser at http://localhost:8080/vnc.html
|
2010-07-16 02:22:55 +01:00
|
|
|
(or whatever port you used above to run the web server). Specify the
|
|
|
|
host and port where the proxy is running and the password that the
|
|
|
|
vnc server is using (if any). Hit the Connect button.
|
2010-04-07 03:34:56 +01:00
|
|
|
|
2010-05-11 22:13:52 +01:00
|
|
|
|
2010-07-02 18:02:57 +01:00
|
|
|
### Integration
|
2010-05-11 22:13:52 +01:00
|
|
|
|
|
|
|
The client is designed to be easily integrated with existing web
|
|
|
|
structure and style.
|
|
|
|
|
2010-06-03 14:39:42 +01:00
|
|
|
At a minimum you must include the `vnc.js` and `default_controls.js`
|
New API. Refactor Canvas and RFB objects.
New API:
To use the RFB object, you now must instantiate it (this allows more
than one instance of it on the same page).
rfb = new RFB(settings);
The 'settings' variable is a namespace that contains initial default
settings. These can also be set and read using 'rfb.set_FOO()' and
'rfb.get_FOO()' where FOO is the setting name. The current settings
are (and defaults) are:
- target: the DOM Canvas element to use ('VNC_canvas').
- encrypt: whether to encrypt the connection (false)
- true_color: true_color or palette (true)
- b64encode: base64 encode the WebSockets data (true)
- local_cursor: use local cursor rendering (true if supported)
- connectTimeout: milliseconds to wait for connect (2000)
- updateState: callback when RFB state changes (none)
- clipboardReceive: callback when clipboard data received (none)
The parameters to the updateState callback have also changed. The
function spec is now updateState(rfb, state, oldstate, msg):
- rfb: the RFB object that this state change is for.
- state: the new state
- oldstate: the previous state
- msg: a message associate with the state (not always set).
The clipboardReceive spec is clipboardReceive(rfb, text):
- rfb: the RFB object that this text is from.
- text: the clipboard text received.
Changes:
- The RFB and Canvas namespaces are now more proper objects. Private
implementation is no longer exposed and the public API has been made
explicit. Also, instantiation allows more than one VNC connection
on the same page (to complete this, DefaultControls will also need
this same refactoring).
- Added 'none' logging level.
- Removed automatic stylesheet selection workaround in util.js and
move it to defaultcontrols so that it doesn't interfere with
intergration.
- Also, some major JSLinting.
- Fix input, canvas, and cursor tests to work with new model.
2010-08-02 23:07:27 +01:00
|
|
|
scripts and call DefaultControls.load(). For example:
|
2010-05-11 22:13:52 +01:00
|
|
|
|
2010-07-01 15:53:38 +01:00
|
|
|
<head>
|
|
|
|
<script src='include/vnc.js'></script>
|
|
|
|
<script src="include/default_controls.js"></script>
|
|
|
|
</head>
|
2010-05-11 22:13:52 +01:00
|
|
|
<body>
|
|
|
|
<div id='vnc'>Loading</div>
|
New API. Refactor Canvas and RFB objects.
New API:
To use the RFB object, you now must instantiate it (this allows more
than one instance of it on the same page).
rfb = new RFB(settings);
The 'settings' variable is a namespace that contains initial default
settings. These can also be set and read using 'rfb.set_FOO()' and
'rfb.get_FOO()' where FOO is the setting name. The current settings
are (and defaults) are:
- target: the DOM Canvas element to use ('VNC_canvas').
- encrypt: whether to encrypt the connection (false)
- true_color: true_color or palette (true)
- b64encode: base64 encode the WebSockets data (true)
- local_cursor: use local cursor rendering (true if supported)
- connectTimeout: milliseconds to wait for connect (2000)
- updateState: callback when RFB state changes (none)
- clipboardReceive: callback when clipboard data received (none)
The parameters to the updateState callback have also changed. The
function spec is now updateState(rfb, state, oldstate, msg):
- rfb: the RFB object that this state change is for.
- state: the new state
- oldstate: the previous state
- msg: a message associate with the state (not always set).
The clipboardReceive spec is clipboardReceive(rfb, text):
- rfb: the RFB object that this text is from.
- text: the clipboard text received.
Changes:
- The RFB and Canvas namespaces are now more proper objects. Private
implementation is no longer exposed and the public API has been made
explicit. Also, instantiation allows more than one VNC connection
on the same page (to complete this, DefaultControls will also need
this same refactoring).
- Added 'none' logging level.
- Removed automatic stylesheet selection workaround in util.js and
move it to defaultcontrols so that it doesn't interfere with
intergration.
- Also, some major JSLinting.
- Fix input, canvas, and cursor tests to work with new model.
2010-08-02 23:07:27 +01:00
|
|
|
|
|
|
|
<script>
|
|
|
|
window.onload = function () {
|
|
|
|
DefaultControls.load('vnc');
|
|
|
|
}
|
|
|
|
</script>
|
2010-05-11 22:13:52 +01:00
|
|
|
</body>
|
|
|
|
|
2010-06-03 14:39:42 +01:00
|
|
|
See `vnc.html` and `vnc_auto.html` for examples. The file
|
|
|
|
`include/plain.css` has a list of stylable elements.
|
2010-06-02 23:28:28 +01:00
|
|
|
|
|
|
|
The `vnc.js` also includes other scripts within the `include`
|
|
|
|
sub-directory. The `VNC_uri_prefix` variable can be use override the
|
2010-07-23 18:32:15 +01:00
|
|
|
URL path to the `include` sub-directory.
|
2010-07-06 18:29:37 +01:00
|
|
|
|
|
|
|
|
|
|
|
### Troubleshooting
|
|
|
|
|
|
|
|
You will need console logging support in the browser. Recent Chrome
|
|
|
|
and Opera versions have built in support. Firefox has a nice extension
|
|
|
|
called "firebug" that gives console logging support.
|
|
|
|
|
|
|
|
First, load the noVNC page with `logging=debug` added to the query string.
|
|
|
|
For example `vnc.html?logging=debug`.
|
|
|
|
|
|
|
|
Then, activate the console logger in your browser. With Chrome it can
|
|
|
|
be activate using Ctrl+Shift+J and then switching to the "Console"
|
|
|
|
tab. With firefox+firebug, it can be activated using Ctrl+F12.
|
|
|
|
|
|
|
|
Now reproduce the problem. The console log output will give more
|
|
|
|
information about what is going wrong and where in the code the
|
2010-07-23 15:25:16 +01:00
|
|
|
problem is located.
|
|
|
|
|
|
|
|
If you file a issue/bug, it is very helpful for me to have the last
|
|
|
|
page of console output leading up the problem in the issue report.
|
|
|
|
Other helpful issue/bug information: browser version, OS version,
|
|
|
|
noVNC git version, and VNC server name/version.
|