Inquiry Regarding Connection Timeout Issue during Network Switching with Room API and Video Streaming

[hyuk]

Hi,

We are currently experiencing challenges in our Flashphoner implementation, specifically during video streaming using the Room API. When transitioning from LTE to WiFi, a connection timeout issue occurs, and the error message "The operation couldn't be completed, operation timed out" appears roughly 30 seconds after the network switch.

In an attempt to address this issue, we've made some adjustments to the WebSocket ping mechanism in our code, as outlined below:

flashphoner.js
var wsPingSender = new WSPingSender(options.pingInterval || 5000);
var wsPingReceiver = new WSPingReceiver(options.receiveProbes || 5000, options.probesInterval || 5000);

Despite these modifications, we're still encountering delays in detecting network transitions and experiencing timeouts during the network switch.

Inquiry:
We have adjusted the ping and probes intervals for better responsiveness during network transitions. However, we are still observing delayed timeouts during network switching. Could you please provide guidance on additional measures or settings to promptly detect changes in network state and handle connection issues?

Any insights or assistance you can offer would be greatly appreciated.

Thank you for your attention to this matter.

( The problem only occurs on iPhone. )

 

[Max]

Good day.

flashphoner.js
var wsPingSender = new WSPingSender(options.pingInterval || 5000);
var wsPingReceiver = new WSPingReceiver(options.receiveProbes || 5000, options.probesInterval || 5000);

You don't need to tweak WebSDK because the options are available when creating a websocket session (GitHub)

    Flashphoner.createSession({
        urlServer: url,
        receiveProbes: receiveProbes,
        probesInterval: probesInterval
    }).on(SESSION_STATUS.ESTABLISHED, function (session) {
        ...
    });

Inquiry:
We have adjusted the ping and probes intervals for better responsiveness during network transitions. However, we are still observing delayed timeouts during network switching. Could you please provide guidance on additional measures or settings to promptly detect changes in network state and handle connection issues?

You can use navigator.connection browser API property: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection
Please see the example of network change detector (GitHub)

function networkChangeDetector() {
    // The API is supported in Chromium browsers and Firefox for Android
    if (Browser.isSafariWebRTC()) {
        return;
    }
    if (Browser.isChrome() || (Browser.isFirefox() && Browser.isAndroid())) {
        connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
        if (connection) {
            connectionType = connection.type;
            if (Browser.isFirefox()) {
                connection.ontypechange = onNetworkChange;
            } else {
                connection.onchange = onNetworkChange;
            }
        }
    }
}

function onNetworkChange() {
    if (connection) {
        if (connection.type === undefined) {
            return;
        }
        // If network type is changed, close the session
        console.log("connectionType = " + connectionType + ", connection.type = " + connection.type);
        if (isNetworkConnected() && connection.type != connectionType) {
            if (currentSession.getStatus() == SESSION_STATUS.ESTABLISHED) {
                let logger = Flashphoner.getLogger();
                logger.info("Close session due to network change from " + connectionType + " to " + connection.type);
                currentSession.sdkSession.disconnect();
            }
        }
    connectionType = connection.type;
    }
}

But this property is not supported in Safari browser, so on iPhone you have to wait for 30 seconds until the device network stack notify the browser about connection change.

 

[hyuk]

Thank you for your kind and quick response.

I'm using RoomApi.connect.

RoomApi.connect({urlServer: wssUrl, username:  ....

roomApi calls for createSession in the sdk as shown below, but I thought it didn't work because the option was missing.
Did I understand it wrong?

flashphoner.js

var appSession = function (options) {
    /**
     * Represents connection to room api app
     *
     * @namespace roomApi.RoomSession
     */
    var callbacks = {};
    var rooms = {};
    var username_ = options.username;
    var exports;
    var roomHandlers = {};
    var session = Flashphoner.createSession({
        urlServer: options.urlServer,
        mediaOptions: options.mediaOptions,
        appKey: (options.appKey && options.appKey.length != 0) ? options.appKey : ROOM_REST_APP,
        custom: {
            login: options.username,
            token: options.token
        }
    }).on(SESSION_STATUS.ESTABLISHED, function (session) {
        if (callbacks[session.status()]) {
            callbacks[session.status()](exports);
        }
    }).on(SESSION_STATUS.APP_DATA, function (data) {
        var payload = data.payload;
        if (!payload || !payload.roomName) {
            console.error("Received app data does not contain 'payload' or 'payload.roomName' field. Received data: " + JSON.stringify(data));
            return;
        }
        var roomName = payload.roomName;
        if (roomHandlers[roomName]) {
            roomHandlers[roomName](payload);
        } else {
            console.warn("Failed to find room with name " + roomName);
        }
    }).on(SESSION_STATUS.DISCONNECTED, sessionDied).on(SESSION_STATUS.FAILED, sessionDied);

Even if you have the code above, you're saying that there is no improvement on iOS, right?

 

[Max]

I'm using RoomApi.connect.

Yes, in this case the ping checking options are not available on top level, so flashphoner.js should be patched. We raised the ticjket WCS-4037 to add the parameters to RoomApi.connect.

Even if you have the code above, you're saying that there is no improvement on iOS, right?

Unfortunately, yes. Both MacOS and iOS Safari do not support navigator.connection and even navigator.webkitConnection, so there is no way to detect a network connection state from Javascript in browser.