GUACAMOLE-250: Add example project demonstrating in-browser recording playback.
This commit is contained in:
Michael Jumper committed
1 parent
79c66b00f1
commit
7f5e1b80e3
8 files changed
+464
-1
No files matched your search
@@ -0,0 +1,30 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
|
||||
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
|
||||
|
||||
<!-- Basic config -->
|
||||
<welcome-file-list>
|
||||
<welcome-file>index.html</welcome-file>
|
||||
</welcome-file-list>
|
||||
|
||||
</web-app>
|
||||
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Guacamole Recording Playback (EXAMPLE)</title>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="stylesheet" type="text/css" href="playback.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Guacamole recording player -->
|
||||
<div class="player">
|
||||
|
||||
<!-- Player display -->
|
||||
<div id="display"></div>
|
||||
|
||||
<!-- Player controls -->
|
||||
<div class="controls">
|
||||
<button id="play-pause">Play</button>
|
||||
<input id="position-slider" type="range">
|
||||
<span id="position">00:00</span>
|
||||
<span>/</span>
|
||||
<span id="duration">00:00</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Guacamole JavaScript API -->
|
||||
<script type="text/javascript"
|
||||
src="guacamole-common-js/all.min.js"></script>
|
||||
|
||||
<!-- -->
|
||||
<script type="text/javascript" src="playback.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,79 @@
|
||||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
.player {
|
||||
width: 640px;
|
||||
}
|
||||
|
||||
.player .controls {
|
||||
|
||||
width: 100%;
|
||||
|
||||
/* IE10 */
|
||||
display: -ms-flexbox;
|
||||
-ms-flex-align: center;
|
||||
-ms-flex-direction: row;
|
||||
|
||||
/* Ancient Mozilla */
|
||||
display: -moz-box;
|
||||
-moz-box-align: center;
|
||||
-moz-box-orient: horizontal;
|
||||
|
||||
/* Ancient WebKit */
|
||||
display: -webkit-box;
|
||||
-webkit-box-align: center;
|
||||
-webkit-box-orient: horizontal;
|
||||
|
||||
/* Old WebKit */
|
||||
display: -webkit-flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-flex-direction: row;
|
||||
|
||||
/* W3C */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
|
||||
}
|
||||
|
||||
.player .controls > * {
|
||||
margin: 0.25em;
|
||||
}
|
||||
|
||||
.player .controls #position-slider {
|
||||
-ms-flex: 1 1 auto;
|
||||
-moz-box-flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.player .controls #play-pause {
|
||||
margin-left: 0;
|
||||
min-width: 5em;
|
||||
}
|
||||
|
||||
.player .controls #position,
|
||||
.player .controls #duration {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.player .controls #duration {
|
||||
margin-right: 0;
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
(function initExamplePlayer() {
|
||||
|
||||
/**
|
||||
* The URL of the Guacamole session recording which should be played back.
|
||||
*
|
||||
* @constant
|
||||
* @type String
|
||||
*/
|
||||
var RECORDING_URL = 'recording.guac';
|
||||
|
||||
/**
|
||||
* The element which will contain the recording display.
|
||||
*
|
||||
* @type Element
|
||||
*/
|
||||
var display = document.getElementById('display');
|
||||
|
||||
/**
|
||||
* Play/pause toggle button.
|
||||
*
|
||||
* @type Element
|
||||
*/
|
||||
var playPause = document.getElementById('play-pause');
|
||||
|
||||
/**
|
||||
* Text status display indicating the current playback position within the
|
||||
* recording.
|
||||
*
|
||||
* @type Element
|
||||
*/
|
||||
var position = document.getElementById('position');
|
||||
|
||||
/**
|
||||
* Slider indicating the current playback position within the recording,
|
||||
* and allowing the user to change the playback position.
|
||||
*
|
||||
* @type Element
|
||||
*/
|
||||
var positionSlider = document.getElementById('position-slider');
|
||||
|
||||
/**
|
||||
* Text status display indicating the current length of the recording.
|
||||
*
|
||||
* @type Element
|
||||
*/
|
||||
var duration = document.getElementById('duration');
|
||||
|
||||
/**
|
||||
* The tunnel which should be used to download the Guacamole session
|
||||
* recording.
|
||||
*
|
||||
* @type Guacamole.Tunnel
|
||||
*/
|
||||
var tunnel = new Guacamole.StaticHTTPTunnel(RECORDING_URL);
|
||||
|
||||
/**
|
||||
* Guacamole.SessionRecording instance to be used to playback the session
|
||||
* recording.
|
||||
*
|
||||
* @type Guacamole.SessionRecording
|
||||
*/
|
||||
var recording = new Guacamole.SessionRecording(tunnel);
|
||||
|
||||
/**
|
||||
* The Guacamole.Display which displays the recording during playback.
|
||||
*
|
||||
* @type Guacamole.Display
|
||||
*/
|
||||
var recordingDisplay = recording.getDisplay();
|
||||
|
||||
/**
|
||||
* Converts the given number to a string, adding leading zeroes as necessary
|
||||
* to reach a specific minimum length.
|
||||
*
|
||||
* @param {Numer} num
|
||||
* The number to convert to a string.
|
||||
*
|
||||
* @param {Number} minLength
|
||||
* The minimum length of the resulting string, in characters.
|
||||
*
|
||||
* @returns {String}
|
||||
* A string representation of the given number, with leading zeroes
|
||||
* added as necessary to reach the specified minimum length.
|
||||
*/
|
||||
var zeroPad = function zeroPad(num, minLength) {
|
||||
|
||||
// Convert provided number to string
|
||||
var str = num.toString();
|
||||
|
||||
// Add leading zeroes until string is long enough
|
||||
while (str.length < minLength)
|
||||
str = '0' + str;
|
||||
|
||||
return str;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Converts the given millisecond timestamp into a human-readable string in
|
||||
* MM:SS format.
|
||||
*
|
||||
* @param {Number} millis
|
||||
* An arbitrary timestamp, in milliseconds.
|
||||
*
|
||||
* @returns {String}
|
||||
* A human-readable string representation of the given timestamp, in
|
||||
* MM:SS format.
|
||||
*/
|
||||
var formatTime = function formatTime(millis) {
|
||||
|
||||
// Calculate total number of whole seconds
|
||||
var totalSeconds = Math.floor(millis / 1000);
|
||||
|
||||
// Split into seconds and minutes
|
||||
var seconds = totalSeconds % 60;
|
||||
var minutes = Math.floor(totalSeconds / 60);
|
||||
|
||||
// Format seconds and minutes as MM:SS
|
||||
return zeroPad(minutes, 2) + ':' + zeroPad(seconds, 2);
|
||||
|
||||
};
|
||||
|
||||
// Add playback display to DOM
|
||||
display.appendChild(recordingDisplay.getElement());
|
||||
|
||||
// Begin downloading the recording
|
||||
recording.connect();
|
||||
|
||||
// If playing, the play/pause button should read "Pause"
|
||||
recording.onplay = function() {
|
||||
playPause.textContent = 'Pause';
|
||||
};
|
||||
|
||||
// If paused, the play/pause button should read "Play"
|
||||
recording.onpause = function() {
|
||||
playPause.textContent = 'Play';
|
||||
};
|
||||
|
||||
// Toggle play/pause when display or button are clicked
|
||||
display.onclick = playPause.onclick = function() {
|
||||
if (!recording.isPlaying())
|
||||
recording.play();
|
||||
else
|
||||
recording.pause();
|
||||
};
|
||||
|
||||
// Fit display within containing div
|
||||
recordingDisplay.onresize = function displayResized(width, height) {
|
||||
|
||||
// Do not scale if display has no width
|
||||
if (!width)
|
||||
return;
|
||||
|
||||
// Scale display to fit width of container
|
||||
recordingDisplay.scale(display.offsetWidth / width);
|
||||
|
||||
};
|
||||
|
||||
// Update slider and status when playback position changes
|
||||
recording.onseek = function positionChanged(millis) {
|
||||
position.textContent = formatTime(millis);
|
||||
positionSlider.value = millis;
|
||||
};
|
||||
|
||||
// Update slider and status when duration changes
|
||||
recording.onprogress = function durationChanged(millis) {
|
||||
duration.textContent = formatTime(millis);
|
||||
positionSlider.max = millis;
|
||||
};
|
||||
|
||||
// Seek within recording if slider is moved
|
||||
positionSlider.onchange = function sliderPositionChanged() {
|
||||
recording.seek(positionSlider.value);
|
||||
};
|
||||
|
||||
})();
|
||||
@@ -0,0 +1 @@
|
||||
4.size,1.1,1.0,1.0;4.move,1.2,1.1,1.0,1.0,1.0;4.size,1.0,3.978,3.682;4.rect,1.0,1.0,1.0,3.978,3.682;5.cfill,2.14,1.0,1.0,1.0,1.0,3.255;4.size,1.1,3.960,3.665;4.size,1.2,3.960,3.665;4.size,2.-1,1.1,1.1;3.img,1.1,2.12,2.-1,9.image/png,1.0,1.0;4.blob,1.1,120.iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==;3.end,1.1;6.cursor,1.0,1.0,2.-1,1.0,1.0,1.1,1.1;4.rect,1.1,1.0,1.0,2.10,2.19;5.cfill,2.14,1.1,3.255,3.255,3.255,3.255;4.rect,1.1,2.10,1.0,3.950,3.665;5.cfill,2.14,1.1,1.0,1.0,1.0,3.255;4.rect,1.1,1.0,2.19,2.10,3.646;5.cfill,2.14,1.1,1.0,1.0,1.0,3.255;4.move,1.3,1.0,3.962,1.0,1.0;4.size,1.3,2.16,3.682;4.rect,1.3,1.0,1.0,2.16,3.682;5.cfill,2.12,1.3,3.128,3.128,3.128,2.64;4.move,1.4,1.3,1.2,1.2,1.0;4.size,1.4,2.12,3.678;4.rect,1.4,1.0,1.0,2.12,3.678;5.cfill,2.12,1.4,3.160,3.160,3.160,3.143;4.sync,10.6492246878;4.size,1.0,3.978,3.682;4.rect,1.0,1.0,1.0,3.978,3.682;5.cfill,2.14,1.0,1.0,1.0,1.0,3.255;4.sync,10.6492246897;4.size,2.-1,1.7,2.16;3.img,1.1,2.12,2.-1,9.image/png,1.0,1.0;4.blob,1.1,200.iVBORw0KGgoAAAANSUhEUgAAAAcAAAAQCAYAAADagWXwAAAABmJLR0QA/wD/AP+gvaeTAAAASUlEQVQYleWQSQ6AMAwDx6gPb18+vUCACvgAPkXyEmkCyIs2ABWV3nvdALk2VZJUs+0BlvnU7OfPH5iNZ/AeZoEeY5zQkzv4VROkCB4UXQdRZAAAAABJRU5ErkJggg==;3.end,1.1;6.cursor,1.3,1.8,2.-1,1.0,1.0,1.7,2.16;4.sync,10.6492247313;4.rect,1.1,1.0,2.19,2.10,2.19;5.cfill,2.14,1.1,3.255,3.255,3.255,3.255;3.img,1.1,2.14,1.1,9.image/png,1.0,1.0;4.blob,1.1,3600.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 truncated
|
||||
Reference in new issue
Block a user