vnc_lite.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4
   5     <!--
   6     noVNC example: lightweight example using minimal UI and features
   7
   8     This is a self-contained file which doesn't import WebUtil or external CSS.
   9
  10     Copyright (C) 2019 The noVNC Authors
  11     noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
  12     This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
  13
  14     Connect parameters are provided in query string:
  15         http://example.com/?host=HOST&port=PORT&scale=true
  16     -->
  17     <title>noVNC</title>
  18
  19     <meta charset="utf-8">
  20
  21     <style>
  22
  23         body {
  24             margin: 0;
  25             background-color: dimgrey;
  26             height: 100%;
  27             display: flex;
  28             flex-direction: column;
  29         }
  30         html {
  31             height: 100%;
  32         }
  33
  34         #top_bar {
  35             background-color: #6e84a3;
  36             color: white;
  37             font: bold 12px Helvetica;
  38             padding: 6px 5px 4px 5px;
  39             border-bottom: 1px outset;
  40         }
  41         #status {
  42             text-align: center;
  43         }
  44         #sendCtrlAltDelButton {
  45             position: fixed;
  46             top: 0px;
  47             right: 0px;
  48             border: 1px outset;
  49             padding: 5px 5px 4px 5px;
  50             cursor: pointer;
  51         }
  52
  53         #screen {
  54             flex: 1; /* fill remaining space */
  55             overflow: hidden;
  56         }
  57
  58     </style>
  59
  60     <!-- Promise polyfill for IE11 -->
  61     <script src="vendor/promise.js"></script>
  62
  63     <!-- ES2015/ES6 modules polyfill -->
  64     <script nomodule src="vendor/browser-es-module-loader/dist/browser-es-module-loader.js"></script>
  65
  66     <!-- actual script modules -->
  67     <script type="module" crossorigin="anonymous">
  68         // RFB holds the API to connect and communicate with a VNC server
  69         import RFB from './core/rfb.js';
  70
  71         let rfb;
  72         let desktopName;
  73
  74         // When this function is called we have
  75         // successfully connected to a server
  76         function connectedToServer(e) {
  77             status("Connected to " + desktopName);
  78         }
  79
  80         // This function is called when we are disconnected
  81         function disconnectedFromServer(e) {
  82             if (e.detail.clean) {
  83                 status("Disconnected");
  84             } else {
  85                 status("Something went wrong, connection is closed");
  86             }
  87         }
  88
  89         // When this function is called, the server requires
  90         // credentials to authenticate
  91         function credentialsAreRequired(e) {
  92             const password = prompt("Password Required:");
  93             rfb.sendCredentials({ password: password });
  94         }
  95
  96         // When this function is called we have received
  97         // a desktop name from the server
  98         function updateDesktopName(e) {
  99             desktopName = e.detail.name;
 100         }
 101
 102         // Since most operating systems will catch Ctrl+Alt+Del
 103         // before they get a chance to be intercepted by the browser,
 104         // we provide a way to emulate this key sequence.
 105         function sendCtrlAltDel() {
 106             rfb.sendCtrlAltDel();
 107             return false;
 108         }
 109
 110         // Show a status text in the top bar
 111         function status(text) {
 112             document.getElementById('status').textContent = text;
 113         }
 114
 115         // This function extracts the value of one variable from the
 116         // query string. If the variable isn't defined in the URL
 117         // it returns the default value instead.
 118         function readQueryVariable(name, defaultValue) {
 119             // A URL with a query parameter can look like this:
 120             // https://www.example.com?myqueryparam=myvalue
 121             //
 122             // Note that we use location.href instead of location.search
 123             // because Firefox < 53 has a bug w.r.t location.search
 124             const re = new RegExp('.*[?&]' + name + '=([^&#]*)'),
 125                   match = document.location.href.match(re);
 126
 127             if (match) {
 128                 // We have to decode the URL since want the cleartext value
 129                 return decodeURIComponent(match[1]);
 130             }
 131
 132             return defaultValue;
 133         }
 134
 135         document.getElementById('sendCtrlAltDelButton')
 136             .onclick = sendCtrlAltDel;
 137
 138         // Read parameters specified in the URL query string
 139         // By default, use the host and port of server that served this file
 140         const host = readQueryVariable('host', window.location.hostname);
 141         let port = readQueryVariable('port', window.location.port);
 142         const password = readQueryVariable('password');
 143         const path = readQueryVariable('path', 'websockify');
 144
 145         // | | |         | | |
 146         // | | | Connect | | |
 147         // v v v         v v v
 148
 149         status("Connecting");
 150
 151         // Build the websocket URL used to connect
 152         let url;
 153         if (window.location.protocol === "https:") {
 154             url = 'wss';
 155         } else {
 156             url = 'ws';
 157         }
 158         url += '://' + host;
 159         if(port) {
 160             url += ':' + port;
 161         }
 162         url += '/' + path;
 163
 164         // Creating a new RFB object will start a new connection
 165         rfb = new RFB(document.getElementById('screen'), url,
 166                       { credentials: { password: password } });
 167
 168         // Add listeners to important events from the RFB module
 169         rfb.addEventListener("connect",  connectedToServer);
 170         rfb.addEventListener("disconnect", disconnectedFromServer);
 171         rfb.addEventListener("credentialsrequired", credentialsAreRequired);
 172         rfb.addEventListener("desktopname", updateDesktopName);
 173
 174         // Set parameters that can be changed on an active connection
 175         rfb.viewOnly = readQueryVariable('view_only', false);
 176         rfb.scaleViewport = readQueryVariable('scale', false);
 177     </script>
 178 </head>
 179
 180 <body>
 181     <div id="top_bar">
 182         <div id="status">Loading</div>
 183         <div id="sendCtrlAltDelButton">Send CtrlAltDel</div>
 184     </div>
 185     <div id="screen">
 186         <!-- This is where the remote screen will appear -->
 187     </div>
 188 </body>
 189 </html>