I have a React web app that I am wrapping with Capacitor. Most things work fine, but I can't get navigator.mediaDevices or navigator.getUserMedia to be anything other than undefined. I get no popup requesting the user's permission either.
I have pulled and built the example app at https://github.com/geckse/ionic-capacitor-webrtc-camera-example, and it works on my iOS 14.5 iPhone sim - hooray! Except on closer inspection, it uses Capacitor 2 and now depreciated functionality to request camera permissions. I tried using the same (depreciated) code in my Capacitor 3 app, but even that doesn't seem to do anything. I can't seem to find any information on how to request camera access properly for the Capacitor Webview in Capacitor 3.
I have the following in my Info.plist
<dict>
...
<key>NSCameraUsageDescription</key>
<string>To scan barcodes</string>
</dict>
I have been round and round message boards and forums, combing through loads of similar but not identical issues. The common thing seems to be that none of the example apps use Capacitor 3. I'm now at a loss, hence the stack overflow question. Any help would be greatly appreciated.
Alrighty - I finally fixed it. Such a simple solution too, so here it is for anyone with the same issue as me:
Turns out you have to have the microphone permission description in your Info.plist as well, otherwise mediaDevices is just undefined. Presumably this is because webRTC doesn't separate access to camera and microphone, so you can't have access to either without permission for both.
I now have the following in my Info.plist and it works perfectly:
<dict>
...
<key>NSCameraUsageDescription</key>
<string>To scan barcodes</string>
<key>NSMicrophoneUsageDescription</key>
<string>To allow camera access for barcode scanning</string>
</dict>