Web based VNC client with AntOS docker image

Long time ago i developed WVNC, a simple protocol based on Web socket that allows to connect to VNC server from browser. WVNC consist of

• A server side plugin (for Antd web server) that (1) acts as a bridge between VNC server and the web server; (2) defines the base protocol on top of websocket for streaming screen data and events to client. JPEG is used as data compression to reduce stream bandwidth.
• A client side API called wvnc.js that implements the protocol defined by the server plugin, decodes JPEG data from the server and renders the data on HTML5 canvas

The protocol works really well for my personal need as i used it on a daily basis to access to my VNC home server from work :), using nothing but the web browser. However, setting up WVNC from scratch is not a trivial task, as it depends on my Antd server which is not a popular web server, thus Stack overflow is not an option :). I've received many contacts from readers on the howto instruction.

As WVNC is finally a part of AntOS eco-system, and AntOS is available as an all-in-one docker image, anyone can now easily run their own web-base VNC client via a single command line without the headache of building every thing from scratch.

1. Setup and run AntOS using docker

The all-in-one AntOS docker image contains every thing needed to host an AntOS VDE system with the WVNC server side plugin pre-installed. It is really easy to setup and run a container of this image since every thing is pre-configured in the image.

First we need to created a working directory that will store all user data, this directory should be on a persistent storage, but for the sake of example, in this post, the working directory will be on the /tmp partition:

mkdir /tmp/antos

Then, execute the following command

docker run \
    -p 8080:80 \
    --rm \
    -v /tmp/antos:/app \
    -e ANTOS_USER=demo \
    -e ANTOS_PASSWORD=demo \
    -it xsangle/antosaio:2.0.x

This command will run an AntOS docker container and mount the working directory to the container as a volume. Change /tmp/antos to your own working directory. The default credential used connect to AntOS VDE can be configured via the environment variables ANTOS_USER ans ANTOS_PASSWORD which are demo/demo in this example.

If one wants to run a container with docker compose, create the following docker-compose.yml file:

version: '3.7'
services:
  antos:
    image: xsangle/antosaio:2.0.x
    privileged: true
    restart: always
    ports:
      - 8080:80
    container_name: antos_demo
    deploy:
      resources:
        limits:
          memory: 200m
          cpus: '0.5'
    hostname: demo
    environment:
      - ANTOS_USER=demo
      - ANTOS_PASSWORD=demo
    volumes:
      - /tmp/antos/:/app

then run:

docker compose up

AntOS is now accessible via http://localhost:8080/os/ or using IP address http://MACHINE_IP:8080/os/ on browser

2. Connect to remote VNC server with the RemoteDesktop AntOS application

In AntOS VDE, after logging with the default user and password (configured in the previous step), go to the AntOS application store (Start menu > AntOS application store) and install the WVNC Remote Desktop application under the Internet category

Run the application from Start menu> Internet > WVNC Remote Desktop, the connection dialog will appear:

On the dialog enter the following information:

• WVNC Websocket: shall be ws://localhost:8080/wvnc if on local or ws://MACHINE_IP:8080/wvnc, MACHINE_IP is the IP address of the machine that run AntOS
• VNC server: is the VNC server address in form of IP_OR_HOSTNAME:PORT, the VNC server shall be accessible from the AntOS machine MACHINE_IP.
• Image quality setting: Bits per Pixels and JPEG quality

Click Connect and you are all set, the application may require you to enter VNC user name and password depending on the server setting.

If you encounter any problem, leave me a comment or open a github issue on https://github.com/lxsang/antosdk-apps