vnc_lite.html

   1 <!DOCTYPE html>
   2 <html>
   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) 2012 Joel Martin
  11     Copyright (C) 2018 Samuel Mannehed for Cendio AB
  12     noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
  13     This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
  14
  15     Connect parameters are provided in query string:
  16         http://example.com/?host=HOST&port=PORT&scale=true
  17     or the fragment:
  18         http://example.com/#host=HOST&port=PORT&scale=true
  19     -->
  20     <title>noVNC</title>
  21
  22     <meta charset="utf-8">
  23
  24     <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
  25                 Remove this if you use the .htaccess -->
  26     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  27
  28     <style type="text/css">
  29
  30         body {
  31             margin: 0;
  32             background-color: dimgrey;
  33             height: 100%;
  34             display: flex;
  35             flex-direction: column;
  36         }
  37         html {
  38             height: 100%;
  39         }
  40
  41         #noVNC_status_bar {
  42             background-color: #6e84a3;
  43             width: 100%;
  44             display: flex;
  45             justify-content: space-between;
  46             border-bottom: 1px outset;
  47         }
  48         #noVNC_status {
  49             color: #ffffff;
  50             font: bold 12px Helvetica;
  51             margin: auto;
  52         }
  53
  54         #noVNC_left_dummy_elem {
  55             flex: 1;
  56         }
  57
  58         #noVNC_buttons {
  59             padding: 1px;
  60             flex: 1;
  61             display: flex;
  62             justify-content: flex-end;
  63         }
  64
  65     </style>
  66
  67     <!-- Promise polyfill for IE11 -->
  68     <script src="vendor/promise.js"></script>
  69
  70     <!-- ES2015/ES6 modules polyfill -->
  71     <script type="module">
  72         window._noVNC_has_module_support = true;
  73     </script>
  74     <script>
  75         window.addEventListener("load", function() {
  76             if (window._noVNC_has_module_support) return;
  77             var loader = document.createElement("script");
  78             loader.src = "vendor/browser-es-module-loader/dist/browser-es-module-loader.js";
  79             document.head.appendChild(loader);
  80         });
  81     </script>
  82
  83     <!-- actual script modules -->
  84     <script type="module" crossorigin="anonymous">
  85         // WebUtil contains helper functions for browser features
  86         import * as WebUtil from './app/webutil.js';
  87         // RFB holds the API to connect and communicate with a VNC server
  88         import RFB from './core/rfb.js';
  89
  90         var rfb;
  91         var desktopName;
  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         // When this function is called, the server requires
 100         // credentials to authenticate
 101         function credentials(e) {
 102             // Let's create a password input
 103             var form = document.createElement('form');
 104             form.innerHTML = '<label></label>';
 105             form.innerHTML += '<input type=password size=10 id="password_input">';
 106             form.onsubmit = setPassword;
 107
 108             // Bypass status() because it sets text content
 109             // which doesn't allow adding elements
 110             document.getElementById('noVNC_status').innerHTML = '';
 111             document.getElementById('noVNC_status').appendChild(form);
 112             document.getElementById('noVNC_status').querySelector('label').textContent = 'Password Required: ';
 113         }
 114
 115         // Send the credentials from the input element
 116         function setPassword() {
 117             rfb.sendCredentials({ password: document.getElementById('password_input').value });
 118             return false;
 119         }
 120
 121         // Since most operating systems will catch Ctrl+Alt+Del
 122         // before they get a chance to be intercepted by the browser,
 123         // we provide a way to emulate this key sequence.
 124         function sendCtrlAltDel() {
 125             rfb.sendCtrlAltDel();
 126             return false;
 127         }
 128         // Show a status text in the top bar
 129         function status(text) {
 130             document.getElementById('noVNC_status').textContent = text;
 131         }
 132
 133         // When this function is called we have
 134         // successfully connected to a server
 135         function connected(e) {
 136             document.getElementById('sendCtrlAltDelButton').disabled = false;
 137             status("Connected to " + desktopName);
 138         }
 139
 140         // This function is called when we are disconnected
 141         function disconnected(e) {
 142             document.getElementById('sendCtrlAltDelButton').disabled = true;
 143             if (e.detail.clean) {
 144                 status("Disconnected");
 145             } else {
 146                 status("Something went wrong, connection is closed");
 147             }
 148         }
 149
 150         document.getElementById('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
 151
 152         // Read parameters specified in the URL (query string or fragment)
 153         // By default, use the host and port of server that served this file
 154         var host = WebUtil.getConfigVar('host', window.location.hostname);
 155         var port = WebUtil.getConfigVar('port', window.location.port);
 156         var password = WebUtil.getConfigVar('password', '');
 157         var path = WebUtil.getConfigVar('path', 'websockify');
 158
 159         // | | |         | | |
 160         // | | | Connect | | |
 161         // v v v         v v v
 162         (function() {
 163
 164             status("Connecting");
 165
 166             // Build the websocket URL used to connect
 167             var url;
 168             if (window.location.protocol === "https:") {
 169                 url = 'wss';
 170             } else {
 171                 url = 'ws';
 172             }
 173             url += '://' + host;
 174             if(port) {
 175                 url += ':' + port;
 176             }
 177             url += '/' + path;
 178
 179             // Creating a new RFB object will start a new connection
 180             rfb = new RFB(document.body, url,
 181                           { credentials: { password: password } });
 182
 183             // Add listeners to important events from the RFB module
 184             rfb.addEventListener("connect",  connected);
 185             rfb.addEventListener("disconnect", disconnected);
 186             rfb.addEventListener("credentialsrequired", credentials);
 187             rfb.addEventListener("desktopname", updateDesktopName);
 188
 189             // Set parameters that can be changed on an active connection
 190             rfb.viewOnly = WebUtil.getConfigVar('view_only', false);
 191             rfb.scaleViewport = WebUtil.getConfigVar('scale', false);
 192         })();
 193     </script>
 194 </head>
 195
 196 <body>
 197   <div id="noVNC_status_bar">
 198     <div id="noVNC_left_dummy_elem"></div>
 199     <div id="noVNC_status">Loading</div>
 200     <div id="noVNC_buttons">
 201       <input type=button value="Send CtrlAltDel"
 202              id="sendCtrlAltDelButton">
 203     </div>
 204   </div>
 205 </body>
 206 </html>