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) 2018 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,chrome=1">
  24
  25     <style type="text/css">
  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 type="module">
  69         window._noVNC_has_module_support = true;
  70     </script>
  71     <script>
  72         window.addEventListener("load", function() {
  73             if (window._noVNC_has_module_support) return;
  74             const loader = document.createElement("script");
  75             loader.src = "vendor/browser-es-module-loader/dist/" +
  76                 "browser-es-module-loader.js";
  77             document.head.appendChild(loader);
  78         });
  79     </script>
  80
  81     <!-- actual script modules -->
  82     <script type="module" crossorigin="anonymous">
  83         // RFB holds the API to connect and communicate with a VNC server
  84         import RFB from './core/rfb.js';
  85
  86         let rfb;
  87         let desktopName;
  88
  89         // When this function is called we have
  90         // successfully connected to a server
  91         function connectedToServer(e) {
  92             status("Connected to " + desktopName);
  93         }
  94
  95         // This function is called when we are disconnected
  96         function disconnectedFromServer(e) {
  97             if (e.detail.clean) {
  98                 status("Disconnected");
  99             } else {
 100                 status("Something went wrong, connection is closed");
 101             }
 102         }
 103
 104         // When this function is called, the server requires
 105         // credentials to authenticate
 106         function credentialsAreRequired(e) {
 107             const password = prompt("Password Required:");
 108             rfb.sendCredentials({ password: password });
 109         }
 110
 111         // When this function is called we have received
 112         // a desktop name from the server
 113         function updateDesktopName(e) {
 114             desktopName = e.detail.name;
 115         }
 116
 117         // Since most operating systems will catch Ctrl+Alt+Del
 118         // before they get a chance to be intercepted by the browser,
 119         // we provide a way to emulate this key sequence.
 120         function sendCtrlAltDel() {
 121             rfb.sendCtrlAltDel();
 122             return false;
 123         }
 124
 125         // Show a status text in the top bar
 126         function status(text) {
 127             document.getElementById('status').textContent = text;
 128         }
 129
 130         // This function extracts the value of one variable from the
 131         // query string. If the variable isn't defined in the URL
 132         // it returns the default value instead.
 133         function readQueryVariable(name, defaultValue) {
 134             // A URL with a query parameter can look like this:
 135             // https://www.example.com?myqueryparam=myvalue
 136             //
 137             // Note that we use location.href instead of location.search
 138             // because Firefox < 53 has a bug w.r.t location.search
 139             const re = new RegExp('.*[?&]' + name + '=([^&#]*)'),
 140                   match = document.location.href.match(re);
 141             if (typeof defaultValue === 'undefined') { defaultValue = null; }
 142
 143             if (match) {
 144                 // We have to decode the URL since want the cleartext value
 145                 return decodeURIComponent(match[1]);
 146             }
 147
 148             return defaultValue;
 149         }
 150
 151         document.getElementById('sendCtrlAltDelButton')
 152             .onclick = sendCtrlAltDel;
 153
 154         // Read parameters specified in the URL query string
 155         // By default, use the host and port of server that served this file
 156         const host = readQueryVariable('host', window.location.hostname);
 157         let port = readQueryVariable('port', window.location.port);
 158         const password = readQueryVariable('password', '');
 159         const path = readQueryVariable('path', 'websockify');
 160
 161         // | | |         | | |
 162         // | | | Connect | | |
 163         // v v v         v v v
 164
 165         status("Connecting");
 166
 167         // Build the websocket URL used to connect
 168         let url;
 169         if (window.location.protocol === "https:") {
 170             url = 'wss';
 171         } else {
 172             url = 'ws';
 173         }
 174         url += '://' + host;
 175         if(port) {
 176             url += ':' + port;
 177         }
 178         url += '/' + path;
 179
 180         // Creating a new RFB object will start a new connection
 181         rfb = new RFB(document.getElementById('screen'), url,
 182                       { credentials: { password: password } });
 183
 184         // Add listeners to important events from the RFB module
 185         rfb.addEventListener("connect",  connectedToServer);
 186         rfb.addEventListener("disconnect", disconnectedFromServer);
 187         rfb.addEventListener("credentialsrequired", credentialsAreRequired);
 188         rfb.addEventListener("desktopname", updateDesktopName);
 189
 190         // Set parameters that can be changed on an active connection
 191         rfb.viewOnly = readQueryVariable('view_only', false);
 192         rfb.scaleViewport = readQueryVariable('scale', false);
 193     </script>
 194 </head>
 195
 196 <body>
 197     <div id="top_bar">
 198         <div id="status">Loading</div>
 199         <div id="sendCtrlAltDelButton">Send CtrlAltDel</div>
 200     </div>
 201     <div id="screen">
 202         <!-- This is where the remote screen will appear -->
 203     </div>
 204 </body>
 205 </html>