Fixing Cordova Camera Issue On iOS

22 Dec 2017   No Comments   756 Views

I'm currently developing a mobile app with Cordova 7.1/Ionic 1.3 and we're targetting both Android and iOS platforms. At the heart of our application, we need access to Camera features for recording audio/video and taking pictures. We use cordova-plugin-media-capture to access the device camera, and everything works perfectly fine on Android. However, the app crashes on iOS 10/11 when you try to use the camera. No error messages, no warning no nothing. The app just crashes and fails silently. So I've been banging my head against the wall trying to understand the problem.

After much investigation and going through StackOverflow threads, I learned to my surprise that the Xcode project generated by Cordova, lacks the required access permissions in the info.plist file. One step closer, now we know what's causing the app to crash. Turns out iOS 10 specifically, terminates your application if the required privacy permissions are not found to be valid. Solution? configure access permissions in the iOS build. But how?

If you google Cordova iOS 10 Camera Permissions you'll find loads of threads addressing this issue. Like this one on GithHub. You can override config settings for each platform by hand, or you could use <edit-config> which was introduced in Cordova 5. It isn't quite straightforward though, not optimal. Also, there have been a few people who suggested you can fix this problem by adding CDV-* key/value pairs in your config.xml, which of course didn't work. Let's stop this horrible search for a solution right here, and use a cordova plugin for the win.

 

iOS Camera Permissions Plugin

I tried everything I could find on the internet, only to fail. None of the methods worked and overriding permissions manually, is not at all an option. Why? Simply because you should be able to clone a repository, install dependencies and build the project without an error. Good news is someone already took care of this with a beautiful plugin.

Install the plugin, remove/add the iOS platform and voila! your build now includes the required permissions.

 

Usage

First install the plugin into your cordova project:

cordova plugin add cordova-plugin-ios-camera-permissions --save

Or if you're on Mac:

sudo cordova plugin add cordova-plugin-ios-camera-permissions --save

For the changes to plugin.xml to take effect, you must refresh the ios.json file (under the /plugins directory). So you'll need to remove and readd the platform:

$ cordova platform rm ios --save
$ cordova platform add ios --save

You're all set! If you open your package.json file, you'll find the plugin definition like this:

"cordova-plugin-ios-camera-permissions": {
    "CAMERA_USAGE_DESCRIPTION": "This app needs camera access",
    "MICROPHONE_USAGE_DESCRIPTION": "This app needs microphone access",
    "PHOTOLIBRARY_ADD_USAGE_DESCRIPTION": "This app needs write-access to photo library",
    "PHOTOLIBRARY_USAGE_DESCRIPTION": "This app needs read/write-access photo library access"
}

This is listed under the cordova/plugins section. Feel free to change the description values, they will be reflected in your config.xml file everytime you build the project. Happy coding :smile_cat:!