Restore streaming from a chosen camera in iOS Safari

Background video streaming is forbidden in iOS by default. Therefore, if the iOS Safari application window goes to background, the browser detaches video source (camera) from video tag used to render and traslate a video stream. When the browser window returns to foreground, browser may ether not attach the video source back to the video tag or attach wrong camera, depending on iOS version.

In this case, the document visibilitychange event should be handled and, if HTML page becomes visible (i.e. the browser window is restored to foreground), switch to a chosen camera explicitely

1. The visibilitychange event handler registration

code

    if (Browser.isiOS() && Browser.isSafariWebRTC()) {
        document.addEventListener('visibilitychange', () => {
            onVisibilityChanged();
        });
    }

2. Switching to the camera when the page is visible

code

function onVisibilityChanged() {
    if (Browser.isiOS() && Browser.isSafariWebRTC() && document.hidden !== undefined) {
        // iOS Safari may change camera when rising from the background, use chosen one explicitly
        if (publishStream && !document.hidden) {
            publishStream.switchCam($('#videoInput').val()).then(function(id) {
                console.log("Switched explicitly to camera " + id);
                $('#videoInput option:selected').prop('selected', false);
                $("#videoInput option[value='"+ id +"']").prop('selected', true);
            }).catch(function(e) {
                console.log("Error " + e);
            });
        }
    }
}

The trick works with WebSDK 2.0.248 in iOS Safari 12.5.7 and above.

Space shortcuts

Page tree