Bug 176843 – getUserMedia results in black screen on iPhone 7 plus

• Status: RESOLVED
• Resolution: WONTFIX
• Component: WebRTC

[Jeremie Weldin]

getUserMedia results in black screen on iPhone 7 plus.

using the samples at webrtc.github.io/samples

[youenn fablet]

Hi Jeremie,
Thanks for filing this bug.

Some webrtc.github.io pages need to be updated in the way the handle video related to autoplay and playsInline.

Are you talking about https://webrtc.github.io/samples/src/content/getusermedia/gum/?

If so, you might be able to play the video by adding playsInline to it.
If you can plug your iPhone on a Mac and launch the web inspector to change the iPhone web page, you can do the following before clicking Allow to camera access:

$('video').playsInline = true;

Let me know if that works for you.

[Jeremie Weldin]

I was unable to test that way since my browser won't allow me to inspect the iPhone. I am not running the beta Safari or OS on my MacBook. However, I pulled down the project and ran it on a personal local web server and made the following changes, one at a time.

1. I added playinline as an attribute on the video tag.
2. I added $('video').playsInline = true; before the call to getusermedia in main.js.

With 1 I got a not allowed error.
With 2 I had the same behavior.

Mind you, this example works fine (and has since an early iOS 11 beta) with an iPad mini 3 that I have running iOS 11.

Also, see this thread:  https://forums.developer.apple.com/thread/79501

[Jeremie Weldin]

correction, i added playsinline in 1, not playinline.

[Jeremie Weldin]

I get the same behavior at simplewebrtc.com/demo and all of the other demo's I can find online.

[youenn fablet]

Can you try adding controls (video.controls = true) and clicking on the play button?

[Jeremie Weldin]

Created attachment 320668 [details]
iPhone

[Jeremie Weldin]

Created attachment 320669 [details]
iPhone 2

[Jeremie Weldin]

Created attachment 320671 [details]
iPad

[Jeremie Weldin]

Created attachment 320672 [details]
iPad 2

[Jeremie Weldin]

I will try this in a few moments, but I am pretty sure the pages work and its something wrong with webkit on iPhone. This is happening with even talky.io and other webrtc sites. The issue is specific to the iPhone or iPhone 7 plus. See the previously mentioned thread. iPads with iOS 11 seem to work fine with the examples. Android phones work fine with the examples. Desktop browsers also work. Just not iPhones.

Do you have an example site that should work with an iPhone 7 plus using iOS 11 GM?

(In reply to youenn fablet from comment #5)
> Can you try adding controls (video.controls = true) and clicking on the play
> button?

[Jeremie Weldin]

Woah! The .conrols = true didn't work, however making the video tag look like this: 
<video id="gum-local" playsinline controls="true"></video> worked!, it didn't autoplay, but it worked!

<video id="gum-local" playsinline controls="true" autoplay></video> fixed the autoplay. 

and now <video id="gum-local" playsinline autoplay></video> works. This did NOT work prior to this.

It still does not work at the webrtc.github.io page, but at least I know how to get it to work for my application. I still think there is a bug here in how it handles things. The iPad worked "out of the box" and still continues to work at the webrtc.github.io site and ALL the other sites. 

Perhaps the  bug should be renamed to "webrtc doesn't work on (some?) iPhones without playinline on the video tag.

Thanks for your help!

(In reply to Jeremie Weldin from comment #10)
> I will try this in a few moments, but I am pretty sure the pages work and
> its something wrong with webkit on iPhone. This is happening with even
> talky.io and other webrtc sites. The issue is specific to the iPhone or
> iPhone 7 plus. See the previously mentioned thread. iPads with iOS 11 seem
> to work fine with the examples. Android phones work fine with the examples.
> Desktop browsers also work. Just not iPhones.
> 
> Do you have an example site that should work with an iPhone 7 plus using iOS
> 11 GM?
> 
> (In reply to youenn fablet from comment #5)
> > Can you try adding controls (video.controls = true) and clicking on the play
> > button?

[youenn fablet]

> Mind you, this example works fine (and has since an early iOS 11 beta) with
> an iPad mini 3 that I have running iOS 11.

I also confirm that iPad is working but not iPhone so there is probably a bug there.

[pjcau]

Hi guys,

in our team we use the getUserMedia in Safari on iOS 11 GM in iPhones with this tricks:

<video muted playsinline autoplay>

Try it.
Let me know if that works for you.

[Jeremie Weldin]

Yes, I mentioned that in a previous comment. The fact that you need to add playsinline is still a bug. There are many existing sites that won’t work with iOS 11 on an iPhone unless modified.

[youenn fablet]

(In reply to youenn fablet from comment #12)
> > Mind you, this example works fine (and has since an early iOS 11 beta) with
> > an iPad mini 3 that I have running iOS 11.
> 
> I also confirm that iPad is working but not iPhone so there is probably a
> bug there.

Tested again and this was working on a custom iPad setup, not the regular one.

[youenn fablet]

See https://github.com/webrtc/samples/issues/929

[Radar WebKit Bug Importer]

<rdar://problem/34665269>

[youenn fablet]

Jeremie, https://webrtc.github.io/samples/src/content/getusermedia/gum/ now uses playsinline.

Let me know if that works for you or if you still need to do some additional trick.

[Jeremie Weldin]

It is working now. So do the other companies like Talky.io need to modify their code to work with iPhones? This seems like a bug with iPhone still, as existing sites don’t work. Thoughts?

[youenn fablet]

(In reply to Jeremie Weldin from comment #19)
> It is working now. So do the other companies like Talky.io need to modify
> their code to work with iPhones?

Yes, they will probably need to add playsinline as well.
Annoying but such websites will probably need to do some additional adoption anyway, like autoplay for instance.

> This seems like a bug with iPhone still, as
> existing sites don’t work. Thoughts?

iPhones Safari has playsinline since the very beginning and a lot of sites depend on it.
I guess one could argue to make an exception for mediastream based video elements.

[MH]

I confirm this bug.

There is test pen
https://codepen.io/hejral/pen/eeaKrx?editors=1011

And yes, with "playsinline" this works also for iPhone ;-)
With no playsinline this works everywhere else.

I must agree with comment "The fact that you need to add playsinline is still a bug."

[MH]

PS: It seems that problem is with all iPhones, I tested with SE.

Also with iPads Safari, there is no problem...

[youenn fablet]

Closing as WontFix for now.
If the issue is bigger than playsinline, please reopen it.
Not requiring playsinline anymore on iPhone would potentially break a lot of websites.

[Kathirvelu M]

Yes, After adding the "autoplay playsinline controls=true" in HTML Video tag, its not working in iphone safari browser.