Bug 235030 – There is a big delay of video media stream if we share screen by getDisplayMedia in Safari from different MacOS desktops

• Component: WebRTC
• Status: NEW

[walter]

If we share screen by API "getDisplayMedia" in Safari on different MacOS desktops, there will be a big delay in the shared video media streaming.
In other words, If we share screen in Safari in same desktop, that’s ok.   

The problem is found on Safari15, MacOS 11.x/12.x with Intel CPU. 


# Steps:

1. Alice join an online meeting by Safari
2. Bob also join the online meeting by other browsers, such as Chrome, Firefox or Safari.
3. Alice start to share her screen, auto play a PPT or video clip, such as https://www.youtube.com/watch?v=b96TnabpVyo in full screen or in another desktop



# Expect Result:

Bob should see shared screen video normally.

# Actual Result:

After a while, Bob see shared screen video freeze frequently, sometimes, freeze time exceeds 60 seconds.

I wrote an example to duplicate the issue: https://github.com/walterfan/webrtc_remote_sharing

[Radar WebKit Bug Importer]

<rdar://problem/87339054>

[youenn fablet]

I tried the repro case, but I did not reproduce the freeze.
I am unclear whether freeze is happening on generation side (getDisplayMedia) or in the transmission chain.
Can you send me privately a sysdiagnose ([e-mail]) if you can reproduce on most recent MacOS version, with the timing of the freezes?

[walter]

Sorry for the confusion.  My local video file is large, so I give a youtube url. 
You need to download the video file and playback it in local in full screen or different desktop.

I can reproduce the issue 100%

Please let me know if you need any recording or sysdiagnose

[PhungDuong]

We also had the same problem with iPhone 7 iOS 14, and 15.

When joining a WebRTC video call and sharing screen, after about 30 minutes, the iPhone 7 gets hotter than usual, then the video on the share screen is delayed from 2 to 4 seconds. The audio also sounds laggy and unstable.

But with other devices like iPhone 6, iPhone 8, X, etc., it does not have the above problem.

[youenn fablet]

getDisplayMedia has changed a lot behind the scenes.
Is it still reproducing on recent macOS?
If not, we should probably close the bug.

[youenn fablet]

Closing as Configuration Change given the getDisplayMedia backend changed a lot. Please reopen if needed with repro steps (and or send a sysdiagnose privately to me).

[Martin Bartlett]

Your detailed steps and results indicate that the issue likely lies in the handling of screen sharing via the getDisplayMedia API in Safari on MacOS, particularly with Intel CPUs. It appears that the problem manifests when screen sharing involves media playback (like a YouTube video) in full screen or on another desktop, resulting in significant delays or freezing.
Update Software:

Ensure that both MacOS and Safari are updated to their latest versions. Safari 15 has known issues that might be resolved in subsequent updates.
Screen Resolution and Performance:

Lower the resolution of the shared screen or the quality of the video being played. High resolution and full-screen videos consume more resources, potentially leading to delays.
Browser Compatibility:

Test the screen sharing with different browsers on the MacOS devices involved. Sometimes, using Chrome or Firefox can yield better performance due to different implementations of WebRTC.
Optimize System Resources:

Close unnecessary applications and processes on Alice's machine to free up CPU and memory resources.
Network Conditions:

Ensure that both Alice and Bob have a stable and high-speed internet connection. Network instability can exacerbate the delay and freezing issues.
Technical Adjustments:
Throttling and Encoding Settings:

Adjust the encoding settings in your WebRTC implementation. Experiment with different bitrates and resolutions to find an optimal balance between quality and performance. https://snow-rider.io/
CPU Utilization: 

Monitor CPU utilization during the screen sharing session. High CPU usage on Alice’s machine might indicate that the system is struggling to handle the screen capture and encoding.
Safari Specific Workarounds:

Consider implementing Safari-specific workarounds or optimizations in your WebRTC code. Safari has some unique behaviors that might need tailored handling.
const constraints = {
  video: {
    frameRate: { ideal: 10, max: 15 },
    width: { ideal: 1280 },
    height: { ideal: 720 },
  },
  audio: false
};

navigator.mediaDevices.getDisplayMedia(constraints)
  .then(stream => {
    // Handle the shared stream
  })
  .catch(error => {
    console.error("Error accessing display media: ", error);
  });