Bug 176843 - getUserMedia results in black screen on iPhone 7 plus
Summary: getUserMedia results in black screen on iPhone 7 plus
Status: RESOLVED WONTFIX
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebRTC (show other bugs)
Version: Safari Technology Preview
Hardware: iPhone / iPad iOS 11
: P2 Critical
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-09-13 09:04 PDT by Jeremie Weldin
Modified: 2018-09-18 22:37 PDT (History)
7 users (show)

See Also:


Attachments
iPhone (429.36 KB, image/png)
2017-09-13 12:06 PDT, Jeremie Weldin
no flags Details
iPhone 2 (534.25 KB, image/png)
2017-09-13 12:07 PDT, Jeremie Weldin
no flags Details
iPad (318.73 KB, image/png)
2017-09-13 12:07 PDT, Jeremie Weldin
no flags Details
iPad 2 (374.74 KB, image/png)
2017-09-13 12:08 PDT, Jeremie Weldin
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Jeremie Weldin 2017-09-13 09:04:55 PDT
getUserMedia results in black screen on iPhone 7 plus.

using the samples at webrtc.github.io/samples
Comment 1 youenn fablet 2017-09-13 09:12:31 PDT
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.
Comment 2 Jeremie Weldin 2017-09-13 11:43:49 PDT
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
Comment 3 Jeremie Weldin 2017-09-13 11:44:54 PDT
correction, i added playsinline in 1, not playinline.
Comment 4 Jeremie Weldin 2017-09-13 11:50:57 PDT
I get the same behavior at simplewebrtc.com/demo and all of the other demo's I can find online.
Comment 5 youenn fablet 2017-09-13 12:04:34 PDT
Can you try adding controls (video.controls = true) and clicking on the play button?
Comment 6 Jeremie Weldin 2017-09-13 12:06:09 PDT
Created attachment 320668 [details]
iPhone
Comment 7 Jeremie Weldin 2017-09-13 12:07:21 PDT
Created attachment 320669 [details]
iPhone 2
Comment 8 Jeremie Weldin 2017-09-13 12:07:48 PDT
Created attachment 320671 [details]
iPad
Comment 9 Jeremie Weldin 2017-09-13 12:08:20 PDT
Created attachment 320672 [details]
iPad 2
Comment 10 Jeremie Weldin 2017-09-13 12:15:52 PDT
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?
Comment 11 Jeremie Weldin 2017-09-13 12:38:59 PDT
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?
Comment 12 youenn fablet 2017-09-13 15:42:36 PDT
> 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.
Comment 13 pjcau 2017-09-19 00:47:39 PDT
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.
Comment 14 Jeremie Weldin 2017-09-19 04:54:35 PDT
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.
Comment 15 youenn fablet 2017-09-20 08:42:32 PDT
(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.
Comment 16 youenn fablet 2017-09-20 08:48:19 PDT
See https://github.com/webrtc/samples/issues/929
Comment 17 Radar WebKit Bug Importer 2017-09-26 13:34:00 PDT
<rdar://problem/34665269>
Comment 18 youenn fablet 2017-09-28 09:41:54 PDT
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.
Comment 19 Jeremie Weldin 2017-09-28 10:29:49 PDT
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?
Comment 20 youenn fablet 2017-09-28 10:38:00 PDT
(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.
Comment 21 MH 2017-12-07 13:33:55 PST
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."
Comment 22 MH 2017-12-07 15:13:48 PST
PS: It seems that problem is with all iPhones, I tested with SE.

Also with iPads Safari, there is no problem...
Comment 23 youenn fablet 2018-03-12 14:01:30 PDT
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.
Comment 24 Kathirvelu M 2018-09-18 22:37:49 PDT
Yes, After adding the "autoplay playsinline controls=true" in HTML Video tag, its not working in iphone safari browser.