Cordova-plugin-iosrtc: iOS 11 issues with video element sitting on top of video

[magestican]

I have put a bounty on this, the requirements of the bounty are as follows :

Title : Hide native video controls for cordova-plugin-iosrtc on iOS 11 when video z-index -1

Description : Use any means available (objective-c/swift) to interact with the iOS 11 native video layer and disable native video controls.
Do this on an iOS app built using cordova and the cordova-plugin-iosrtc plugin. The z-index of the video element has to be -1 sitting behind the webkit html UI layer.

Possible ideas for a fix : https://stackoverflow.com/questions/37875659/avplayer-swift-how-do-i-hide-controls-and-disable-landscape-view/37875740#37875740

Demonstration of what needs to be removed (media control) :

Demonstration of what should this look like :

The video control image of a play button with a dash you see here is on top of the real webrtc video streaming live behind it.

What has to happen is that the video has to be visible.

---

ORIGINAL TEXT :
I am preparing to update my app for future iOS 11 users and I have found an issue which is probably related to this library since here we override the video element behavior.

Basically this is my problem :

Any help ?

I have tried all kinds of css selectors and sub selectors to get rid of safari media controls but nothing makes this disappear, its basically a reverse play button with a slash.. My video element does have a src and a blob url in that src..do I need something else ?

[saghul]

Is this an iOS 11 only issue? Can you reproduce it on iOS 10?

[magestican]

This is an ios 11 only issue, I cant reproduce it on ios 10. I am using a
production app which works fine on ios 10 but shows this issue on ios 11
beta.

2017-07-07 16:47 GMT+10:00 Saúl Ibarra Corretgé [e-mail]:

Is this an iOS 11 only issue? Can you reproduce it on iOS 10?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/BasqueVoIPMafia/cordova-plugin-iosrtc/issues/299#issuecomment-313601477,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEBGH_T9tMbIx3maXBx8-W1IgM3Gec1aks5sLdSdgaJpZM4OQguP
.

[snakeman21]

Why not just do an if(parseInt(iosVersion) < 11) type of thing, since WebRTC is built into Safari in iOS 11 ;)

[magestican]

After doing more investigation, this happens when I set -1 to the z-index of the video.

If I give a 1 z-index to the video however, the video renders on top of the UI.

Another thing I tried was to change the width and height of the video, if I give a height of 0px the watermark native control goes away, but when I call cordova.plugins.iosrtc.refrechVideos() this updates the native video rendered by this plugin to have height 0px and thus is no longer visible.

This seems to be 100% related to a native video layer sitting at z-index 0 on ios 11. Any ideas how to solve this issue?

[saghul]

Sorry, I have no idea how to solve that currently.

-Saúl

On Jul 10, 2017, at 02:04, Bryan Arbelo [e-mail] wrote:

After doing more investigation, this happens when I set -1 to the z-index of the video.

If I give a 1 z-index to the video however, the video renders on top of the UI.

Another thing I tried was to change the width and height of the video, if I give a height of 0px the watermark native control goes away, but when I call cordova.plugins.iosrtc.refrechVideos() this updates the native video rendered by this plugin to have height 0px and thus is no longer visible.

This seems to be 100% related to a native video layer sitting at z-index 0 on ios 11. Any ideas how to solve this issue?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[metehanm4]

i have same problem at iOS 10.3 and 9.0 too

[D-Marc1]

This is a pretty tough issue to solve actually. If I knew what that new video overlay thing in iOS 11 was called, maybe I could disable it natively, but I couldn't find anything about it online. To make matters worse, this plugin might be necessary for iOS 11 after all, as getUserMedia() doesn't seem to work on the latest developer beta in with "built in Safari support". Maybe the official release will, but there's no info on that anywhere.
@ibc, maybe you know the answer to this?

Update: Something like this https://stackoverflow.com/a/37875740 looks like it could be the solution. Can't say for sure, but I'll test it out once I have more free time.

[markjrodrigues]

Bounty details available at https://www.bountysource.com/issues/46981175-ios-11-issues-with-video-element-sitting-on-top-of-video

[VinceOPS]

@D-Marc1 Hi Daniel, I don't know if it helps, regarding what you said about getUserMedia:

To make matters worse, this plugin might be necessary for iOS 11 after all, as getUserMedia() doesn't seem to work on the latest developer beta in with "built in Safari support"

https://github.com/eduardolundgren/tracking.js/issues/228

Safari 11.0 will be implementing User Media functionality, however, they will be using the newer navigator.mediaDevices.getUserMedia api, instead of the deprecated navigator.getUserMedia.

[D-Marc1]

@VinceOPS thank you. That may be the best solution after all. Didn't realize that's why it didn't work. I'm gonna load up iOS 11 on my phone again this weekend. I recall having an issue with navigator.mediaDevices.enumerateDevices() as well, but maybe there's something similar I can use instead. Using built in WebRTC on Safari would be awesome if everything works well.

[D-Marc1]

Ok so turns out all of the WebRTC functions work perfectly in both desktop and mobile Safari 11. However, they don't work in neither UIWebView nor WKWebView. People seem to be saying the same thing on this Stack Overflow question. Maybe the official release will have built-in WebRTC support, but this doesn't feel promising.

In regards to using this plugin on iOS 11, here's what I figured out. If you look in the shadow DOM, there's a child div with the class name .media-controls-container. If I inspect it and manually add display: none, then the weird overlay disappears. The issue is that I can't figure out how to access the element in CSS though. I tried doing something like video /deep/ .media-controls-container, even though /deep/ is apparently deprecated. Maybe someone who understands the shadow DOM can provide the answer.

[D-Marc1]

Pleased to announce that I figured out a solution! 😀 This is a perfect example of a problem that takes forever to come up with an answer, but ends up being dead simple. Add
<preference name="AllowInlineMediaPlayback" value="true" /> to your config.xml and add this attribute to your <video> tag like so: <video playsinline>.

I think this issue can be marked as resolved now.

[magestican]

@D-Marc1 thats an awesome fix! Thank you for your time, @markjrodrigues will be assigning the bounty to you, make an account in bountysource if you please and give it to him.

[D-Marc1]

Crazy how simple it ended up being haha. I was glad to help, since I'm in the same position as you. That would have sucked to have this problem happen in production when iOS 11 comes out. I really hope the web view will have built in WebRTC soon though.

Thank you so much for the offer guys! That's very generous. I just made an account and applied for the bounty.

[markjrodrigues]

Thanks @D-Marc1 really appreciate the quick turn-around. I am approving the bounty now :)

[magestican]

I am closing this issue, an entry in the repo documentation should be added.

[markjrodrigues]

@D-Marc1 Can you please claim the bounty on https://www.bountysource.com/issues/46981175-ios-11-issues-with-video-element-sitting-on-top-of-video . I think you need to do this before I can approve.

[D-Marc1]

Just claimed it. Thank you so much for your generosity! More importantly, I'm so glad we'll all be able to use this in iOS 11 without this annoying overlay.

I agree that this should be added to the documentation, since this plugin will be unusable in iOS 11 without it. Maybe I'll send a pull request for it soon.