Video on iOS doesn't render when toggling visibility

[AlanM]

Recently we've run into some issues with Flashphoner WebRTC on iOS 11 devices. When the video element is hidden and then shown, the video stops rendering. The audio continues to play. Through the WebRTC getStats API, I've been able to verify that the video data is still being streamed to the device, it's just not being rendered.

This poses an issue for us as we need to be able to toggle displaying the video while keeping the audio stream running in the background at all times.

This behavior was observed in the official FlashPhoner embed player demo (and in our custom FlashPhoner implementation).
Original test: WebCallServer version: 5.0.2570 w/ WebCallClient version: 0.5.25.2455
We also tried updating to the most recent versions (client 0.5.26.2455 / server 5.0.2650), but the issue still exists.

Here is some sample code to reproduce the issue:
https://codepen.io/anon/pen/qpaqqQ

 

[Max]

On iOS, playback has to be initiated by user action. E.g., as in the Embed Player example: https://github.com/flashphoner/flas...les/demo/streaming/embed_player/player.js#L93

This worked with WCS v. 0.5.26.2455 - 5.0.2663, iOS 11.2.1 (Safari, WebRTC)
- player.html: toggle button added to the player control panel

<button type="button" id="toggle">toggle</button>

- player.js, in init_page()

$("#toggle").click(function() {
    $("#remoteVideo").toggle();
    if ($("#remoteVideo").is(":visible")) {
        Flashphoner.playFirstVideo(remoteVideo);
    }
});

 

[AlanM]

I tried updating the player demo with the code you provider and still encounter the issue. The code you provided also results in an unwanted artifact. A black video box appears underneath of the primary video display as can be seen in this screenshot:
https://image.prntscr.com/image/1o9cxqV-RNq-icMY1LncSw.png

Sometimes it takes multiple toggles for the issue to occurr. In my tests it took as many as 8.

This was on WCS v. 0.5.26.2455 - 5.0.2650, iOS 11.2.1 (Safari, WebRTC)

 

[AlanM]

Just wanted to follow up and see if you were able to reproduce the issue with the video not rendering after toggling visibility

Thanks

 

[Max]

black video box appears underneath of the primary video display

Would not occur with the Player example if e.g. toggle visibility of video element not the div container:

$("video").toggle();

video not rendering after toggling visibility

Yes, the issue is reproducible, though rarely. Will inform when there is any update.