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