From 883788f7a1b54849b4ce4dde18d89ea36fea7e32 Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Mon, 4 Dec 2023 17:27:21 +0100 Subject: [PATCH] [mirotalksfu] - make h.264 prioritize recording codec settable by user --- app/src/Room.js | 2 -- app/src/Server.js | 2 -- app/src/config.template.js | 3 --- public/css/Room.css | 3 +++ public/js/LocalStorage.js | 1 + public/js/Room.js | 18 +++++++++++++++++- public/js/RoomClient.js | 10 +--------- public/views/Room.html | 15 ++++++++++++++- 8 files changed, 36 insertions(+), 18 deletions(-) diff --git a/app/src/Room.js b/app/src/Room.js index be9a2e26..6a271abe 100644 --- a/app/src/Room.js +++ b/app/src/Room.js @@ -30,7 +30,6 @@ module.exports = class Room { }; this.survey = config.survey; this.redirect = config.redirect; - this.prioritize_H264 = config.recording.prioritize_H264; this.peers = new Map(); this.router = null; this.createTheRouter(); @@ -163,7 +162,6 @@ module.exports = class Room { moderator: this._moderator, survey: this.survey, redirect: this.redirect, - prioritize_H264: this.prioritize_H264, peers: JSON.stringify([...this.peers]), }; } diff --git a/app/src/Server.js b/app/src/Server.js index 3dc4ae28..915a089f 100644 --- a/app/src/Server.js +++ b/app/src/Server.js @@ -509,7 +509,6 @@ function startServer() { slack_enabled: slackEnabled, stats_enabled: config.stats.enabled, chatGPT_enabled: config.chatGPT.enabled, - rec_prioritize_H264: config.recording.prioritize_H264, }); } catch (err) { log.error('Ngrok Start error: ', err.body); @@ -555,7 +554,6 @@ function startServer() { slack_enabled: slackEnabled, stats_enabled: config.stats.enabled, chatGPT_enabled: config.chatGPT.enabled, - rec_prioritize_H264: config.recording.prioritize_H264, }); }); diff --git a/app/src/config.template.js b/app/src/config.template.js index 28833202..42b25729 100644 --- a/app/src/config.template.js +++ b/app/src/config.template.js @@ -149,9 +149,6 @@ module.exports = { enabled: false, url: '', }, - recording: { - prioritize_H264: false, // Give priority to h264,aac|h264,opus instead of vp8,opus/vp9,opus codec - }, stats: { /* Umami: https://github.com/umami-software/umami diff --git a/public/css/Room.css b/public/css/Room.css index d8e3addd..a2b0849d 100644 --- a/public/css/Room.css +++ b/public/css/Room.css @@ -390,6 +390,9 @@ th { .width-150 { width: 150px; } +.width-180 { + width: 180px; +} .microphone-table-width { width: 180px; diff --git a/public/js/LocalStorage.js b/public/js/LocalStorage.js index 9ad87de4..60f7dfbc 100644 --- a/public/js/LocalStorage.js +++ b/public/js/LocalStorage.js @@ -42,6 +42,7 @@ class LocalStorage { pitch_bar: true, // volume indicator sounds: true, // room notify sounds host_ony_recording: false, // presenter + rec_prioritize_h264: false, // Prioritize h.264 with AAC or h.264 with Opus codecs over VP8 with Opus or VP9 with Opus codecs. video_obj_fit: 2, // cover video_controls: 0, // off theme: 0, // dark diff --git a/public/js/Room.js b/public/js/Room.js index 59a4a704..cf831c5a 100644 --- a/public/js/Room.js +++ b/public/js/Room.js @@ -34,6 +34,7 @@ let redirect = { }; let recCodecs = null; +let recPrioritizeH264 = false; const _PEER = { presenter: '', @@ -185,7 +186,16 @@ function initClient() { setTippy('roomId', 'Room name (click to copy)', 'right'); setTippy('sessionTime', 'Session time', 'right'); setTippy('recordingImage', 'Toggle recording', 'right'); - setTippy('roomRecording', 'Only the host (presenter) has the capability to record the meeting', 'bottom'); + setTippy( + 'switchHostOnlyRecording', + 'Only the host (presenter) has the capability to record the meeting', + 'right', + ); + setTippy( + 'switchH264Recording', + 'Prioritize h.264 with AAC or h.264 with Opus codecs over VP8 with Opus or VP9 with Opus codecs', + 'right', + ); setTippy('whiteboardGhostButton', 'Toggle transparent background', 'bottom'); setTippy('wbBackgroundColorEl', 'Background color', 'bottom'); setTippy('wbDrawingColorEl', 'Drawing color', 'bottom'); @@ -1808,6 +1818,12 @@ function handleSelects() { lS.setSettings(lsSettings); e.target.blur(); }; + switchH264Recording.onchange = (e) => { + recPrioritizeH264 = e.currentTarget.checked; + lsSettings.rec_prioritize_h264 = recPrioritizeH264; + lS.setSettings(lsSettings); + e.target.blur(); + }; // styling BtnAspectRatio.onchange = () => { setAspectRatio(BtnAspectRatio.value); diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js index 670b941c..910a7ac8 100644 --- a/public/js/RoomClient.js +++ b/public/js/RoomClient.js @@ -237,7 +237,6 @@ class RoomClient { // Recording this.audioRecorder = null; - this.recPrioritizeH264 = false; // Encodings this.forceVP8 = false; // Force VP8 codec for webcam and screen sharing @@ -378,8 +377,6 @@ class RoomClient { survey = room.survey; console.log('07.0 ----> Room Leave Redirect', room.redirect); redirect = room.redirect; - console.log('07.0 ----> Room REC prioritize_H264', room.prioritize_H264); - this.recPrioritizeH264 = room.prioritize_H264; let peers = new Map(JSON.parse(room.peers)); participantsCount = peers.size; // ME @@ -3740,12 +3737,7 @@ class RoomClient { getSupportedMimeTypes() { const possibleTypes = ['video/webm;codecs=vp9,opus', 'video/webm;codecs=vp8,opus', 'video/mp4']; - possibleTypes.splice( - this.recPrioritizeH264 ? 0 : 2, - 0, - 'video/mp4;codecs=h264,aac', - 'video/webm;codecs=h264,opus', - ); + possibleTypes.splice(recPrioritizeH264 ? 0 : 2, 0, 'video/mp4;codecs=h264,aac', 'video/webm;codecs=h264,opus'); console.log('POSSIBLE CODECS', possibleTypes); return possibleTypes.filter((mimeType) => { return MediaRecorder.isTypeSupported(mimeType); diff --git a/public/views/Room.html b/public/views/Room.html index 93775ccc..37130605 100644 --- a/public/views/Room.html +++ b/public/views/Room.html @@ -742,7 +742,20 @@ access to use this app.