Progressive Web App: Error Accessing navigator.med

Question

My app accesses the camera for purposes of webrtc, and works correctly.

I'm using pwacompat from Google Labs to add pwa features to my web app.

When running the app as a pwa, everything works fine until I access the camera. Then I get this console.log error:

getUserMedia failedObject {type: "error", msg: "undefined is not an object (evaluating 'navigat…"}

getUserMedia failed type: error msg: undefined is not an object (evaluating 'navigator.mediaDevices.getUserMedia')

What am I missing?

Answer 1

Edit

In short: A PWA or any website being used on iOS outside of the native Safari app will not be allowed access to getUserMedia as Apple is deliberately blocking access for "Security concerns". This includes any websites saved to the homescreen and/or viewed inside another application such as Facebook. The same restrictions apply to Android however on Android the app developer can ask for Camera permissions and get around this. (This means if you are a website developer and you need camera functionality, you will need to ask Facebook, etc, to rebuild their app to allow this on Android).

See their bug tracker here: http://www.openradar.me/33571214 and https://forums.developer.apple.com/thread/88052

---

From web based Safari experiences to Native Android, etc. I make crossplatform Apps in web and native for a living. There are several potential problems you will encounter with getUserMedia. To workout what is causing potential problems you should follow this list in order to create a successful application.

Your problem is specifically 1. because you are not successfully querying the API. Nevertheless the MediaCapture from getUserMedia should fail because after fixing 1. you will encounter 2. and 3.

1. API Polyfil - Always make sure you include the latest getUserMedia adapter to stop any cross-platform inconsistencies in the getUserMedia API. Some browsers might use the old getUserMedia API (via 'navigator.getUserMedia) and have not been updated (to use navigator.mediaDevices.getUserMedia). You should also check this link for other needed polyfills.
2. Support - Check CanIUse for getUserMedia support for your target audience and make sure you have the necessary fallbacks. Your fallback for if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { return true; } else return false; returns false, and if getUserMedia throws and error ideally should be the same.
3. Permissions - Even though you include pwacompat it does not mean the browser window has the permissions to access the camera. This is because not all browsers are equal! iOS 11 allows getUserMedia access inside of the native Safari app only. However you cannot access getUserMedia on iOS 11 WKWebView or UIWebViews. When you save an app to the homepage it is hosted inside a WKWebView. Thus an experience which works inside of Safari will not work when saved to the homescreen or inside another application. Confusing eh?..! Thus if you want your experience to work you need to tell the user when they open upside another app that they must open the website in safari for real-time camera access. There is no way around this. On Android an app maker can override this permission and allow access to getUserMedia. If you use macOS or Windows you need to make sure the browser shell also has getUserMedia compatibility (e.g. Edge+, Chrome, Firefox, etc)
4. Security - HTTPS websites can only access the camera (unless on localhost). Check the location prototcol '(location.protocol === 'https:') ? true : false;' to see if you are allowed to get a successful MediaCapture request

The following is a test link I use for platform support: https://github.com/marcusbelcher/wasm-asm-camera-webgl-test

In my GitHub there are also Android and React-native getUserMedia solutions