README.md

   1 ## noVNC: HTML5 VNC Client
   2
   3
   4 ### Description
   5
   6 noVNC is a VNC client implemented using HTML5 technologies,
   7 specifically Canvas and WebSockets (supports 'wss://' encryption).
   8 noVNC is licensed under the
   9 [LGPLv3](http://www.gnu.org/licenses/lgpl.html).
  10
  11 Special thanks to [Sentry Data Systems](http://www.sentryds.com) for
  12 sponsoring ongoing development of this project (and for employing me).
  13
  14 Notable commits, announcements and news are posted to
  15 @<a href="http://www.twitter.com/noVNC">noVNC</a>
  16
  17
  18 ### Screenshots
  19
  20 Running in Chrome before and after connecting:
  21
  22 <img src="http://kanaka.github.com/noVNC/img/noVNC-1.jpg" width=400>&nbsp;<img src="http://kanaka.github.com/noVNC/img/noVNC-2.jpg" width=400>
  23
  24 See more screenshots <a href="http://kanaka.github.com/noVNC/screenshots.html">here</a>.
  25
  26
  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
  44 ### Browser Requirements
  45
  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
  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
  64 ### Server Requirements
  65
  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://").
  71
  72 There a few reasons why a proxy is required:
  73
  74   1. WebSockets is not a pure socket protocol. There is an initial HTTP
  75      like handshake to allow easy hand-off by web servers and allow
  76      some origin policy exchange. Also, each WebSockets frame begins
  77      with 0 ('\x00') and ends with 255 ('\xff').
  78
  79   2. Javascript itself does not have the ability to handle pure byte
  80      arrays. The python proxy encodes the data as base64 so that the
  81      Javascript client can decode the data as an integer array.
  82
  83
  84 ### Quick Start
  85
  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
  98
  99 * To encrypt the traffic using the WebSocket 'wss://' URI scheme you
 100   need to generate a certificate for the proxy to load. By default the
 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:
 105
 106     `openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem`
 107
 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`
 113
 114     `vncserver :1`
 115
 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`
 125
 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):
 135
 136     `./utils/wsproxy.py -f source_port target_addr:target_port`
 137
 138     `./utils/wsproxy.py -f 8787 localhost:5901`
 139
 140 * To run a mini python web server without the launch script:
 141
 142     `./utils/web.py PORT`
 143
 144     `./utils/web.py 8080`
 145
 146 * Point your web browser at http://localhost:8080/vnc.html
 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.
 150
 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
 156
 157 ### Integration
 158
 159 The client is designed to be easily integrated with existing web
 160 structure and style.
 161
 162 At a minimum you must include the `vnc.js` and `ui.js` scripts and
 163 call UI.load(). For example:
 164
 165     <head>
 166         <script src='include/vnc.js'></script>
 167         <script src="include/ui.js"></script>
 168     </head>
 169     <body>
 170         <div id='vnc'>Loading</div>
 171
 172         <script>
 173             window.onload = function () {
 174                 UI.load('vnc');
 175             }
 176         </script>
 177     </body>
 178
 179 See `vnc.html` and `vnc_auto.html` for examples. The file
 180 `include/plain.css` has a list of stylable elements.
 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
 184 URL path to the `include` sub-directory.
 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
 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.