From 8455824f462d79319eac3616813255c7dc012b4f Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Wed, 2 Apr 2025 21:43:51 +0200
Subject: [PATCH] [mirotalksfu] - add screen sharing track optimization

---
 app/src/Server.js         |  2 +-
 package.json              |  2 +-
 public/js/Brand.js        |  2 +-
 public/js/LocalStorage.js |  1 +
 public/js/Room.js         | 16 ++++++++++++++--
 public/js/RoomClient.js   | 20 +++++++++++++-------
 public/views/Room.html    | 12 ++++++++++++
 7 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/app/src/Server.js b/app/src/Server.js
index 31491433..98c1a975 100644
--- a/app/src/Server.js
+++ b/app/src/Server.js
@@ -64,7 +64,7 @@ dev dependencies: {
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.8.07
+ * @version 1.8.08
  *
  */
 
diff --git a/package.json b/package.json
index 01ee908b..6b5651f9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.8.07",
+    "version": "1.8.08",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {
diff --git a/public/js/Brand.js b/public/js/Brand.js
index 2bea37fd..bf46ff51 100644
--- a/public/js/Brand.js
+++ b/public/js/Brand.js
@@ -64,7 +64,7 @@ let BRAND = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: '<strong>WebRTC SFU v1.8.07</strong>',
+        title: '<strong>WebRTC SFU v1.8.08</strong>',
         html: `
             <button 
                 id="support-button" 
diff --git a/public/js/LocalStorage.js b/public/js/LocalStorage.js
index 19733df1..b9a4e622 100644
--- a/public/js/LocalStorage.js
+++ b/public/js/LocalStorage.js
@@ -39,6 +39,7 @@ class LocalStorage {
             mic_latency: 50, // ms
             mic_volume: 100, // %
             video_fps: 0, // default 1280x768 30fps
+            screen_optimization: 1, // default detail (1): For high fidelity (screen sharing with text/graphics) || motion (2): For high frame rate (video playback, game streaming)
             screen_fps: 3, // default 1920x1080 15fps
             broadcasting: false, // default false (one to many a/v streaming)
             lobby: false, // default false
diff --git a/public/js/Room.js b/public/js/Room.js
index 00e4ae13..0a5a1e3b 100644
--- a/public/js/Room.js
+++ b/public/js/Room.js
@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.8.07
+ * @version 1.8.08
  *
  */
 
@@ -329,6 +329,12 @@ function initClient() {
             'right',
         );
         setTippy('initVideoAudioRefreshButton', 'Refresh audio/video devices', 'top');
+        setTippy(
+            'screenOptimizationLabel',
+            'Detail: For high fidelity (screen sharing with text/graphics)<br />Motion: For high frame rate (video playback, game streaming',
+            'right',
+            true,
+        );
         setTippy('switchPitchBar', 'Toggle audio pitch bar', 'right');
         setTippy('switchSounds', 'Toggle the sounds notifications', 'right');
         setTippy('switchShare', "Show 'Share Room' popup on join", 'right');
@@ -2493,6 +2499,11 @@ function handleSelects() {
     screenQuality.onchange = () => {
         rc.closeThenProduce(RoomClient.mediaType.screen);
     };
+    screenOptimization.onchange = () => {
+        rc.closeThenProduce(RoomClient.mediaType.screen);
+        localStorageSettings.screen_optimization = screenOptimization.selectedIndex;
+        lS.setSettings(localStorageSettings);
+    };
     videoFps.onchange = () => {
         rc.closeThenProduce(RoomClient.mediaType.video, videoSelect.value);
         localStorageSettings.video_fps = videoFps.selectedIndex;
@@ -3240,6 +3251,7 @@ function loadSettingsFromLocalStorage() {
     micVolumeRange.value = localStorageSettings.mic_volume || 100;
     micVolumeValue.innerText = localStorageSettings.mic_volume || 100;
 
+    screenOptimization.selectedIndex = localStorageSettings.screen_optimization;
     videoFps.selectedIndex = localStorageSettings.video_fps;
     screenFps.selectedIndex = localStorageSettings.screen_fps;
     BtnVideoObjectFit.selectedIndex = localStorageSettings.video_obj_fit;
@@ -5292,7 +5304,7 @@ function showAbout() {
         position: 'center',
         imageUrl: BRAND.about?.imageUrl && BRAND.about.imageUrl.trim() !== '' ? BRAND.about.imageUrl : image.about,
         customClass: { image: 'img-about' },
-        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.8.07',
+        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.8.08',
         html: `
             <br />
             <div id="about">
diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js
index b156a879..076adc59 100644
--- a/public/js/RoomClient.js
+++ b/public/js/RoomClient.js
@@ -9,7 +9,7 @@
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.8.07
+ * @version 1.8.08
  *
  */
 
@@ -1567,14 +1567,20 @@ class RoomClient {
 
             if (screen) {
                 /*
-                    track.contentHint helps optimize media tracks for specific use cases like `motion` or `detail`.
-                        - `motion`: For high frame rate, suitable for dynamic content like video playback or game streaming.
-                        - `detail`: For content requiring high fidelity, such as screen sharing with text, graphics, or fine details, prioritizing resolution over frame rate.
-                */
+                 * track.contentHint helps optimize media tracks for specific use cases:
+                 * - 'motion': For high frame rate (video playback, game streaming)
+                 * - 'detail': For high fidelity (screen sharing with text/graphics)
+                 */
                 if ('contentHint' in track) {
-                    track.contentHint = 'detail';
-                    console.info('Optimized video Track for screen sharing!');
+                    show(ScreenOptimizationDiv);
+
+                    const contentHint = screenOptimization.value;
+                    if (contentHint !== 'None') {
+                        track.contentHint = contentHint;
+                        console.info(`Optimized video track for screen sharing: ${contentHint}`);
+                    }
                 } else {
+                    hide(ScreenOptimizationDiv);
                     console.warn('contentHint is not supported in this browser');
                 }
             }
diff --git a/public/views/Room.html b/public/views/Room.html
index 07bd1f13..ad56512e 100644
--- a/public/views/Room.html
+++ b/public/views/Room.html
@@ -458,6 +458,18 @@ access to use this app.
                                 <option value="8k">🖥&nbsp;8K</option>
                             </select>
                         </div>
+                        <br />
+                        <div id="ScreenOptimizationDiv" class="hidden">
+                            <div class="title">
+                                <i class="fa-solid fa-rocket"></i>
+                                <p id="screenOptimizationLabel">Screen Optimization:</p>
+                            </div>
+                            <select id="screenOptimization" class="form-select text-light bg-dark">
+                                <option value="default">🖥&nbsp;None</option>
+                                <option value="detail">🖥&nbsp;Detail</option>
+                                <option value="motion">🖥&nbsp;Motion</option>
+                            </select>
+                        </div>
                         <hr />
                         <div class="title">
                             <i class="fa-solid fa-camera"></i>