[mirror_novnc.git] / vnc_lite.html

<!DOCTYPE html>
<html lang="en">
<head>

    <!--
    noVNC example: lightweight example using minimal UI and features

    This is a self-contained file which doesn't import WebUtil or external CSS.

    Copyright (C) 2019 The noVNC Authors
    noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
    This file is licensed under the 2-Clause BSD license (see LICENSE.txt).

    Connect parameters are provided in query string:
        http://example.com/?host=HOST&port=PORT&scale=true
    -->
    <title>noVNC</title>

    <meta charset="utf-8">

    <!-- Always force latest IE rendering engine (even in intranet) &
                Chrome Frame. Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <style>

        body {
            margin: 0;
            background-color: dimgrey;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        html {
            height: 100%;
        }

        #top_bar {
            background-color: #6e84a3;
            color: white;
            font: bold 12px Helvetica;
            padding: 6px 5px 4px 5px;
            border-bottom: 1px outset;
        }
        #status {
            text-align: center;
        }
        #sendCtrlAltDelButton {
            position: fixed;
            top: 0px;
            right: 0px;
            border: 1px outset;
            padding: 5px 5px 4px 5px;
            cursor: pointer;
        }

        #screen {
            flex: 1; /* fill remaining space */
            overflow: hidden;
        }

    </style>

    <!-- Promise polyfill for IE11 -->
    <script src="vendor/promise.js"></script>

    <!-- ES2015/ES6 modules polyfill -->
    <script nomodule src="vendor/browser-es-module-loader/dist/browser-es-module-loader.js"></script>

    <!-- actual script modules -->
    <script type="module" crossorigin="anonymous">
        // RFB holds the API to connect and communicate with a VNC server
        import RFB from './core/rfb.js';

        let rfb;
        let desktopName;

        // When this function is called we have
        // successfully connected to a server
        function connectedToServer(e) {
            status("Connected to " + desktopName);
        }

        // This function is called when we are disconnected
        function disconnectedFromServer(e) {
            if (e.detail.clean) {
                status("Disconnected");
            } else {
                status("Something went wrong, connection is closed");
            }
        }

        // When this function is called, the server requires
        // credentials to authenticate
        function credentialsAreRequired(e) {
            const password = prompt("Password Required:");
            rfb.sendCredentials({ password: password });
        }

        // When this function is called we have received
        // a desktop name from the server
        function updateDesktopName(e) {
            desktopName = e.detail.name;
        }

        // Since most operating systems will catch Ctrl+Alt+Del
        // before they get a chance to be intercepted by the browser,
        // we provide a way to emulate this key sequence.
        function sendCtrlAltDel() {
            rfb.sendCtrlAltDel();
            return false;
        }

        // Show a status text in the top bar
        function status(text) {
            document.getElementById('status').textContent = text;
        }

        // This function extracts the value of one variable from the
        // query string. If the variable isn't defined in the URL
        // it returns the default value instead.
        function readQueryVariable(name, defaultValue) {
            // A URL with a query parameter can look like this:
            // https://www.example.com?myqueryparam=myvalue
            //
            // Note that we use location.href instead of location.search
            // because Firefox < 53 has a bug w.r.t location.search
            const re = new RegExp('.*[?&]' + name + '=([^&#]*)'),
                  match = document.location.href.match(re);

            if (match) {
                // We have to decode the URL since want the cleartext value
                return decodeURIComponent(match[1]);
            }

            return defaultValue;
        }

        document.getElementById('sendCtrlAltDelButton')
            .onclick = sendCtrlAltDel;

        // Read parameters specified in the URL query string
        // By default, use the host and port of server that served this file
        const host = readQueryVariable('host', window.location.hostname);
        let port = readQueryVariable('port', window.location.port);
        const password = readQueryVariable('password');
        const path = readQueryVariable('path', 'websockify');

        // | | |         | | |
        // | | | Connect | | |
        // v v v         v v v

        status("Connecting");

        // Build the websocket URL used to connect
        let url;
        if (window.location.protocol === "https:") {
            url = 'wss';
        } else {
            url = 'ws';
        }
        url += '://' + host;
        if(port) {
            url += ':' + port;
        }
        url += '/' + path;

        // Creating a new RFB object will start a new connection
        rfb = new RFB(document.getElementById('screen'), url,
                      { credentials: { password: password } });

        // Add listeners to important events from the RFB module
        rfb.addEventListener("connect",  connectedToServer);
        rfb.addEventListener("disconnect", disconnectedFromServer);
        rfb.addEventListener("credentialsrequired", credentialsAreRequired);
        rfb.addEventListener("desktopname", updateDesktopName);

        // Set parameters that can be changed on an active connection
        rfb.viewOnly = readQueryVariable('view_only', false);
        rfb.scaleViewport = readQueryVariable('scale', false);
    </script>
</head>

<body>
    <div id="top_bar">
        <div id="status">Loading</div>
        <div id="sendCtrlAltDelButton">Send CtrlAltDel</div>
    </div>
    <div id="screen">
        <!-- This is where the remote screen will appear -->
    </div>
</body>
</html>
Commit	Line	Data
40f281eb	1	<!DOCTYPE html>
80c52ba7	2	<html lang="en">
e84101b3 PÅ	3	<head>
e84101b3 PÅ	4
82744aa8	5	<!--
83391ffc	6	noVNC example: lightweight example using minimal UI and features
8c2866df SM	7
	8	This is a self-contained file which doesn't import WebUtil or external CSS.
	9
412d9306	10	Copyright (C) 2019 The noVNC Authors
1d728ace	11	noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
d58f8b51	12	This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
d595e656 JM	13
d595e656 JM	14	Connect parameters are provided in query string:
51f9f009	15	http://example.com/?host=HOST&port=PORT&scale=true
d595e656	16	-->
e84101b3 PÅ	17	<title>noVNC</title>
e84101b3 PÅ	18
2aa3b5bc	19	<meta charset="utf-8">
33f5d3bd	20
78bbf6ba SM	21	<!-- Always force latest IE rendering engine (even in intranet) &
78bbf6ba SM	22	Chrome Frame. Remove this if you use the .htaccess -->
8f230f45	23	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
78bbf6ba	24
45c644a6	25	<style>
e0d4e5a1 SM	26
	27	body {
	28	margin: 0;
de79ae92	29	background-color: dimgrey;
e0d4e5a1 SM	30	height: 100%;
	31	display: flex;
	32	flex-direction: column;
	33	}
	34	html {
e0d4e5a1 SM	35	height: 100%;
	36	}
	37
8613f6f4	38	#top_bar {
de79ae92	39	background-color: #6e84a3;
011e4bff SM	40	color: white;
	41	font: bold 12px Helvetica;
	42	padding: 6px 5px 4px 5px;
de79ae92	43	border-bottom: 1px outset;
e0d4e5a1	44	}
8613f6f4	45	#status {
011e4bff	46	text-align: center;
e0d4e5a1	47	}
011e4bff SM	48	#sendCtrlAltDelButton {
	49	position: fixed;
	50	top: 0px;
	51	right: 0px;
	52	border: 1px outset;
	53	padding: 5px 5px 4px 5px;
	54	cursor: pointer;
e0d4e5a1 SM	55	}
e0d4e5a1 SM	56
1c945f81 SM	57	#screen {
	58	flex: 1; /* fill remaining space */
	59	overflow: hidden;
	60	}
	61
e0d4e5a1	62	</style>
e84101b3	63
8c2866df	64	<!-- Promise polyfill for IE11 -->
7569cdc2	65	<script src="vendor/promise.js"></script>
8c2866df	66
14ecdc62	67	<!-- ES2015/ES6 modules polyfill -->
0b51419c	68	<script nomodule src="vendor/browser-es-module-loader/dist/browser-es-module-loader.js"></script>
14ecdc62 FC	69
14ecdc62 FC	70	<!-- actual script modules -->
bf826444	71	<script type="module" crossorigin="anonymous">
8c2866df	72	// RFB holds the API to connect and communicate with a VNC server
7569cdc2	73	import RFB from './core/rfb.js';
6f4b1e40	74
25551b6b SM	75	let rfb;
25551b6b SM	76	let desktopName;
8db09746	77
26d51e49 SM	78	// When this function is called we have
	79	// successfully connected to a server
	80	function connectedToServer(e) {
26d51e49 SM	81	status("Connected to " + desktopName);
	82	}
	83
	84	// This function is called when we are disconnected
	85	function disconnectedFromServer(e) {
26d51e49 SM	86	if (e.detail.clean) {
	87	status("Disconnected");
	88	} else {
	89	status("Something went wrong, connection is closed");
	90	}
3bb12056	91	}
8c2866df SM	92
	93	// When this function is called, the server requires
	94	// credentials to authenticate
c756665e	95	function credentialsAreRequired(e) {
5271e300 SM	96	const password = prompt("Password Required:");
5271e300 SM	97	rfb.sendCredentials({ password: password });
d890e864	98	}
8c2866df	99
26d51e49 SM	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
8c2866df SM	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.
63708ff5	109	function sendCtrlAltDel() {
8db09746	110	rfb.sendCtrlAltDel();
a8edf9d8	111	return false;
63708ff5	112	}
26d51e49	113
8c2866df	114	// Show a status text in the top bar
de79ae92	115	function status(text) {
8613f6f4	116	document.getElementById('status').textContent = text;
3bb12056	117	}
91308399	118
6517c498 SM	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);
6517c498 SM	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
e20f0ee9 SM	139	document.getElementById('sendCtrlAltDelButton')
e20f0ee9 SM	140	.onclick = sendCtrlAltDel;
91308399	141
6517c498	142	// Read parameters specified in the URL query string
7569cdc2	143	// By default, use the host and port of server that served this file
25551b6b SM	144	const host = readQueryVariable('host', window.location.hostname);
25551b6b SM	145	let port = readQueryVariable('port', window.location.port);
06a8f7d9	146	const password = readQueryVariable('password');
25551b6b	147	const path = readQueryVariable('path', 'websockify');
c55f05f6	148
8c2866df SM	149	// \| \| \| \| \| \|
	150	// \| \| \| Connect \| \| \|
	151	// v v v v v v
0139b256	152
25551b6b	153	status("Connecting");
91308399	154
25551b6b SM	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
1c945f81	169	rfb = new RFB(document.getElementById('screen'), url,
25551b6b SM	170	{ credentials: { password: password } });
	171
	172	// Add listeners to important events from the RFB module
c756665e SM	173	rfb.addEventListener("connect", connectedToServer);
	174	rfb.addEventListener("disconnect", disconnectedFromServer);
	175	rfb.addEventListener("credentialsrequired", credentialsAreRequired);
25551b6b SM	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);
7569cdc2 SR	181	</script>
	182	</head>
	183
178bf8ec	184	<body>
8613f6f4 SM	185	<div id="top_bar">
	186	<div id="status">Loading</div>
	187	<div id="sendCtrlAltDelButton">Send CtrlAltDel</div>
	188	</div>
1c945f81 SM	189	<div id="screen">
	190	<!-- This is where the remote screen will appear -->
	191	</div>
178bf8ec	192	</body>
91308399	193	</html>