I am building a webrtc calling app which will allow people to make calls from a mobile website to a native app. This question is about the website, which I am building in reactjs.
Everything is working fine on safari mobile, but I wanted to give the user the ability to see their interlocutor, full screen.
I have implemented a simple function which calls the webkitEnterFullscreen() on the html ref for the video container I have on the website. It goes full screen, just as I want.
However, when the user then clicks "x" to leave full screen mode, the video reverts to the container, but freezes. I have tried to add code calling .play() on the element but no such luck. It is only if I reload the entire page, that I can get the stream reattached and playing (after going through the WebRTC video and audio permissioning again).
Is this a permissioning issue? If, while the video is frozen, I again activate full screen mode, and then select the "play" button on safari's native controls, the stream plays.
So basically I am asking this: If I have already accepted the permissions to have a live audio/video WebRTC stream, and the participant stream appears video and audio, and I expand that video container to full screen, and then close the full screen option, how can I get the video to continue to play, and not freeze?