2

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?

Community
  • 1
  • 1
VikR
  • 4,818
  • 8
  • 51
  • 96
  • Are you running the PWA on an iOS device? It's a known issue that the camera access doesn't work in this case. See https://github.com/webrtc/samples/issues/933 – JSON Derulo Oct 25 '18 at 13:45
  • See my answer below on how to fix your coding solution and then encounter the issue JSONDerulo also mentions – Marcus Oct 25 '18 at 14:40

1 Answers1

10

Update - 19/11/2020

WKWebView can use getUserMedia in iOS 14.3 beta 1.

Update - 14/09/2019

There are changes to Safari on iOS 13 & Safari 13: https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes

SFSafariViewController has gained getUserMedia functionality (!!!, however I need to confirm this, please see below for reports of it working)

However WKWebView does not seem to gain getUserMedia functionality:

iOS 13 and Safari 13 release notes:

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

Marcus
  • 1,880
  • 20
  • 27
  • 1
    Whoa -- so to confirm, there is no way yet on IOS for a progressive web app to access the camera? – VikR Oct 25 '18 at 17:20
  • I read up on it at the github link @Derulo provided. It is shocking that Apple hasn't fixed this yet. Progressive web apps are coming on strong and Apple is in danger of losing users to Android over it. – VikR Oct 25 '18 at 21:41
  • @VikR At the time of writing I can confirm there is no way you can use getUserMedia on iOS outside the native Safari application. It was expected in iOS 12 but sadly nothing was announced. In ~September 2019 iOS 13 will be announced and it may appear then. It is a huge annoyance and blocker for a lot of my clients as websites are primarily marketed through social media and when a user opens the app inside of Facebooks built in browser (which uses a WKWebView) the AR functionality will not work. Grr! – Marcus Oct 26 '18 at 11:27
  • I did not know that about Facebook's built-in browser. This is very serious for many web developers. – VikR Oct 26 '18 at 17:31