VNC client web application
Go to file
Jesper Dam 24a6d8bbf6 Standalone implementation of new keyboard handling
To run unit tests:
$ cd noVNC/tests
$ npm install mocha
$ npm install chai
<open keyboard-tests.html in a browser>

To manually test:
<open keytest.html in a browser>

Design overview:

The big complex browser-dependent keyboard input events are replaced by custom
objects containing only the data we put there. These objects always have a
'keyId' property, which is mainly used to compare events, to determine if
they represent the same key (in order to match keydown/keypress/keyup
events for the same key together), and do not have a 'keysym' property
until we know that the specified keysym should be sent to the VNC server.
(In other words, even if we know which keysym a keypress represents, a
'keysym' property is not added to the object until we also know that the
keysym should be sent as-is to the VNC server.

Modifiers are divided into two groups: char modifiers and shortcut
modifiers. The latter never have an effect in themselves, but an
application may react to them to implement keyboard shortcuts (CTRL-C for
example). The former *may* be used to transform the character they are
combined with, and in those cases, the modifier press itself should not be
sent to the VNC server. For example, AltGr on European keyboards can be
combined with many, but not all, keys, to produce different characters.

The new keyboard handling is effectively a pipeline where each stage
performs a single well-defined transformation to clean up the input and
eliminate browser quirks. It can easily be extended with new stages, but
currently consists of the following:

1. KeyEventDecoder: takes the raw keydown/keyup/keypress event sent by the
browser, and converts it to our custom event wrapper, adding some hints
for later stages. If we get a keydown event, and we can't rely on getting
a subsequent keypress with more accurate information, we also try to
determine the keysym here. Also uses a ModifierSync object to keep track
of the state of modifier keys, and insert fake events to compensate when
the browser forgets to generate modifier key events.

2. VerifyCharModifier: When a char modifier is combined with another key,
we need to know if this creates a new keypress (for example AltGr + 2 on a
DK keyboard yields @), or if it has no effect. This stage handles this by
"stalling" the pipeline in cases where this is uncertain, giving us time
to see if a keypress event is coming.

3. TrackKeyState: since some browsers forget to send keyup events, we need
to keep track of which keys are currently down. This also means we need to
"collapse" keydown and keypress events into one: only one of them should
result in an event sent to the VNC server.

4. EscapeModifiers: when a char modifier is used to generate a character
(say, AltGr creating a @), we need to "undo" the modifier itself while
sending the character - the VNC server should see the sequence
keyup(AltGr), keydown(@), keydown(AltGr), keyup(@).

the commenting!
2013-10-24 11:13:14 +02:00
debian Remove references to wsproxy. 2013-04-15 12:22:34 -05:00
docs Remove references to wsproxy. 2013-04-15 12:22:34 -05:00
images Formatting. Image renames/cleanup. 2011-09-29 09:32:09 -05:00
include Re-fix pull req #245: 2013-04-25 09:07:09 +02:00
src Standalone implementation of new keyboard handling 2013-10-24 11:13:14 +02:00
tests Standalone implementation of new keyboard handling 2013-10-24 11:13:14 +02:00
utils Remove references to wsproxy. 2013-04-15 12:22:34 -05:00
.gitignore Standalone implementation of new keyboard handling 2013-10-24 11:13:14 +02:00
.gitmodules Add gimite/web-socket-js submodule for DFSG compliance. 2013-04-12 08:21:33 -05:00
LICENSE.txt Change noVNC license to from LGPLv3 to MPL 2.0 2012-10-15 13:35:00 -05:00
README.md Change noVNC license to from LGPLv3 to MPL 2.0 2012-10-15 13:35:00 -05:00
favicon.ico Add logo, favicon. 2011-02-03 11:04:32 -06:00
vnc.html Move over comment about URL connect parameters from vnc_auto.html. 2013-04-05 09:29:08 +02:00
vnc_auto.html Detect port properly in vnc_auto.html when used on port 80 or 443. 2013-04-13 18:45:56 +10:00

README.md

noVNC: HTML5 VNC Client

Description

noVNC is a HTML5 VNC client that runs well in any modern browser including mobile browsers (iPhone/iPad and Android).

More than 16 companies/projects have integrated noVNC into their products including Ganeti Web Manager, OpenStack, and OpenNebula. See the Projects and Companies wiki page for more complete list.

News/help/contact

Notable commits, announcements and news are posted to @noVNC

If you are a noVNC developer/integrator/user (or want to be) please join the noVNC discussion group

Bugs and feature requests can be submitted via github issues. If you are looking for a place to start contributing to noVNC, a good place to start would be the issues that I have marked as "patchwelcome".

If you want to show appreciation for noVNC you could buy something off my Amazon wishlist or you could donate to a great non-profits such as: Compassion International, SIL, Habitat for Humanity, Electronic Frontier Foundation, Against Malaria Foundation, Nothing But Nets, etc.

Features

  • Supports all modern browsers including mobile (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 scolling modes for large remote screens
  • Easy site integration and theming (3 example themes included)
  • Licensed under the MPL 2.0

Screenshots

Running in Chrome before and after connecting:

 

See more screenshots here.

Browser Requirements

  • HTML5 Canvas (with createImageData): Chrome, Firefox 3.6+, iOS Safari, Opera 11+, Internet Explorer 9+, etc.

  • HTML5 WebSockets: For browsers that do not have builtin WebSockets support, the project includes web-socket-js, a WebSockets emulator using Adobe Flash. iOS 4.2+ has built-in WebSocket support.

  • Fast Javascript Engine: this is not strictly a requirement, but without a fast Javascript engine, noVNC might be painfully slow.

  • I maintain a more detailed browser compatibility list here.

Server Requirements

Unless you are using a VNC server with support for WebSockets connections (such as x11vnc/libvncserver or PocketVNC), you need to use a WebSockets to TCP socket proxy. There is a python proxy included ('websockify').

Quick Start

  • Use the launch script to start a mini-webserver and the WebSockets proxy (websockify). 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!

Other Pages

Authors/Contributors

  • noVNC : Joel Martin (github.com/kanaka)

    • UI and Icons : Chris Gordon
    • Original Logo : Michael Sersen
    • tight encoding : Michael Tinglof (Mercuri.ca)
  • Included libraries:

    • web-socket-js : Hiroshi Ichikawa (github.com/gimite/web-socket-js)
    • as3crypto : Henri Torgemane (code.google.com/p/as3crypto)
    • base64 : Martijn Pieters (Digital Creations 2), Samuel Sieb (sieb.net)
    • jsunzip : Erik Moller (github.com/operasoftware/jsunzip),
    • tinflate : Joergen Ibsen (ibsensoftware.com)
    • DES : Dave Zimmerman (Widget Workshop), Jef Poskanzer (ACME Labs)