]>
Commit | Line | Data |
---|---|---|
5ba1dd78 | 1 | ## noVNC: HTML5 VNC Client |
5aeb9880 JM |
2 | |
3 | ||
5ba1dd78 | 4 | ### Description |
5aeb9880 | 5 | |
71d2426a | 6 | noVNC is a VNC client implemented using HTML5 technologies, |
b89c6db3 | 7 | specifically Canvas and WebSockets (supports 'wss://' encryption). |
5f409eee JM |
8 | noVNC is licensed under the |
9 | [LGPLv3](http://www.gnu.org/licenses/lgpl.html). | |
5aeb9880 | 10 | |
77c7a454 JM |
11 | Special thanks to [Sentry Data Systems](http://www.sentryds.com) for |
12 | sponsoring ongoing development of this project (and for employing me). | |
852ba642 | 13 | |
b4748f04 JM |
14 | Notable commits, announcements and news are posted to |
15 | @<a href="http://www.twitter.com/noVNC">noVNC</a> | |
16 | ||
17 | ||
852ba642 JM |
18 | ### Screenshots |
19 | ||
e5517ecd | 20 | Running in Chrome before and after connecting: |
600887f0 | 21 | |
e5517ecd | 22 | <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> |
5aeb9880 | 23 | |
852ba642 JM |
24 | See more screenshots <a href="http://kanaka.github.com/noVNC/screenshots.html">here</a>. |
25 | ||
26 | ||
58da507b JM |
27 | ### Projects/Companies using noVNC |
28 | ||
29 | * [Sentry Data Systems](http://www.sentryds.com): uses noVNC in the | |
30 | [Datanex Cloud Computing Platform](http://www.sentryds.com/products/datanex/). | |
31 | ||
32 | * [Ganeti Web Manager](http://code.osuosl.org/projects/ganeti-webmgr): | |
33 | Feature [#1935](http://code.osuosl.org/issues/1935). | |
34 | ||
35 | * [Archipel](http://archipelproject.org): | |
36 | [Video demo](http://antoinemercadal.fr/archipelblog/wp-content/themes/ArchipelWPTemplate/video_youtube.php?title=VNC%20Demonstration&id=te_bzW574Zo) | |
37 | ||
38 | * [openQRM](http://www.openqrm.com/): VNC plugin available | |
39 | by request. Probably included in [version | |
40 | 4.8](http://www.openqrm.com/?q=node/15). [Video | |
41 | demo](http://www.openqrm-enterprise.com/news/details/article/remote-vm-console-plugin-available.html). | |
42 | ||
43 | ||
6de07adb JM |
44 | ### Browser Requirements |
45 | ||
6de07adb JM |
46 | * HTML5 Canvas: Except for Internet Explorer, most |
47 | browsers have had Canvas support for quite some time. Internet | |
48 | Explorer 9 will have Canvas support (finally). | |
49 | ||
50 | * HTML5 WebSockets: For browsers that do not have builtin | |
51 | WebSockets support, the project includes | |
52 | <a href="http://github.com/gimite/web-socket-js">web-socket-js</a>, | |
53 | a WebSockets emulator using Adobe Flash. | |
54 | ||
55 | * Fast Javascript Engine: noVNC avoids using new Javascript | |
56 | functionality so it will run on older browsers, but decode and | |
57 | rendering happen in Javascript, so a slow Javascript engine will | |
58 | mean noVNC is painfully slow. | |
59 | ||
d4139a9b JM |
60 | * I maintain a more detailed list of browser compatibility <a |
61 | href="http://github.com/kanaka/noVNC/blob/master/docs/browsers.md">here</a>. | |
62 | ||
63 | ||
6de07adb | 64 | ### Server Requirements |
5aeb9880 | 65 | |
b89c6db3 JM |
66 | Unless you are using a VNC server with support for WebSockets |
67 | connections (only my [fork of libvncserver](http://github.com/kanaka/libvncserver) | |
68 | currently), you need to use a WebSockets to TCP socket proxy. There is | |
69 | a python proxy included ('wsproxy'). One advantage of using the proxy | |
70 | is that it has builtin support for SSL/TLS encryption (i.e. "wss://"). | |
5aeb9880 | 71 | |
1626e0f8 | 72 | There a few reasons why a proxy is required: |
5aeb9880 | 73 | |
b89c6db3 | 74 | 1. WebSockets is not a pure socket protocol. There is an initial HTTP |
1626e0f8 | 75 | like handshake to allow easy hand-off by web servers and allow |
b89c6db3 | 76 | some origin policy exchange. Also, each WebSockets frame begins |
1626e0f8 | 77 | with 0 ('\x00') and ends with 255 ('\xff'). |
d63e1462 JM |
78 | |
79 | 2. Javascript itself does not have the ability to handle pure byte | |
3b6f60be JM |
80 | arrays. The python proxy encodes the data as base64 so that the |
81 | Javascript client can decode the data as an integer array. | |
1626e0f8 | 82 | |
5aeb9880 | 83 | |
b89c6db3 | 84 | ### Quick Start |
5aeb9880 | 85 | |
b89c6db3 JM |
86 | * Use the launch script to start a mini-webserver and the WebSockets |
87 | proxy. The `--vnc` option is used to specify the location of | |
88 | a running VNC server: | |
89 | ||
90 | `./utils/launch.sh --vnc localhost:5901` | |
91 | ||
92 | * Point your browser to the cut-and-paste URL that is output by the | |
93 | launch script. Enter a password if the VNC server has one | |
94 | configured. Hit the Connect button and enjoy! | |
95 | ||
96 | ||
97 | ### Advanced usage | |
5aeb9880 | 98 | |
a4807656 | 99 | * To encrypt the traffic using the WebSocket 'wss://' URI scheme you |
b89c6db3 | 100 | need to generate a certificate for the proxy to load. By default the |
3b6f60be JM |
101 | proxy loads a certificate file name `self.pem` but the `--cert=CERT` |
102 | option can override the file name. You can generate a self-signed | |
103 | certificate using openssl. When asked for the common name, use the | |
104 | hostname of the server where the proxy will be running: | |
a4807656 JM |
105 | |
106 | `openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem` | |
107 | ||
b89c6db3 JM |
108 | * `tightvnc` provide a nice startup script that can be used to run |
109 | a separate X desktop that is served by VNC. To install and run the | |
110 | server under Ubuntu you would do something like this: | |
111 | ||
112 | `sudo apt-get install tightvncserver` | |
0af07711 | 113 | |
1626e0f8 | 114 | `vncserver :1` |
5aeb9880 | 115 | |
b89c6db3 JM |
116 | The VNC server will run in the background. The port that it runs |
117 | on is the display number + 5900 (i.e. 5901 in the case above). | |
118 | ||
119 | * `x11vnc` can be used to share your current X desktop. Note that if | |
120 | you run noVNC on the X desktop you are connecting to via VNC you | |
121 | will get a neat hall of mirrors effect, but the the client and | |
122 | server will fight over the mouse. | |
123 | ||
124 | `sudo apt-get install x11vnc` | |
0af07711 | 125 | |
b89c6db3 JM |
126 | `x11vnc -forever -display :0` |
127 | ||
128 | Without the `-forever` option, x11vnc will exit after the first | |
129 | disconnect. The `-display` option indicates the exiting X display to | |
130 | share. The port that it runs on is the display number + 5900 (i.e. | |
131 | 5900 in the case above). | |
132 | ||
133 | * To run the python proxy directly without using launch script (to | |
134 | pass additional options for example): | |
5aeb9880 | 135 | |
3b6f60be | 136 | `./utils/wsproxy.py -f source_port target_addr:target_port` |
5aeb9880 | 137 | |
14607116 | 138 | `./utils/wsproxy.py -f 8787 localhost:5901` |
5aeb9880 | 139 | |
b89c6db3 | 140 | * To run the mini python web server without the launch script: |
5aeb9880 | 141 | |
7210e79e | 142 | `./utils/web.py PORT` |
5aeb9880 | 143 | |
7210e79e | 144 | `./utils/web.py 8080` |
5aeb9880 JM |
145 | |
146 | * Point your web browser at http://localhost:8080/vnc.html | |
3b6f60be JM |
147 | (or whatever port you used above to run the web server). Specify the |
148 | host and port where the proxy is running and the password that the | |
149 | vnc server is using (if any). Hit the Connect button. | |
5aeb9880 | 150 | |
e5d60a8b JM |
151 | * If you are using python 2.3 or 2.4 and you want wsproxy to support |
152 | 'wss://' (TLS) then see the | |
153 | [wsproxy README](http://github.com/kanaka/noVNC/blob/master/utils/README.md) | |
154 | for instructions on building the ssl module. | |
155 | ||
ded9dfae | 156 | |
5ba1dd78 | 157 | ### Integration |
ded9dfae JM |
158 | |
159 | The client is designed to be easily integrated with existing web | |
160 | structure and style. | |
161 | ||
f7ec5b2c JM |
162 | At a minimum you must include the `vnc.js` and `ui.js` scripts and |
163 | call UI.load(). For example: | |
ded9dfae | 164 | |
a93c9555 JM |
165 | <head> |
166 | <script src='include/vnc.js'></script> | |
f7ec5b2c | 167 | <script src="include/ui.js"></script> |
a93c9555 | 168 | </head> |
ded9dfae JM |
169 | <body> |
170 | <div id='vnc'>Loading</div> | |
8db09746 JM |
171 | |
172 | <script> | |
173 | window.onload = function () { | |
f7ec5b2c | 174 | UI.load('vnc'); |
8db09746 JM |
175 | } |
176 | </script> | |
ded9dfae | 177 | </body> |
ded9dfae | 178 | |
4f0da9ef JM |
179 | See `vnc.html` and `vnc_auto.html` for examples. The file |
180 | `include/plain.css` has a list of stylable elements. | |
1aa95062 JM |
181 | |
182 | The `vnc.js` also includes other scripts within the `include` | |
183 | sub-directory. The `VNC_uri_prefix` variable can be use override the | |
acad10a5 | 184 | URL path to the `include` sub-directory. |
a095b382 JM |
185 | |
186 | ||
187 | ### Troubleshooting | |
188 | ||
189 | You will need console logging support in the browser. Recent Chrome | |
190 | and Opera versions have built in support. Firefox has a nice extension | |
191 | called "firebug" that gives console logging support. | |
192 | ||
193 | First, load the noVNC page with `logging=debug` added to the query string. | |
194 | For example `vnc.html?logging=debug`. | |
195 | ||
196 | Then, activate the console logger in your browser. With Chrome it can | |
197 | be activate using Ctrl+Shift+J and then switching to the "Console" | |
198 | tab. With firefox+firebug, it can be activated using Ctrl+F12. | |
199 | ||
200 | Now reproduce the problem. The console log output will give more | |
201 | information about what is going wrong and where in the code the | |
11304584 JM |
202 | problem is located. |
203 | ||
204 | If you file a issue/bug, it is very helpful for me to have the last | |
205 | page of console output leading up the problem in the issue report. | |
206 | Other helpful issue/bug information: browser version, OS version, | |
207 | noVNC git version, and VNC server name/version. |