getUserMedia in PWA with manifest on iOS 11

Question

I have created a PWA which uses WebRTC's getUserMedia to get a live camera stream. The PWA uses a manifest.json, and works great on Android.

On iOS however, the app also works if I open the link directly in Mobile Safari, but if I add it to the homescreen, it is undefined (as iOS only allows it in the Safari-context).

As a workaround, I would like to open the app in Mobile Safari instead of fullscreen mode, but I don't know how to do this, as it automatically opens fulscreen once it detects the manifest.json.

Does anyone have an idea as how to open an app with a manifest in Safari?

Thank you!

Answer 1

There is a way to open the PWA avoiding full screen mode. In manifest.json, change the display attribute to "browser".

"display": "browser"

Refer this documentation under section "Display". You can also consider "minimal-ui" option. Please keep in mind, when you make this change, it will not just reflect in iOS, but also in Android.

On the actual issue in accessing getUserMeida, I don't understand why its not working in full-screen mode. Its just a HTML5 feature and nothing specific to PWA. So ideally, it should work in full-screen mode as well. Try to capture for any error when you open in full screen mode and post that here if you find any. It might be due to permissions as well and I recommend solving the issue in full-screen mode for better user experience.

Answer 2

I figure out this by adding two manifest.json, one used by default for non ios devices and one for ios devices, I also create a detect.js script to detect wheter or not an ios device is accessing the pwa and change the manifest.json reference on the html. There is the code:

// Detects if device is on iOS 
const isIos = () => {
    const userAgent = window.navigator.userAgent.toLowerCase();
    return /iphone|ipad|ipod/.test( userAgent );
  }

// change manifest.json
if (isIos()) {
    document.getElementById("manifest").href = "ios-manifest.json";
}