external/MeshCentral
1
0
Fork 0
mirror of https://github.com/Ylianst/MeshCentral.git synced 2025-02-12 11:01:52 +00:00
Code Issues Releases Wiki Activity

Added WebM quality settings to recorder player.

Browse source
This commit is contained in:
Ylian Saint-Hilaire 2021-07-05 12:24:02 -07:00
parent b8f7fb16ec
commit f01f4b4738
1 changed files with 64 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
views/player.handlebars
View file

@ -111,6 +111,7 @@
var videoWriter = null;
var videoWriterLastFrame = null;
var videoWriterCurrentFrame = null;
var videoFrameDuration = 100;
var browser = null;
function start() {
@ -135,6 +136,9 @@
document.onkeypress = onkeypress;
Q('PlaySpeed').value = 1;
cleanup();
// Make the dialog box movable
dialogBoxDrag();
}
function readNextBlock(func) {
@ -453,6 +457,7 @@
}
function ondrop(e) {
if (xxdialogMode) return;
haltEvent(e);
QV('bigfail', false);
QV('bigok', false);
@ -484,6 +489,7 @@
var dragtimer = null;
function ondragover(e) {
if (xxdialogMode) return;
haltEvent(e);
if (dragtimer != null) { clearTimeout(dragtimer); dragtimer = null; }
var ac = true;
@ -492,6 +498,7 @@
}
function ondragleave(e) {
if (xxdialogMode) return;
haltEvent(e);
dragtimer = setTimeout(function () { QV('bigfail', false); QV('bigok', false); dragtimer = null; }, 10);
}
@ -508,10 +515,20 @@
if (e.key == '0') { pause(); restart(); haltEvent(e); }
}
// Convert the remote desktop or KVM file into a WebM movie file.
function saveAsWebMfile() {
var x = '';
x += addHtmlValue4("Frame rate", '<select id=webmframerate style=width:200px><option value=100 selected>' + "10 frames/sec" + '</option><option value=50>' + "20 frames/sec" + '</option></select>');
x += addHtmlValue4("Quality", '<select id=webmquality style=width:200px><option value=90>' + "90%" + '</option><option value=80>' + "80%" + '</option><option value=60 selected>' + "60%" + '</option><option value=40>' + "40%" + '</option><option value=20>' + "20%" + '</option><option value=10>' + "10%" + '</option></select>');
setDialogMode(2, "Convert to WebM", 3, saveAsWebMfileEx, x);
}
// Convert the remote desktop or KVM file into a WebM movie file.
function saveAsWebMfileEx() {
videoFrameDuration = parseInt(Q('webmframerate').value);
var quality = parseInt(Q('webmquality').value) / 100;
//console.log(videoFrameDuration, quality);
videoWriterLastFrame = null;
videoWriter = new WebMWriter({ quality: 0.60, frameDuration: 10, transparent: false });
videoWriter = new WebMWriter({ quality: quality, frameDuration: 100, transparent: false });
restart();
play();
QE('PlayButton', false);
@ -527,11 +544,12 @@
function preCanvasDraw() {
if (videoWriter) {
var delta = videoWriterCurrentFrame - videoWriterLastFrame;
if (delta >= 100) { videoWriter.addFrame(Q('Desk'), delta); videoWriterLastFrame = videoWriterCurrentFrame; }
if (delta >= videoFrameDuration) { videoWriter.addFrame(Q('Desk'), delta); videoWriterLastFrame = videoWriterCurrentFrame; }
}
}
function openfile() {
if (xxdialogMode) return;
var x = '<input type=file name=files id=p2fileinput style=width:100% accept=".mcrec" onchange="openfileChanged()" />';
setDialogMode(2, "Open File...", 3, openfileEx, x);
QE('idx_dlgOkButton', false);
@ -565,10 +583,12 @@
}
function togglePause() {
if (xxdialogMode) return;
if (recFile != null) { if (playing == true) { pause(); } else { if (recFilePtr != recFile.size) { play(); } } } return false;
}
function play() {
if (xxdialogMode) return;
Q('PlayButton').blur();
if ((playing == true) || (recFileProtocol == 0)) return;
playing = true;
@ -586,6 +606,7 @@
}
function pause() {
if (xxdialogMode) return;
Q('PauseButton').blur();
if (playing == false) return;
playing = false;
@ -601,6 +622,7 @@
}
function restart() {
if (xxdialogMode) return;
Q('RestartButton').blur();
if (playing == true) return;
recFilePtr = 0;
@ -680,6 +702,7 @@
}
function seekBackward() {
if (xxdialogMode) return;
var ndxNumber = Math.round(currentDeltaTimeTotalSec / recFileMetadata.indexInterval);
if (ndxNumber < 2) {
pause(); restart();
@ -689,6 +712,7 @@
}
function seekForward() {
if (xxdialogMode) return;
var ndxNumber = Math.round(currentDeltaTimeTotalSec / recFileMetadata.indexInterval);
if (recFileMetadata.indexes[ndxNumber] != null) { seek(ndxNumber); }
}
@ -703,6 +727,7 @@
var SeekIndexTime;
var SeekPlayState;
function seek(indexNumber) {
if (xxdialogMode) return;
//console.log('seek', indexNumber);
if ((recFileMetadata.indexes == null) || (recFileMetadata.indexes[indexNumber] == null)) return null;
SeekPlayState = playing;
@ -748,7 +773,7 @@
//
// null = Hidden, 1 = Generic Message
var xxdialogMode;
var xxdialogMode = 0;
var xxdialogFunc;
var xxdialogButtons;
var xxdialogTag;
@ -785,6 +810,41 @@
function pad2(num) { var s = '00' + num; return s.substr(s.length - 2); }
function format(format) { var args = Array.prototype.slice.call(arguments, 1); return format.replace(/{(\d+)}/g, function (match, number) { return typeof args[number] != 'undefined' ? args[number] : match; }); };
function addHtmlValue(t, v) { return '<table><td style=width:120px>' + t + '<td><b>' + v + '</b></table>'; }
function addHtmlValue2(t, v) { return '<div><div style=display:inline-block;float:right>' + v + '</div><div style=display:inline-block>' + t + '</div></div>'; }
function addHtmlValue3(t, v) { return '<div><b>' + t + '</b></div><div style=margin-left:16px>' + v + '</div>'; }
function addHtmlValue4(t, v) { return '<table style=width:100%><td style=width:120px>' + t + '<td style=text-align:right><b>' + v + '</b></table>'; }
function addHtmlValue5(t, v) { return '<div style=padding:4px><div style=display:inline-block;float:right><b>' + v + '</b></div><div style=display:inline-block>' + t + '</div></div>'; }
// Make the dialog box movable
function dialogBoxDrag() {
var elmnt = Q('dialog');
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
Q('dialogHeader').onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + 'px';
elmnt.style.left = (elmnt.offsetLeft - pos1) + 'px';
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
start();
</script>
</body>