浏览代码

fix(screenshare): Fixes for the blurry desktop share issues.

Do not resize the desktop share to 720p by default when the desktop track resolution is higher than 720p. This is causing bluriness when presenter is turned on.
Remove the 'detail' contentHint setting for the desktop+presenter canvas stream as it forcing chrome to send only 5 fps stream for high resolution desktop tracks.
Move the desktop resizing logic behind a config.js option - videoQuality.resizeDesktopForPresenter.
master
Jaya Allamsetty 5 年前
父节点
当前提交
3381cf4422
共有 5 个文件被更改,包括 46 次插入43 次删除
  1. 36
    30
      conference.js
  2. 6
    2
      config.js
  3. 2
    2
      package-lock.json
  4. 1
    1
      package.json
  5. 1
    8
      react/features/stream-effects/presenter/JitsiStreamPresenterEffect.js

+ 36
- 30
conference.js 查看文件

53
     updateDeviceList
53
     updateDeviceList
54
 } from './react/features/base/devices';
54
 } from './react/features/base/devices';
55
 import {
55
 import {
56
+    browser,
56
     isFatalJitsiConnectionError,
57
     isFatalJitsiConnectionError,
57
     JitsiConferenceErrors,
58
     JitsiConferenceErrors,
58
     JitsiConferenceEvents,
59
     JitsiConferenceEvents,
493
 
494
 
494
         JitsiMeetJS.mediaDevices.addEventListener(
495
         JitsiMeetJS.mediaDevices.addEventListener(
495
             JitsiMediaDevicesEvents.PERMISSION_PROMPT_IS_SHOWN,
496
             JitsiMediaDevicesEvents.PERMISSION_PROMPT_IS_SHOWN,
496
-            browser =>
497
+            browserName =>
497
                 APP.store.dispatch(
498
                 APP.store.dispatch(
498
-                    mediaPermissionPromptVisibilityChanged(true, browser))
499
+                    mediaPermissionPromptVisibilityChanged(true, browserName))
499
         );
500
         );
500
 
501
 
501
         let tryCreateLocalTracks;
502
         let tryCreateLocalTracks;
1605
      */
1606
      */
1606
     async _createPresenterStreamEffect(height = null, cameraDeviceId = null) {
1607
     async _createPresenterStreamEffect(height = null, cameraDeviceId = null) {
1607
         if (!this.localPresenterVideo) {
1608
         if (!this.localPresenterVideo) {
1609
+            const camera = cameraDeviceId ?? getUserSelectedCameraDeviceId(APP.store.getState());
1610
+
1608
             try {
1611
             try {
1609
-                this.localPresenterVideo = await createLocalPresenterTrack({ cameraDeviceId }, height);
1612
+                this.localPresenterVideo = await createLocalPresenterTrack({ cameraDeviceId: camera }, height);
1610
             } catch (err) {
1613
             } catch (err) {
1611
                 logger.error('Failed to create a camera track for presenter', err);
1614
                 logger.error('Failed to create a camera track for presenter', err);
1612
 
1615
 
1647
 
1650
 
1648
         // Create a new presenter track and apply the presenter effect.
1651
         // Create a new presenter track and apply the presenter effect.
1649
         if (!this.localPresenterVideo && !mute) {
1652
         if (!this.localPresenterVideo && !mute) {
1650
-            let { aspectRatio, height } = this.localVideo.track.getSettings();
1651
-            const { width } = this.localVideo.track.getSettings();
1653
+            const { height, width } = this.localVideo.track.getSettings() ?? this.localVideo.track.getConstraints();
1652
             let desktopResizeConstraints = {};
1654
             let desktopResizeConstraints = {};
1653
             let resizeDesktopStream = false;
1655
             let resizeDesktopStream = false;
1654
             const DESKTOP_STREAM_CAP = 720;
1656
             const DESKTOP_STREAM_CAP = 720;
1655
 
1657
 
1656
-            // Determine the constraints if the desktop track needs to be resized.
1657
-            // Resizing is needed when the resolution cannot be determined or when
1658
-            // the window is bigger than 720p.
1659
-            if (height && width) {
1660
-                aspectRatio = aspectRatio ?? (width / height).toPrecision(4);
1661
-                const advancedConstraints = [ { aspectRatio } ];
1662
-                const isPortrait = height >= width;
1663
-
1664
-                // Determine which dimension needs resizing and resize only that side
1665
-                // keeping the aspect ratio same as before.
1666
-                if (isPortrait && width > DESKTOP_STREAM_CAP) {
1667
-                    resizeDesktopStream = true;
1668
-                    advancedConstraints.push({ width: DESKTOP_STREAM_CAP });
1669
-                } else if (!isPortrait && height > DESKTOP_STREAM_CAP) {
1658
+            // Resizing the desktop track for presenter is causing blurriness of the desktop share.
1659
+            // Disable this behavior for now until it is fixed in Chrome. The stream needs to be resized
1660
+            // Firefox always.
1661
+            if ((config.videoQuality && config.videoQuality.resizeDesktopForPresenter) || browser.isFirefox()) {
1662
+                // Resizing is needed when the window is bigger than 720p.
1663
+                if (height && width) {
1664
+                    const advancedConstraints = [ { aspectRatio: (width / height).toPrecision(4) } ];
1665
+                    const isPortrait = height >= width;
1666
+
1667
+                    // Determine which dimension needs resizing and resize only that side
1668
+                    // keeping the aspect ratio same as before.
1669
+                    if (isPortrait && width > DESKTOP_STREAM_CAP) {
1670
+                        resizeDesktopStream = true;
1671
+                        advancedConstraints.push({ width: DESKTOP_STREAM_CAP });
1672
+                    } else if (!isPortrait && height > DESKTOP_STREAM_CAP) {
1673
+                        resizeDesktopStream = true;
1674
+                        advancedConstraints.push({ height: DESKTOP_STREAM_CAP });
1675
+                    }
1676
+                    desktopResizeConstraints.advanced = advancedConstraints;
1677
+                } else {
1670
                     resizeDesktopStream = true;
1678
                     resizeDesktopStream = true;
1671
-                    advancedConstraints.push({ height: DESKTOP_STREAM_CAP });
1679
+                    desktopResizeConstraints = {
1680
+                        width: 1280,
1681
+                        height: 720
1682
+                    };
1672
                 }
1683
                 }
1673
-                desktopResizeConstraints.advanced = advancedConstraints;
1674
-            } else {
1675
-                resizeDesktopStream = true;
1676
-                desktopResizeConstraints = {
1677
-                    width: 1280,
1678
-                    height: 720
1679
-                };
1680
             }
1684
             }
1685
+
1681
             if (resizeDesktopStream) {
1686
             if (resizeDesktopStream) {
1682
                 try {
1687
                 try {
1683
                     await this.localVideo.track.applyConstraints(desktopResizeConstraints);
1688
                     await this.localVideo.track.applyConstraints(desktopResizeConstraints);
1686
 
1691
 
1687
                     return;
1692
                     return;
1688
                 }
1693
                 }
1689
-                height = this.localVideo.track.getSettings().height ?? DESKTOP_STREAM_CAP;
1690
             }
1694
             }
1695
+            const trackHeight = resizeDesktopStream
1696
+                ? this.localVideo.track.getSettings().height ?? DESKTOP_STREAM_CAP
1697
+                : height;
1691
             const defaultCamera = getUserSelectedCameraDeviceId(APP.store.getState());
1698
             const defaultCamera = getUserSelectedCameraDeviceId(APP.store.getState());
1692
             let effect;
1699
             let effect;
1693
 
1700
 
1694
             try {
1701
             try {
1695
-                effect = await this._createPresenterStreamEffect(height,
1696
-                    defaultCamera);
1702
+                effect = await this._createPresenterStreamEffect(trackHeight, defaultCamera);
1697
             } catch (err) {
1703
             } catch (err) {
1698
                 logger.error('Failed to unmute Presenter Video');
1704
                 logger.error('Failed to unmute Presenter Video');
1699
                 maybeShowErrorDialog(err);
1705
                 maybeShowErrorDialog(err);

+ 6
- 2
config.js 查看文件

275
     //    // at least 360 pixels tall. If the thumbnail height reaches 720 pixels then the application will switch to
275
     //    // at least 360 pixels tall. If the thumbnail height reaches 720 pixels then the application will switch to
276
     //    // the high quality.
276
     //    // the high quality.
277
     //    minHeightForQualityLvl: {
277
     //    minHeightForQualityLvl: {
278
-    //        360: 'standard,
278
+    //        360: 'standard',
279
     //        720: 'high'
279
     //        720: 'high'
280
-    //    }
280
+    //    },
281
+    //
282
+    //    // Provides a way to resize the desktop track to 720p (if it is greater than 720p) before creating a canvas
283
+    //    // for the presenter mode (camera picture-in-picture mode with screenshare).
284
+    //    resizeDesktopForPresenter: false
281
     // },
285
     // },
282
 
286
 
283
     // // Options for the recording limit notification.
287
     // // Options for the recording limit notification.

+ 2
- 2
package-lock.json 查看文件

10771
       }
10771
       }
10772
     },
10772
     },
10773
     "lib-jitsi-meet": {
10773
     "lib-jitsi-meet": {
10774
-      "version": "github:jitsi/lib-jitsi-meet#6bb0b86c0a7dd22bb5798236d9b80ca578b28d21",
10775
-      "from": "github:jitsi/lib-jitsi-meet#6bb0b86c0a7dd22bb5798236d9b80ca578b28d21",
10774
+      "version": "github:jitsi/lib-jitsi-meet#3ed4e3caeeaba37f8eae6854b1b7dc9c334adba7",
10775
+      "from": "github:jitsi/lib-jitsi-meet#3ed4e3caeeaba37f8eae6854b1b7dc9c334adba7",
10776
       "requires": {
10776
       "requires": {
10777
         "@jitsi/js-utils": "1.0.2",
10777
         "@jitsi/js-utils": "1.0.2",
10778
         "@jitsi/sdp-interop": "1.0.3",
10778
         "@jitsi/sdp-interop": "1.0.3",

+ 1
- 1
package.json 查看文件

56
     "jquery-i18next": "1.2.1",
56
     "jquery-i18next": "1.2.1",
57
     "js-md5": "0.6.1",
57
     "js-md5": "0.6.1",
58
     "jwt-decode": "2.2.0",
58
     "jwt-decode": "2.2.0",
59
-    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#6bb0b86c0a7dd22bb5798236d9b80ca578b28d21",
59
+    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#3ed4e3caeeaba37f8eae6854b1b7dc9c334adba7",
60
     "libflacjs": "github:mmig/libflac.js#93d37e7f811f01cf7d8b6a603e38bd3c3810907d",
60
     "libflacjs": "github:mmig/libflac.js#93d37e7f811f01cf7d8b6a603e38bd3c3810907d",
61
     "lodash": "4.17.19",
61
     "lodash": "4.17.19",
62
     "moment": "2.19.4",
62
     "moment": "2.19.4",

+ 1
- 8
react/features/stream-effects/presenter/JitsiStreamPresenterEffect.js 查看文件

141
             timeMs: 1000 / this._frameRate
141
             timeMs: 1000 / this._frameRate
142
         });
142
         });
143
 
143
 
144
-        const capturedStream = this._canvas.captureStream(this._frameRate);
145
-
146
-        // Put emphasis on the text details for the presenter's stream
147
-        // See https://www.w3.org/TR/mst-content-hint/
148
-        // $FlowExpectedError
149
-        capturedStream.getVideoTracks()[0].contentHint = 'text';
150
-
151
-        return capturedStream;
144
+        return this._canvas.captureStream(this._frameRate);
152
     }
145
     }
153
 
146
 
154
     /**
147
     /**

正在加载...
取消
保存