iOS 11 Safari Needs Additional Properties

[kylemcdonald]

Browsers and versions affected

iOS 11 Safari on iPhone (not on iPad)

Description

getUserMedia() does not start unless some additional properties are added to the <video> tag: playsinline and autoplay, and controls="true". Details are being tracked in this thread. It looks like once you run an example with controls="true" once, then it's possible to remove the controls for that page in the future. A modified working example is here.

Steps to reproduce

Open the gum sample on an iPhone 6S running iOS 11 Safari.

Expected results

Shows video.

Actual results

Video is black with no errors.

[fippo]

@youennf you might want to take a look

[tkbremnes]

I've verified that it works. How we at appear.in solved it:

// Hacks for Mobile Safari
video.setAttribute("playsinline", true);
video.setAttribute("controls", true);
setTimeout(() => {
    video.removeAttribute("controls");
});

Update: you don't need the controls=true hack above, just the playsinline.

[youennf]

Use of playsinline is currently required on iOS to actually play any video inline.
There is no special getUserMedia/webrtc treatment here at the moment.

The need for the controls="true" trick is unexpected so there is probably a bug here.
tkbremnes, are you confirming that the "controls" trick was needed for you?
You need to do that for every page load, every video element?

[tkbremnes]

I'll have a look and see if the controls=true is actually needed.

[tkbremnes]

It appears that the controls=true thing wasn't needed. Thanks :)

[benbro]

In my tests controls="true" is needed.
Without it remote stream doesn't play.

[youennf]

See also related #926

[seeingwithsound]

I have a WebRTC app that works in Firefox and Chrome on Android and Windows, but user reports tell me that it still fails in Safari 11 on iOS 11. What could I be missing? I've added the playsinline to The vOICe Web App https://www.seeingwithsound.com/webvoice.htm

Thanks!

[youennf]

Difficult to say.
Loading your web site on Safari, I can see that two NotSupported exceptions are raised in your web audio code, when trying to call createBuffer on a webKitAudioContext.
Is that the issue you are talking about?
If so, it probably means that some of the parameter values of the sample rate or the number of channels might not supported.

[seeingwithsound]

It might be. Blind iPhone users told me that they got no sound whatsoever, so the exception would explain that. Unfortunately I have no iPhone or iPad so am for the moment working with educated guesses. I'm using 2-channel stereo with a 16000 Hz sample rate, which is a very common format (AFAIK Web Audio does not support querying supported formats https://webaudio.github.io/web-audio-api/). Thank you for trying, because it gives me a useful hint in what direction to look. I'll Google around some more. Perhaps it is as trivial as using a sample rate of 22050 instead of 16000. The former link states "An implementation MUST support sample rates in at least the range 8000 to 96000", but an older version stated "An implementation must support sample-rates in at least the range 22050 to 96000" https://groups.google.com/a/chromium.org/forum/#!topic/blink-reviews/a_OfM-a5ztI so maybe Apple used the older spec which could exclude 16000?

[youennf]

Is is probably not the right place, might be better to file a bug in bugs.webkit.org.
WebKit is implementing an older WebAudio spec version so 16000 is probably unsupported. 22050 should.

[youennf]

Note also that iPhone/iPads might require a user gesture to produce sound.

[seeingwithsound]

Thanks a lot! I've modified my web app to use a sample rate of 22050 instead of 16000 to see if that makes a difference https://www.seeingwithsound.com/webvoice.htm (this might require a browser cache refresh). Yes, I am aware of the annoying gesture requirement and have advised blind testers to try press the app's Reset button to get things going (which by itself ought to sound a 2-tone beep). If the main issue is indeed the 22050 vs 16000 then I'll file a bug report about it (the 16000 was never a problem in Firefox, IceWeasel, Chrome and Edge).

[youennf]

Loaded and I now get a gum prompt and see b/w frames...

[seeingwithsound]

Cool, that is what is supposed to happen. Getting any sounds associated with the B&W camera frames?