webkitEnterFullScreen API is supported on iOS for video element, but not for a div element. Also as a fullscreen demo website shown, Safari on macOS supports div element but not on iOS. Is there any plan to add the support in iOS? If not is there any way to fullscreen a div element or make it run as fullscreen on Safari iOS?
Post
Replies
Boosts
Views
Activity
I'm using WebRTC on iOS Safari in a client-server model where the browser serves as the client to receive media stream from a WebRTC server.On the client side, we ask the user for microphone access and use addTransceiver() API to negotiate the PeerConnection with the server. Once the browser gets the media stream with both video and audio from the server, the video will automatically play with "autoplay" and "playsInline" attributes in the <video>.In cases where the user declines the microphone access, the video will not be automatically played. According to Webkit doc, this is expected because it's a one-way video conference scenario, and requires user gesture to start the video. However I'm able to start the video programmatically in peerconnection.ontrack() callback, which I'm not sure if this is an expected behavior. Because as the Safari blog described, the video requires user gesture such as "a handler for a touchend, click, doubleclick, or keydown event". In this case, is peerconnection.ontrack() counted as a user gesture? Is it the best way to autoplay to video in this scenario?Additionally we noticed that on MDN doc, addTransceiver() API is tagged as "not supported" for iOS Safari. We've been testing on iOS 13.4.1 and it was working fine. Is this API already fully supported?Tested device/OS:iPhone 11 with iOS 13.4.1Code details:<video autoplay playsInline />addTransceiver() API:peerconnection.addTransceiver('video', {direction: 'recvonly'});
userMediaStream = await navigator.mediaDevices.getUserMedia({audio: true});
peerconnection.addTransceiver('audio', {direction: 'sendrecv'});
// we will re-add a transceiver with 'recvonly' audio if the user declines microphone accessvideo.play() on ontrack callback:peerconnection.ontrack = (event: RTCTrackEvent) => {
videoElement.srcObject = event.streams[0];
if (this.videoElement.paused) {
this.videoElement.play();
}
};