jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feature/kasm 3314 kasmvnc controls (#45) 

* KASM-3314 Support for changing framerate / resolution / scaling via
iframe message
This commit is contained in:
j-travis 2022-11-17 14:21:27 -05:00 committed by GitHub
parent 2f01048bc6
commit 8e5c0e977f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 67 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
app/ui.js
View File

@ -243,7 +243,6 @@ const UI = {
UI.initSetting('enable_perf_stats', false);
UI.initSetting('virtual_keyboard_visible', false);
UI.initSetting('enable_ime', false);
UI.initSetting('enable_qoi', false);
UI.initSetting('enable_webrtc', false);
UI.toggleKeyboardControls();
@ -557,8 +556,6 @@ const UI = {
UI.addSettingChangeHandler('virtual_keyboard_visible', UI.toggleKeyboardControls);
UI.addSettingChangeHandler('enable_ime');
UI.addSettingChangeHandler('enable_ime', UI.toggleIMEMode);
UI.addSettingChangeHandler('enable_qoi');
UI.addSettingChangeHandler('enable_qoi', UI.toggleQOI);
UI.addSettingChangeHandler('enable_webrtc');
UI.addSettingChangeHandler('enable_webrtc', UI.toggleWebRTC);
},
@ -1027,6 +1024,7 @@ const UI = {
} else {
UI.enableSetting(name);
}
UI.saveSetting(name);
},
// Update cookie and form control setting. If value is not set, then
@ -1400,7 +1398,6 @@ const UI = {
UI.rfb.clipboardSeamless = UI.getSetting('clipboard_seamless');
UI.rfb.keyboard.enableIME = UI.getSetting('enable_ime');
UI.rfb.clipboardBinary = supportsBinaryClipboard() && UI.rfb.clipboardSeamless;
UI.rfb.enableQOI = UI.getSetting('enable_qoi');
UI.rfb.enableWebRTC = UI.getSetting('enable_webrtc');
UI.rfb.mouseButtonMapper = UI.initMouseButtonMapper();
@ -1601,9 +1598,15 @@ const UI = {
}
break;
case 'setvideoquality':
if (event.data.qualityLevel !== undefined) {
//apply preset mode values, but don't apply to connection
UI.forceSetting('video_quality', parseInt(event.data.qualityLevel), false);
// apply quality preset quality level and override some settings (fps)
UI.updateQuality(event.data.frameRate);
} else {
UI.forceSetting('video_quality', parseInt(event.data.value), false);
UI.forceSetting('enable_qoi', false, false); // QOI controlled via video quality mode when in iframe
UI.updateQuality();
}
break;
case 'enable_game_mode':
if (UI.rfb && !UI.rfb.pointerRelative) {
@ -1649,18 +1652,6 @@ const UI = {
UI.toggleIMEMode();
}
break;
case 'disable_qoi':
if(UI.getSetting('enable_qoi')) {
UI.forceSetting('enable_qoi', false, false);
}
UI.toggleQOI();
break;
case 'enable_qoi':
if(!UI.getSetting('enable_qoi')) {
UI.forceSetting('enable_qoi', true, false);
}
UI.toggleQOI();
break;
case 'enable_webrtc':
if (!UI.getSetting('enable_webrtc')) {
UI.forceSetting('enable_webrtc', true, false);
@ -1673,7 +1664,23 @@ const UI = {
UI.toggleWebRTC();
}
break;
case 'resize':
UI.forceSetting('resize', event.data.value, false);
UI.applyResizeMode();
break;
case 'set_resolution':
if (UI.rfb) {
UI.rfb.forcedResolutionX = event.data.value_x;
UI.rfb.forcedResolutionY = event.data.value_y;
UI.applyResizeMode();
UI.rfb.forcedResolutionX = null;
UI.rfb.forcedResolutionY = null;
UI.rfb._resizeSession = UI.getSetting('resize') === 'remote';
}
break;
case 'set_perf_stats':
UI.forceSetting('enable_perf_stats', event.data.value, false);
UI.showStats();
case 'set_idle_timeout':
//message value in seconds
const idle_timeout_min = Math.ceil(event.data.value / 60);
@ -1815,7 +1822,7 @@ const UI = {
if (!UI.rfb) return;
UI.rfb.scaleViewport = UI.getSetting('resize') === 'scale';
UI.rfb.resizeSession = UI.getSetting('resize') === 'remote';
UI.rfb.resizeSession = UI.getSetting('resize') === 'remote' || UI.rfb.forcedResolutionX && UI.rfb.forcedResolutionY;
UI.rfb.idleDisconnect = UI.getSetting('idle_disconnect');
UI.rfb.videoQuality = UI.getSetting('video_quality');
UI.rfb.enableWebP = UI.getSetting('enable_webp');
@ -1959,8 +1966,9 @@ const UI = {
* QUALITY
* ------v------*/
updateQuality() {
updateQuality(fps) {
let present_mode = parseInt(UI.getSetting('video_quality'));
let enable_qoi = false;
// video_quality preset values
switch (present_mode) {
@ -1977,20 +1985,31 @@ const UI = {
UI.enableSetting('framerate');
UI.enableSetting('video_scaling');
UI.enableSetting('video_out_time');
UI.showStatus("Refresh or reconnect to apply changes.");
return;
case 5: //extreme+lossless
UI.forceSetting('enable_qoi', true, false);
case 4: //extreme
break;
case 5: //lossless
enable_qoi = true;
fps = (fps && Number.isFinite(fps)) ? fps : 60;
UI.forceSetting('dynamic_quality_min', 9);
UI.forceSetting('dynamic_quality_max', 9);
UI.forceSetting('framerate', 60);
UI.forceSetting('framerate', fps);
UI.forceSetting('treat_lossless', 9);
UI.forceSetting('video_time', 100);
UI.forceSetting('video_area', 100);
UI.forceSetting('max_video_resolution_x', 1920);
UI.forceSetting('max_video_resolution_y', 1080);
UI.forceSetting('jpeg_video_quality', 9);
UI.forceSetting('webp_video_quality', 9);
UI.forceSetting('video_scaling', 0);
UI.forceSetting('video_out_time', 3);
break;
case 4: //extreme
fps = (fps && Number.isFinite(fps)) ? fps : 60;
UI.forceSetting('dynamic_quality_min', 9);
UI.forceSetting('dynamic_quality_max', 9);
UI.forceSetting('framerate', fps);
UI.forceSetting('treat_lossless', 9);
// effectively disables video mode
UI.forceSetting('video_time', 100);
UI.forceSetting('video_area', 100);
// go ahead and set video mode settings, won't be used
UI.forceSetting('max_video_resolution_x', 1920);
UI.forceSetting('max_video_resolution_y', 1080);
UI.forceSetting('jpeg_video_quality', 9);
@ -1999,13 +2018,14 @@ const UI = {
UI.forceSetting('video_out_time', 3);
break;
case 3: // high
fps = (fps && Number.isFinite(fps)) ? fps : 60;
UI.forceSetting('jpeg_video_quality', 8);
UI.forceSetting('webp_video_quality', 8);
UI.forceSetting('dynamic_quality_min', 7);
UI.forceSetting('dynamic_quality_max', 9);
UI.forceSetting('max_video_resolution_x', 1920);
UI.forceSetting('max_video_resolution_y', 1080);
UI.forceSetting('framerate', 60);
UI.forceSetting('framerate', fps);
UI.forceSetting('treat_lossless', 8);
UI.forceSetting('video_time', 5);
UI.forceSetting('video_area', 65);
@ -2013,13 +2033,14 @@ const UI = {
UI.forceSetting('video_out_time', 3);
break;
case 1: // low, resolution capped at 720p keeping aspect ratio
fps = (fps && Number.isFinite(fps)) ? fps : 24;
UI.forceSetting('jpeg_video_quality', 5);
UI.forceSetting('webp_video_quality', 4);
UI.forceSetting('dynamic_quality_min', 3);
UI.forceSetting('dynamic_quality_max', 7);
UI.forceSetting('max_video_resolution_x', 960);
UI.forceSetting('max_video_resolution_y', 540);
UI.forceSetting('framerate', 22);
UI.forceSetting('framerate', fps);
UI.forceSetting('treat_lossless', 7);
UI.forceSetting('video_time', 5);
UI.forceSetting('video_area', 65);
@ -2029,13 +2050,14 @@ const UI = {
case 2: // medium
case 0: // static resolution, but same settings as medium
default:
fps = (fps && Number.isFinite(fps)) ? fps : 24;
UI.forceSetting('jpeg_video_quality', 7);
UI.forceSetting('webp_video_quality', 7);
UI.forceSetting('dynamic_quality_min', 4);
UI.forceSetting('dynamic_quality_max', 9);
UI.forceSetting('max_video_resolution_x', 960);
UI.forceSetting('max_video_resolution_y', 540);
UI.forceSetting('framerate', 24);
UI.forceSetting('framerate', (fps) ? fps : 24);
UI.forceSetting('treat_lossless', 7);
UI.forceSetting('video_time', 5);
UI.forceSetting('video_area', 65);
@ -2044,12 +2066,6 @@ const UI = {
break;
}
//force QOI off if mode is below extreme
if (present_mode < 4 && UI.getSetting('enable_qoi')) {
UI.showStatus("Lossless QOI disabled when not in extreme quality mode.");
UI.forceSetting('enable_qoi', false, false);
}
if (UI.rfb) {
UI.rfb.qualityLevel = parseInt(UI.getSetting('quality'));
UI.rfb.antiAliasing = parseInt(UI.getSetting('anti_aliasing'));
@ -2067,7 +2083,7 @@ const UI = {
UI.rfb.frameRate = parseInt(UI.getSetting('framerate'));
UI.rfb.enableWebP = UI.getSetting('enable_webp');
UI.rfb.videoQuality = parseInt(UI.getSetting('video_quality'));
UI.rfb.enableQOI = UI.getSetting('enable_qoi');
UI.rfb.enableQOI = enable_qoi;
// Gracefully update settings server side
UI.rfb.updateConnectionSettings();
@ -2127,23 +2143,6 @@ const UI = {
}
},
toggleQOI() {
if(UI.rfb) {
if(UI.getSetting('enable_qoi')) {
UI.rfb.enableQOI = true;
if (!UI.rfb.enableQOI) {
UI.showStatus("Enabling QOI failed, browser may not be compatible with WASM and/or Workers.");
UI.forceSetting('enable_qoi', false, false);
return;
}
UI.forceSetting('video_quality', 4, false); //force into extreme quality mode
} else {
UI.rfb.enableQOI = false;
}
UI.updateQuality();
}
},
showKeyboardControls() {
document.getElementById('noVNC_keyboard_control').classList.add("is-visible");
},

11
core/rfb.js
View File

@ -139,6 +139,8 @@ export default class RFB extends EventTargetMixin {
this._frameRate = 30;
this._maxVideoResolutionX = 960;
this._maxVideoResolutionY = 540;
this._forcedResolutionX = null;
this._forcedResolutionY = null;
this._clipboardBinary = true;
this._useUdp = true;
this._enableQOI = false;
@ -693,6 +695,11 @@ export default class RFB extends EventTargetMixin {
this._pendingApplyVideoRes = true;
}
get forcedResolutionX() { return this._forcedResolutionX; }
set forcedResolutionX(value) {this._forcedResolutionX = value;}
get forcedResolutionY() { return this._forcedResolutionY; }
set forcedResolutionY(value) {this._forcedResolutionY = value;}
get qualityLevel() {
return this._qualityLevel;
}
@ -1320,8 +1327,8 @@ export default class RFB extends EventTargetMixin {
if (limited === undefined) {
limited = true;
}
var x = this._screen.offsetWidth;
var y = this._screen.offsetHeight;
var x = this.forcedResolutionX || this._screen.offsetWidth;
var y = this.forcedResolutionY || this._screen.offsetHeight;
var scale = 0; // 0=auto
try {
if (x > 1280 && limited && this.videoQuality == 1) {

7
vnc.html
View File

@ -277,12 +277,6 @@
<span class="slider-label">IME Input Mode</span>
</label>
</li>
<li>
<label class="switch"><input id="noVNC_setting_enable_qoi" type="checkbox" />
<span class="slider round"></span>
<span class="slider-label">QOI Lossless</span>
</label>
</li>
<li>
<label class="switch"><input id="noVNC_setting_virtual_keyboard_visible" type="checkbox" />
<span class="slider round"></span>
@ -352,6 +346,7 @@
<option value=2>Medium</option>
<option value=3>High</option>
<option value=4>Extreme</option>
<option value=5>Lossless</option>
<option value=10>Custom</option>
</select>
</li>