Added WebM quality settings to recorder player.
Ylian Saint-Hilaire committed
Jul 5, 2021 at 12:24 UTC
f01f4b4738c631003343187098b23aa2e11f6e7d
1 file changed
+64
-4
views/player.handlebars
+64
-4
@@ -111,6 +111,7 @@
111
var videoWriter = null;
112
var videoWriterLastFrame = null;
113
var videoWriterCurrentFrame = null;
114
+ var videoFrameDuration = 100;
115
var browser = null;
116
117
function start() {
@@ -135,6 +136,9 @@
136
document.onkeypress = onkeypress;
137
Q('PlaySpeed').value = 1;
138
cleanup();
139
+
140
+ // Make the dialog box movable
141
+ dialogBoxDrag();
142
}
143
144
function readNextBlock(func) {
@@ -453,6 +457,7 @@
457
}
458
459
function ondrop(e) {
460
+ if (xxdialogMode) return;
461
haltEvent(e);
462
QV('bigfail', false);
463
QV('bigok', false);
@@ -484,6 +489,7 @@
489
490
var dragtimer = null;
491
function ondragover(e) {
492
+ if (xxdialogMode) return;
493
haltEvent(e);
494
if (dragtimer != null) { clearTimeout(dragtimer); dragtimer = null; }
495
var ac = true;
@@ -492,6 +498,7 @@
498
}
499
500
function ondragleave(e) {
501
+ if (xxdialogMode) return;
502
haltEvent(e);
503
dragtimer = setTimeout(function () { QV('bigfail', false); QV('bigok', false); dragtimer = null; }, 10);
504
}
@@ -508,10 +515,20 @@
515
if (e.key == '0') { pause(); restart(); haltEvent(e); }
516
}
517
511
- // Convert the remote desktop or KVM file into a WebM movie file.
518
function saveAsWebMfile() {
519
+ var x = '';
520
+ 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>');
521
+ 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>');
522
+ setDialogMode(2, "Convert to WebM", 3, saveAsWebMfileEx, x);
523
+ }
524
+
525
+ // Convert the remote desktop or KVM file into a WebM movie file.
526
+ function saveAsWebMfileEx() {
527
+ videoFrameDuration = parseInt(Q('webmframerate').value);
528
+ var quality = parseInt(Q('webmquality').value) / 100;
529
+ //console.log(videoFrameDuration, quality);
530
videoWriterLastFrame = null;
514
- videoWriter = new WebMWriter({ quality: 0.60, frameDuration: 10, transparent: false });
531
+ videoWriter = new WebMWriter({ quality: quality, frameDuration: 100, transparent: false });
532
restart();
533
play();
534
QE('PlayButton', false);
@@ -527,11 +544,12 @@
544
function preCanvasDraw() {
545
if (videoWriter) {
546
var delta = videoWriterCurrentFrame - videoWriterLastFrame;
530
- if (delta >= 100) { videoWriter.addFrame(Q('Desk'), delta); videoWriterLastFrame = videoWriterCurrentFrame; }
547
+ if (delta >= videoFrameDuration) { videoWriter.addFrame(Q('Desk'), delta); videoWriterLastFrame = videoWriterCurrentFrame; }
548
}
549
}
550
551
function openfile() {
552
+ if (xxdialogMode) return;
553
var x = '<input type=file name=files id=p2fileinput style=width:100% accept=".mcrec" onchange="openfileChanged()" />';
554
setDialogMode(2, "Open File...", 3, openfileEx, x);
555
QE('idx_dlgOkButton', false);
@@ -565,10 +583,12 @@
583
}
584
585
function togglePause() {
586
+ if (xxdialogMode) return;
587
if (recFile != null) { if (playing == true) { pause(); } else { if (recFilePtr != recFile.size) { play(); } } } return false;
588
}
589
590
function play() {
591
+ if (xxdialogMode) return;
592
Q('PlayButton').blur();
593
if ((playing == true) || (recFileProtocol == 0)) return;
594
playing = true;
@@ -586,6 +606,7 @@
606
}
607
608
function pause() {
609
+ if (xxdialogMode) return;
610
Q('PauseButton').blur();
611
if (playing == false) return;
612
playing = false;
@@ -601,6 +622,7 @@
622
}
623
624
function restart() {
625
+ if (xxdialogMode) return;
626
Q('RestartButton').blur();
627
if (playing == true) return;
628
recFilePtr = 0;
@@ -680,6 +702,7 @@
702
}
703
704
function seekBackward() {
705
+ if (xxdialogMode) return;
706
var ndxNumber = Math.round(currentDeltaTimeTotalSec / recFileMetadata.indexInterval);
707
if (ndxNumber < 2) {
708
pause(); restart();
@@ -689,6 +712,7 @@
712
}
713
714
function seekForward() {
715
+ if (xxdialogMode) return;
716
var ndxNumber = Math.round(currentDeltaTimeTotalSec / recFileMetadata.indexInterval);
717
if (recFileMetadata.indexes[ndxNumber] != null) { seek(ndxNumber); }
718
}
@@ -703,6 +727,7 @@
727
var SeekIndexTime;
728
var SeekPlayState;
729
function seek(indexNumber) {
730
+ if (xxdialogMode) return;
731
//console.log('seek', indexNumber);
732
if ((recFileMetadata.indexes == null) || (recFileMetadata.indexes[indexNumber] == null)) return null;
733
SeekPlayState = playing;
@@ -748,7 +773,7 @@
773
//
774
775
// null = Hidden, 1 = Generic Message
751
- var xxdialogMode;
776
+ var xxdialogMode = 0;
777
var xxdialogFunc;
778
var xxdialogButtons;
779
var xxdialogTag;
@@ -785,6 +810,41 @@
810
function pad2(num) { var s = '00' + num; return s.substr(s.length - 2); }
811
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; }); };
812
813
+ function addHtmlValue(t, v) { return '<table><td style=width:120px>' + t + '<td><b>' + v + '</b></table>'; }
814
+ function addHtmlValue2(t, v) { return '<div><div style=display:inline-block;float:right>' + v + '</div><div style=display:inline-block>' + t + '</div></div>'; }
815
+ function addHtmlValue3(t, v) { return '<div><b>' + t + '</b></div><div style=margin-left:16px>' + v + '</div>'; }
816
+ function addHtmlValue4(t, v) { return '<table style=width:100%><td style=width:120px>' + t + '<td style=text-align:right><b>' + v + '</b></table>'; }
817
+ 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>'; }
818
+
819
+ // Make the dialog box movable
820
+ function dialogBoxDrag() {
821
+ var elmnt = Q('dialog');
822
+ var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
823
+ Q('dialogHeader').onmousedown = dragMouseDown;
824
+ function dragMouseDown(e) {
825
+ e = e || window.event;
826
+ e.preventDefault();
827
+ pos3 = e.clientX;
828
+ pos4 = e.clientY;
829
+ document.onmouseup = closeDragElement;
830
+ document.onmousemove = elementDrag;
831
+ }
832
+ function elementDrag(e) {
833
+ e = e || window.event;
834
+ e.preventDefault();
835
+ pos1 = pos3 - e.clientX;
836
+ pos2 = pos4 - e.clientY;
837
+ pos3 = e.clientX;
838
+ pos4 = e.clientY;
839
+ elmnt.style.top = (elmnt.offsetTop - pos2) + 'px';
840
+ elmnt.style.left = (elmnt.offsetLeft - pos1) + 'px';
841
+ }
842
+ function closeDragElement() {
843
+ document.onmouseup = null;
844
+ document.onmousemove = null;
845
+ }
846
+ }
847
+
848
start();
849
</script>
850
</body>