[mirotalksfu] - make h.264 prioritize recording codec settable by user

public/css/Room.css

@@ -390,6 +390,9 @@ th {
 .width-150 {
     width: 150px;
 }
+.width-180 {
+    width: 180px;
+}
 
 .microphone-table-width {
     width: 180px;

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

public/js/Room.js

@@ -34,6 +34,7 @@ let redirect = {
 };
 
 let recCodecs = null;
+let recPrioritizeH264 = false;
 
 const _PEER = {
     presenter: '<i class="fa-solid fa-user-shield"></i>',
@@ -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);

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);

public/views/Room.html

@@ -742,7 +742,20 @@ access to use this app.
                         <div id="roomRecording" class="hidden">
                             <table class="settingsTable">
                                 <tr>
-                                    <td class="custom-width">
+                                    <td class="width-180">
+                                        <div class="title">
+                                            <i class="fa-solid fa-film"></i>
+                                            <p>Prioritize H.264</p>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <div class="form-check form-switch form-switch-md title">
+                                            <input id="switchH264Recording" class="form-check-input" type="checkbox" />
+                                        </div>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="width-180">
                                         <div class="title">
                                             <i class="fa-solid fa-user-shield"></i>
                                             <p>Only host</p>