An issue with screen sharing in Safari 17.4

Video SDK Web
1

An issue with screen sharing in Safari.
The issue occurs only in Safari.
Screen sharing works fine in all other browsers.

When using screen sharing in Safari, a WebSocket connection failure occurs:
In “socket.io-client” we get the ‘disconnect’ event, and in Zoom, we also get the ‘network-quality-change’ event with a level value of 0. This happens after about 30 seconds of using screen sharing in Safari

    const onScreenShareClick = useCallback(async () => {
        if (isScreenSharing) return;

        const selfShareCanvas = document.getElementById(mediaStream.isStartShareScreenWithVideoElement() ? SELF_SHARE_VIDEO : SELF_SHARE_CANVAS);
        if (mediaStream?.getShareStatus() === ShareStatus.End && selfShareCanvas) {
            await mediaStream?.startShareScreen(selfShareCanvas, {
                optimizedForSharedVideo: true,
            });
        }
        closeControl();
    }, [mediaStream, isScreenSharing]);

import { io } from "socket.io-client";
...

    const socket = io(url, {
        secure: !isLocalhost,
        transports: ['websocket', 'polling', 'flashsocket']
    });

    socket.on('disconnect', (reason) => {
        console.info(`Socket was disconnected because ${reason}`);
    });

Socket was disconnected because ping timeout

zmClient.on('network-quality-change', onNetworkChange);

const onNetworkChange = useCallback((payload) => {
        const { userId, type, level } = payload;
        const currentUserId = zmClient.getSessionInfo().userId;

        if (currentUserId === userId) {
            const data = {
                date: Date.now(),
                networkQualityLevel: level
            };

            if (level === 0) {
                store.dispatch(sendZoomStatistics({
                    networkQualityLevelData: data,
                    method: 'FE useParticipantNetworkQualityLevel',
                    message: 'NetworkQualityLevel is equal to 0',
                }, 'Network Quality Level'));
            }

            networkQualityLevelDataRef.current = [
                ...networkQualityLevelDataRef.current,
                data
            ];
        }
...
    }, [zmClient]);

SharedArrayBuffer is disabled
Zoom Video SDK 1.11.6
React 17.0.2
socket.io-client: 4.7.5

OS: macOS Sonoma 14.4
Browser: Safari Version 17.4

2

Hey @sergey77

Thanks for your feedback.

We tested in our network environment and haven’t found network disconnection issues.

Could you share some problematic Session IDs with us for troubleshooting purposes?

Thanks
Vic

3

Hi @vic.yang ,
Thanks for the answer.

While re-running the test, I managed to reproduce the network disconnection issues in Safari without using screen sharing :

sessionId: “TMAAyBWrRg2GSHpSBoEklA==”
topic: “newtest20062024-4”
userId: 16779264
userName: “Test706 Test706”

or

sessionId: "4B7ZeYUURb6I9QEbStQtJw=="
topic: "newtest20062024-7"
userId: 16778240
userName: "Test706 Test706"
4

Hey @sergey77

Thanks for sharing the session IDs with us.

TMAAyBWrRg2GSHpSBoEklA==
4B7ZeYUURb6I9QEbStQtJw==

After analyzing the logs, we found some issues.

  • Video SDK will load WASM files to process the media stream. In the logs, we found an issue with the MIME settings of the wasm file. The expected Content-Type is application/wasm, but it is actually returning application/octet-stream.

  • Regarding the disconnection issue. We leverage the heartbeat packets to maintain the connection with the media server. If no messages are returned within 30 seconds, we assume there is an issue with the connection to the server and will disconnect and attempt to establish a new connection.
    Can you check the network conditions at the time? Alternatively, you can inspect it in the dev tools network panel to see if there are any sent or received WebSocket messages.

Thanks
Vic

5

Hi @vic.yang ,

Regarding the network conditions during the test, there were no issues with the network.
I conducted tests in different browsers and only Safari had problems connecting to the network while using the Video SDK in our application.

In the dev tools panel, I see the message “WebSocket connection to ‘wss://****.com/socket.io/?EIO=4&transport=websocket’ failed: WebSocket is closed before the connection is established.”

The application is disconnecting the websocket due to “ping timeout”.

At the same time, we are receiving the ‘network-quality-change’ event from Zoom:

{
    type: "downlink", 
    level: 0
}

{
    type: "uplink", 
    level: 0
}
6

Hey @sergey77

Could you inspect for any *.zoom.us related websocket connections? See if there are long periods without message transmission.

If that’s the case, it indicates a network issue, possibly due to a proxy server configuration or other reasons.

Or could you try WebSocket Echo Server to do a verification test?

Thanks
Vic

7

Hi @vic.yang ,

While starting Zoom VIdeoSDK in Safari, I ran a test in Chrome and Safari, splitting the screen into three parts.
The test on websocket worked correctly without failures.
However, when starting screen sharing in Safari, I got all the errors that I mentioned above.
At the same time, in the dev tools panel in Safari, *.zoom.us related websocket connections look working - their “Transfer Size” indicator continues to increase.

Yesterday I got the specified errors simply when starting a Zoom room in Safari.
Today, however, if the user is simply in a Zoom room without using screen sharing, everything works, but when starting screen sharing by a user who uses Safari, I get the specified issue again

Screenshot 2024-06-21 at 16.20.23
Screenshot 2024-06-21 at 16.20.232416×824 146 KB

8

Hi @vic.yang ,

I made an additional investigation and managed to find out what exactly breaks Safari’s work and leads to disconnection issues - this is “enforceMultipleVideos: true” in the client’s initialization. Here is the code:

    const zmClient = ZoomVideo.createClient();
    await ZoomVideo.preloadDependentAssets(`${window.location.origin}/lib`);
    await zmClient.init("en-US", `${window.location.origin}/lib`, {
        webEndpoint: window?.webEndpoint ?? "zoom.us",
        stayAwake: true,
        patchJsMedia: true,
        leaveOnPageUnload: true,
        enforceVirtualBackground: true,
        enforceMultipleVideos: true,
    })

Please note that our app uses “SharedArrayBuffer is disabled”.

I’m sure this is the bug on Zoom’s side. I really hope it will be fixed as soon as possible.

9

Hey @sergey77

Can I confirm if starting screen sharing on Safari affects the websocket connection for socket.io?

I tested this on the Video SDK web sample app with the same client.init configuration and couldn’t reproduce the issue.

Could you test our sample app to see if you can reproduce the issue? Alternatively, could you provide a simple example that consistently reproduces the issue? This would help us troubleshoot the issue more effectively.

Thanks
Vic