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