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 ### Browser Requirements
  28
  29 * HTML5 Canvas: Except for Internet Explorer, most
  30   browsers have had Canvas support for quite some time. Internet
  31   Explorer 9 will have Canvas support (finally).
  32
  33 * HTML5 WebSockets: For browsers that do not have builtin
  34   WebSockets support, the project includes
  35   <a href="http://github.com/gimite/web-socket-js">web-socket-js</a>,
  36   a WebSockets emulator using Adobe Flash.
  37
  38 * Fast Javascript Engine: noVNC avoids using new Javascript
  39   functionality so it will run on older browsers, but decode and
  40   rendering happen in Javascript, so a slow Javascript engine will
  41   mean noVNC is painfully slow.
  42
  43 * I maintain a more detailed list of browser compatibility <a
  44   href="http://github.com/kanaka/noVNC/blob/master/docs/browsers.md">here</a>.
  45
  46
  47 ### Server Requirements
  48
  49 Unless you are using a VNC server with support for WebSockets
  50 connections (only my [fork of libvncserver](http://github.com/kanaka/libvncserver)
  51 currently), you need to use a WebSockets to TCP socket proxy. There is
  52 a python proxy included ('wsproxy'). One advantage of using the proxy
  53 is that it has builtin support for SSL/TLS encryption (i.e. "wss://").
  54
  55 There a few reasons why a proxy is required:
  56
  57   1. WebSockets is not a pure socket protocol. There is an initial HTTP
  58      like handshake to allow easy hand-off by web servers and allow
  59      some origin policy exchange. Also, each WebSockets frame begins
  60      with 0 ('\x00') and ends with 255 ('\xff').
  61
  62   2. Javascript itself does not have the ability to handle pure byte
  63      arrays. The python proxy encodes the data as base64 so that the
  64      Javascript client can decode the data as an integer array.
  65
  66
  67 ### Quick Start
  68
  69 * Use the launch script to start a mini-webserver and the WebSockets
  70   proxy. The `--vnc` option is used to specify the location of
  71   a running VNC server:
  72
  73     `./utils/launch.sh --vnc localhost:5901`
  74
  75 * Point your browser to the cut-and-paste URL that is output by the
  76   launch script. Enter a password if the VNC server has one
  77   configured. Hit the Connect button and enjoy!
  78
  79
  80 ### Advanced usage
  81
  82 * To encrypt the traffic using the WebSocket 'wss://' URI scheme you
  83   need to generate a certificate for the proxy to load. By default the
  84   proxy loads a certificate file name `self.pem` but the `--cert=CERT`
  85   option can override the file name. You can generate a self-signed
  86   certificate using openssl. When asked for the common name, use the
  87   hostname of the server where the proxy will be running:
  88
  89     `openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem`
  90
  91 * `tightvnc` provide a nice startup script that can be used to run
  92   a separate X desktop that is served by VNC. To install and run the
  93   server under Ubuntu you would do something like this:
  94
  95     `sudo apt-get install tightvncserver`
  96
  97     `vncserver :1`
  98
  99     The VNC server will run in the background. The port that it runs
 100     on is the display number + 5900 (i.e. 5901 in the case above).
 101
 102 * `x11vnc` can be used to share your current X desktop. Note that if
 103   you run noVNC on the X desktop you are connecting to via VNC you
 104   will get a neat hall of mirrors effect, but the the client and
 105   server will fight over the mouse.
 106
 107     `sudo apt-get install x11vnc`
 108
 109     `x11vnc -forever -display :0`
 110
 111   Without the `-forever` option, x11vnc will exit after the first
 112   disconnect. The `-display` option indicates the exiting X display to
 113   share. The port that it runs on is the display number + 5900 (i.e.
 114   5900 in the case above).
 115
 116 * To run the python proxy directly without using launch script (to
 117   pass additional options for example):
 118
 119     `./utils/wsproxy.py -f source_port target_addr:target_port`
 120
 121     `./utils/wsproxy.py -f 8787 localhost:5901`
 122
 123 * To run the mini python web server without the launch script:
 124
 125     `./utils/web.py PORT`
 126
 127     `./utils/web.py 8080`
 128
 129 * Point your web browser at http://localhost:8080/vnc.html
 130  (or whatever port you used above to run the web server). Specify the
 131  host and port where the proxy is running and the password that the
 132  vnc server is using (if any). Hit the Connect button.
 133
 134 * If you are using python 2.3 or 2.4 and you want wsproxy to support
 135   'wss://' (TLS) then see the
 136   [wsproxy README](http://github.com/kanaka/noVNC/blob/master/utils/README.md)
 137   for instructions on building the ssl module.
 138
 139
 140 ### Integration
 141
 142 The client is designed to be easily integrated with existing web
 143 structure and style.
 144
 145 At a minimum you must include the `vnc.js` and `ui.js` scripts and
 146 call UI.load(). For example:
 147
 148     <head>
 149         <script src='include/vnc.js'></script>
 150         <script src="include/ui.js"></script>
 151     </head>
 152     <body>
 153         <div id='vnc'>Loading</div>
 154
 155         <script>
 156             window.onload = function () {
 157                 UI.load('vnc');
 158             }
 159         </script>
 160     </body>
 161
 162 See `vnc.html` and `vnc_auto.html` for examples. The file
 163 `include/plain.css` has a list of stylable elements.
 164
 165 The `vnc.js` also includes other scripts within the `include`
 166 sub-directory. The `VNC_uri_prefix` variable can be use override the
 167 URL path to the `include` sub-directory.
 168
 169
 170 ### Troubleshooting
 171
 172 You will need console logging support in the browser. Recent Chrome
 173 and Opera versions have built in support. Firefox has a nice extension
 174 called "firebug" that gives console logging support.
 175
 176 First, load the noVNC page with `logging=debug` added to the query string.
 177 For example `vnc.html?logging=debug`.
 178
 179 Then, activate the console logger in your browser.  With Chrome it can
 180 be activate using Ctrl+Shift+J and then switching to the "Console"
 181 tab. With firefox+firebug, it can be activated using Ctrl+F12.
 182
 183 Now reproduce the problem. The console log output will give more
 184 information about what is going wrong and where in the code the
 185 problem is located.
 186
 187 If you file a issue/bug, it is very helpful for me to have the last
 188 page of console output leading up the problem in the issue report.
 189 Other helpful issue/bug information: browser version, OS version,
 190 noVNC git version, and VNC server name/version.