Use The Android And iOS Camera With Ionic Framework

Most smart phones on the market have at least one camera if not two.  You may want to leverage these cameras to make the next Instagram or SnapChat type application.  Lucky for us, the native Android and iOS camera can be easily accessed using Ionic Framework and the AngularJS extension set, ngCordova.

The following will help you add camera functionality into your latest creation.

Let’s start by creating a new Ionic project with the Android and iOS platforms:

Remember that you must be using a Mac if you wish to build for iOS.

The next thing we want to do is add the Apache Cordova camera plugin.  This can be done by running the following:

For this tutorial we are going to be using the AngularJS extension set for Apache Cordova called ngCordova.  Start by downloading the latest release of ngCordova and placing the ng-cordova.min.js file in your project’s www/js directory.

Next we need to include this file in our project’s code.  Open the index.html file and include the script before the cordova.js line like below:

This will include the library into our project, but now we need to include it for use in AngularJS.  Open your app.js file and alter the angular.module line to look like the following:

Now we’re ready for the fun stuff.  Inside your app.js file, we need to add a controller with a method that will launch the camera.  The following was copied almost exactly from the ngCordova documentation:

Notice on line 17, I added a bunch of other data to my scope.  Because our destination type is DATA_URL we will be returning raw camera data rather than a file.  By adding data:image/jpeg;base64 we can use an HTML img tag to display our freshly created snapshot.

Just like that, you can call takePicture() from your UI and initialize the native Android and iOS camera in Ionic Framework.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • RR

    trying to learn more about ionic and cordova

  • pb

    Looks great. Can this upload multiple images? Also, it would be great to see a tutorial on uploading multiple photos to S3 using ngCordova camera w/Ionic for iOS and Android.

    • Hi PB,

      This example doesn’t upload images, but with some fiddling I’m sure you could. There are two scenarios when it comes to S3, one of which I would strongly advise against:

      1. Have your user enter their S3 API tokens
      2. Enter your API tokens to manage everyone’s data

      As I’m sure you know, choice #2 is bad because this is a client side app and you should never put information that could expose your user’s sensitive data. If you want to make a service that manages data with S3, you should create a backend. If you just want to store single user data in their own funded S3 account, having the user enter their tokens should be fine.

      Does this make sense?

      • PB

        Hi Nic…yes, that makes sense. Is there an ngCordova plugin (or other solution) that allows users to take a picture OR select existing images? This seems like common functionality that one might find on Facebook or Instgram, etc.

        • Hi PB,

          The tutorial I posted will show you how to take pictures and retrieve the image data associated with them. I believe you’re interested in further functionality such as storing server side. Am I correct?


          • Hi Nic,

            I am much interested to know how can we upload the captured image to server?
            I have implemented the above tutorial and got my camera working. I amgetting captured image correctly on my tag.

            But when I check the path of image at console using rippler, path was encrypted andI saw [blob] things there.

            I dont knowhow can we take the relative path of image and upload it to server.

            May be you can guide me with any link orvsomething?

            That would be so great of you.

          • Hi Mekey Salaria,

            The tutorial I made only shows how to work with a DATA_URL. After taking a picture using my example, it does not store anything on the device.

            If you want to save the image to the filesystem you need to use the FILE_URI. Information on this option can be found here:


            After the image is saved locally you can then use the Apache Cordova File Transfer plugin to upload the image to a remote server:


            I hope this helps.


          • Ohkay,

            Thank you so much.

            I will try that out now. 🙂

  • Jason

    Worked like a charm. I had some issues installing the org.apache.cordova plugin because I installed it before adding my platform. So I needed to manually move the plug in files to the correct platform directory. But, it worked great after that! Now, to find some examples to throw it in S3 securely…

    • Hi Jason,

      I’m glad you got the camera plugin working. Be sure to report back regarding what you find with Amazon S3. I’m sure there are others who would like to know.


  • Keon Paul

    Thanks for the tutorial however when i try to get the app to work i get the following error when i used the consolelogs [] and i’m not sure how to fix it do you mind helping me figure out what the problem is.?

    • Hi,

      For the future, please either upload the image to Disqus or paste the contents in the comment.

      I’m assuming you’re getting a camera not defined error because you’re either trying to test it from a web browser or iOS simulator. From the deeper details of your error message it appears you’re trying to maybe use ionic serve because I notice the use of IP addresses.

      You must do a full build and install to a device or simulator in order to test this plugin. However, the iOS simulator will not work for this.

      Hopefully that helps.


      • Keon Paul

        Thanks for the quick response…
        1)I have tried testing it on my android device however when i press the button i don’t get any response.
        2)Also i have notice that i have to edit the index.html file in the /www folder of my project and not in the platforms/android/ assets/www folder. Is that right way?

        • With the device hooked up to ADB, what is the error message you receive?

          You should be editing /www not the files in the platforms directory.

          • Keon Paul

            Unfortunately i not familiar with using the ADB command line to get errors since i didn’t know how to configure the logcat to get what i wanted.
            So i downloaded Jboss and when i imported the project it started to work without making any changes…

          • I’m glad you got it working 🙂

  • dev kamboj

    Nic Raboy i like your all video.Can you make video on using Hardware back button in ionic framework by using ng-corodova

  • Edax Ucles

    Hi! I get an error, “ReferenceError: Camera is not defined” in my browser and when i install on android don’t works but on iphone it’s works, can you help with this?

    • Most plugins cannot be tested in a web browser, but according to Raymond Camden, the camera plugin in an exception:

      What error do you get when using an Android simulator or device? I’m betting it is different than your browser error.


      • Edax Ucles

        I using an Android device, on when a i click the button take picture, don’t open the camera, just do nothing, when i test the same app in iphone it’s works perfectly like in your video.

        • Again, I need the error logs from Android, otherwise I cannot help you.


          • Edax Ucles

            How can i get the error logs from device?

          • Edax Ucles

            Hi again, i follow this article step by step and doesn’t work, will be possible to send you my project and what tests you on your android device to see what happens?

            i follow the other article of adb logical but just saying the console “waiting for device”

          • I’m happy to help, but there is a certain point where I need to draw the line because I’m doing it for free and it takes time to produce quality answers.

            With that said, I’m going to decline reviewing your source code until I see your error logs. I’ll need the errors logs if you want further help. I understand you’re having trouble. It sounds like you have a configuration issue with your Android SDK setup. I encourage you to search around the web for configuring the Android SDK / ADB to work with your device. If you still can’t get it working, you might check out the Genymotion simulator and do your testing there.


          • Edax Ucles

            Hi Nic! my problem was the less of of API 16, my device use that, Thanks a lot! but i have a more question, my app in the device it’s so slow but in the iphone it’s so faster, how can i do going better in the android device ?

          • Android versions less than KitKat 4.4.4 use an old runtime which is questionable. You should check out Crosswalk:



  • David

    Doe we need to add the plugin to the config.xml file? I’m also getting the “ReferenceError: Camera is not defined”. Tried running in browser and on device using Ionic view.

    • If you’re still trying to test in your web browser or Ionic View, I encourage you not to.

      Build your application and install it to a device or simulator for best results because native code is involved.


      • meigie

        ahh so even test in Ionic View will not see the expected output as well? :'(

  • Hi Nic, thanks for the tutorial. I’ve been following along with your other tutorials as well. Great job. I’m also getting the Camera not defined reference error. Its worth noting that I’m using Cordova 5 with the latest plugins on OSX Yosemite and testing on a Moto G Kit Kat, I know your example is not on the latest Cordova version but if you get some time to check this error out I’d appreciate it. I’m attaching the error log image.

    • Are your calls to the camera wrapped in an $ionicPlatform.ready or onDeviceReady()? Could be suffering from a race condition?

      • Hi Nic, I’m using $ionicPlatform.ready. How would you suggest I work around this?

        • Can you put your full project on GitHub? I want to take a quick look.

          • Hi Nic, I was creating a sample project (work related restrictions on posting the code) and I found that the the plugin version was not the same on both machines I’m working with right now. Heads up for that one for anyone following this thread. But its also triggering twice. I’ll go over the code but you’ve been great help. Thanks.

          • Report back with whatever you find 🙂

  • VG

    Hi, with your code, i have a problem, i use one ios device and when i click on the “take picture” button, there are nothing…….. the click don’t do anything… Have you one idea?
    (sorry if my english is bad i french ^^)

    • The simulator doesn’t support camera functionality, so I’m assuming you are using a physical device instead. If this is the case, what do the Xcode logs say when you are running the app with your device connected to your computer?

      Also, please confirm that you are NOT using Ionic Serve, Ionic View, or Ionic Live-Reload.


  • shivangdoshi

    Hi Nic,
    Instead of opening Native Camera, can we open camera inside the app? I am not able to find any solution for that.

    • You would have to make your own plugin for that. The recommended way is to launch the camera like the current plugin does it.


  • Cost Code

    Nice, thanks for sharing

  • Marcello Colombo

    Hy Nic, great work!!! I have a problem after taking a photo, i receive this message: URL is blocked from whitelist…i tried looking for in google..bu i don’t understand where is the problem…can you help me? thanks

      • Dimitris Makris

        Hi Nic, thanks for your post, is very helpful!,
        I had the same error with Marcello (after taking a photo, i receive this message: URL blocked by whitelist). I read your post about Whitelist but can’t fix the error. Then i found, maybe is responsible the angular which changes urls to “unsafe:”.
        Then i tried to add in app.js this:

        It works for me!

        • Interesting!

          Had you tried adding the meta information after installing the whitelist plugin?

          In any case, it is much appreciated that you shared a working solution 🙂

          • Dimitris Makris

            Yes, i had added the meta information, but nothing changed. :/
            In case i remove the meta information, still working! 🙂

          • Strange!

            If I hear anything, I’ll report back.

  • Shivam01

    How to handle image quality if app is running in iPhone and iPad, when you get picture in iPhone size 4 mb and in iPad in kb , so there is solution so I can get good quality of image without distortion and appear well in both ioS devices.

    • Well you have to understand that every device is going to have a different quality camera with a different amount of MPs. So you’re going to get inconsistent file sizes and image qualities across the board.

      I would just set a numeric quality value and proceed, but if you really wanted to make things more similar you could force an image size. Probably not the best idea for your application.

      You can always modify the image server side as well if you’re uploading images to a server.


      • Shivam01

        Thanks Nic Raboy to respond , my another question is that , when I take picture in iPhoneh 5 more than 2 (Size approx. 4.5 mb) , it is going to crash application but not in iPad (Size approx. 33 kb). So what should I do in this case?

        • Yea I don’t know what’s going on. 33kb is pretty small. Do you know the resolution on the two images? Maybe the iPad is defaulting to thumbnail sizes or something.

  • Peter Lauge


    Is there any way the video file can be converted to a gif animation, on the phone using the ionic framework/cordova?

    Thanks for some very nice tutorials!

  • Rishiraj

    How to upload image from camera or image gallery to server.I am using PHP on server.
    Thank You

  • Senthil

    If i run the program, it shows

    ReferenceError: Camera is not defined

  • vivek nanduri

    the app launches fine when im running it on a real android device (Lollipop), however when i click on the button, i get no response – nothing happens …. any help?

    • What do your logs say?

    • Francesco Prochilo

      if u compile the app and produce an apk, it works on device.If u use ionic view…doesn’t works!

  • SB

    Hi Nic,

    Great posts!! I learned a lot being a novice to cross-platform development.
    I have tried the plugin for long using Ionic View and then I read through the post to figure out the reason why it did not work. Is there a way to test this plugin using Ionic View or Phonegap rather than building and uploading it every time? I have been using a BLE plugin with Phonegap and works flawlessly – can you tell me if there is a way this plugin would work with Phonegap? Thanks!!

    • Ionic view, ionic serve, and ionic live-reload are all beta / alpha. They are known to not work with all plugins. In every post I write, I recommend against using those tools every time.

      If you want to test your application for real, build and install it. Your users will appreciate you for it.


  • Sayed A Abbas

    Hey Nic! Your posts are great for starter. I’m facing an issue with camera plugin. I chose the Camera.PictureSourceType.CAMERA as PHOTOALBUM (the option to choose picture from gallery). Everything works fine as long as user chooses pictures from Albums (on android) and not Google Photos. When user chooses google photos, it doesn’t show the crop popup and hence the uploaded images are getting squeezed. Any solutions?

    • I’m not sure the camera plugin was designed to work with Google Photos which is why you’re probably getting strange results. I’d open an issue ticket with Apache Cordova. Majority of Android devices, specially older versions don’t use Google Photos.


      • Sayed A Abbas

        Thanks. Until it is fixed, what would you suggest me to use as a substitute for this?

        • I’m not saying Apache will ever make a fix. This is what you typically have to deal with when it comes to hybrid applications. You often won’t have the depth that you would in a native application.

          The only substitute you have is to design your own camera plugin using native code.

          File a ticket with Apache though.

  • Riza Masta Saputra

    Thanks Nic, your post is very useful for me who are still learning.

  • Stevie Starosciak

    Hey Nic,

    Your videos are awesome 🙂 I was looking at the ngCordova docs for the camera plugin and it says you can use it to record video? I don’t see any examples or documentation anywhere for it. Do you have any idea how to do that?

    I actually tried to use the $cordovaCapture plugin, but even using the sample code and testing it on my native android device, it did nothing :'( I’m trying to figure out a way to be able to record short videos, then encode them and compress them to be small so they can be uploaded to an S3 bucket somewhere.

    • This didn’t work for you?:

      $cordovaCapture.captureVideo().then(function(videoData) {}, function(error) {});

      It worked fine for me.

      • Stevie Starosciak

        Hmm, I guess I’m not sure what to expect from this function. I guess I’m expecting my camera to popup with the video cam already selected with some kind of timer. At this point, I’m guessing this isn’t the case and that I should be expecting something else?

        Would you be able to link me to your example code perhaps?

        • How about sharing your logs in the comments

  • Nicholas Larssen

    Great tutorial! How would I proceed if I want custom styling on the camera plugin? E.g interface similar to instagram.

    • You’d need to alter the native platform code in the plugin. This cannot be done with JavaScript.

  • Amit Jahagirdar

    Hi Nick,
    For some reason the camera does not work on click of a button when run using ionic emulate ios.
    Could you help find a fix.

    I also read your blog about ionic serve (the toast example) and now running with “ionic run -l -c -s”,

    but still the camera does not start.

    • The iOS emulator does not support usage of the camera. You’ll have to test on an iOS device.


  • Rubi Malone

    Great tutorial! Is there a way to change the targetWidth/Height to make the picture fill the screen dynamically based on phone sizes? Perhaps this is done elsewhere? Thanks!

    • Are you referring to before the picture is taken, or the picture that displays on the screen after you capture it?

      • Rubi Malone

        The picture that displays on the screen after capture.

        • Yea it would be all CSS wizardry there and that is not something I’m not very good at. You can either stretch it with 100%, or do some CSS magic to fill the view or crop.

  • Mounika

    Hi Nic,
    I have stored images in file using cordovafile plugin.i want to remove a file from my ionic app.i have gone through my tutorials could you suggest me how would i approach. Thanks in advance

  • siddhesh

    I tried a lot 🙁 but i am unsuccessful at capturing a photo .

    i got below error

    ReferenceError: Camera is not defined

    Please help me i am stuck since 3 days on the same problem 🙁

    If you want to take a look at my problem here is the link

    • I see several possibilities from your Stack Overflow:

      You are including both the minified and full version of ng-cordova. Choose to use only one, otherwise you may get conflicts.
      You may need to use $ionicPlatform.ready
      You cannot test this plugin in the browser
      You cannot use Ionic Serve, Ionic Live-Reload, or Ionic View

      However, my thought is that the Camera plugin got corrupted at some point. I recommend you uninstall it and re-install it.


  • karthick kumararaja

    is it possible to take pictures directly instead of invoking the camera app…???

    • You’d have to develop your own native plugin for that.

  • Manuel Vasquez

    I’m redirecting from a previous page to the camera page, I want to open the camera directly, without pressing any button, how can I do this?

    • Just call $cordovaCamera.getPicture inside your controller and not in a function. Make sure you wrap it in an $ionicPlatform.ready though.

      • Manuel Vasquez

        I’m not sure if I did it well. My code was:

        .controller(‘SnapCtrl’, function($scope, $cordovaCamera) {
        $scope.takePicture = function() {
        var options = {
        quality : 75,
        destinationType : Camera.DestinationType.DATA_URL,
        sourceType : Camera.PictureSourceType.CAMERA,
        allowEdit : false,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 400,
        targetHeight: 400,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: false


        And now applying the changes than you suggested is:

        .controller(‘SnapCtrl’, function($scope, $cordovaCamera) {
        var options = {
        quality : 75,
        destinationType : Camera.DestinationType.DATA_URL,
        sourceType : Camera.PictureSourceType.CAMERA,
        allowEdit : false,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 400,
        targetHeight: 400,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: false

        $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.imgURI = “data:image/jpeg;base64,” + imageData;
        }, function(err) {
        // An error occured. Show a message to the user

        Is this ok?

        • Looks fine, but you did not wrap it in an $ionicPlatform.ready.

          • Manuel Vasquez

            Can you please give me an example with the code than I sent you? Thanks in advance 🙂

          • Manuel Vasquez

            I can call the camera automatically when I upload the view, but once I take the picture the camera still opened, it doesn’t close and show me the content of the view, how can I call to the view after take the picture if the camera code is inside of a $ionicPlatform.ready statement?

          • After you take the picture it will close on its own. My assumption is you have errors in your logs. What do they say?


        • Manuel Vasquez

          Can you please give me an example with the code than I sent you?

  • Manuel Vasquez

    How can I perform other actions AFTER taking a picture? For example I want to load another view but the picture taken should be displayed as a kind of circle thumbnail with some information like the current date and time.

    • You’ll have to use your own logic, but I’d take the picture, store the meta information such as where it saved to, name, etc into a local database, then load the picture based on the meta in another view.


      • Manuel Vasquez

        Any suggest of tutorials to do it? I’m REALLY new with ionic.


  • Amit Batra

    hey nic is there any way to convert the image in base 64 format ..i tried but it’s not working

    • In my example it is base64 format. Are you asking to convert it from base64 to a different format?

  • Amit Batra

    in my case it gives the path of that image not the base 64 encoded string
    path like ….it include the package name of my app and image name

  • Amit Batra

    Thanks alot nic …… works actually i forgot to mention the destination type in my code…
    So now its working….
    the same can we do with the imagepicker plugin?

  • Emmanuel Lorenzo

    Hi nic, thanks for the code everything works but i still got a problem, when i launch my app with the terminal command “ionic run android” i can take the picture but when i put my app on my phone i can’t click on the button. I check a lot of forum but i don’t see nothing like that, is there any reason this happen ?

  • Samuel Villegas

    Hello thanks for this tutorial, I have a question related to this is there a way to manupilate the camera screen, for example to draw a line in the middle of the screen? Or I would have to go native and program my use of the camera for this?

    • You’d have to edit the plugin itself if you wish to change how the camera appears. This would involve altering native Java and Objective-C code.

      Maybe submit an issue ticket to the plugin developer and see if they are willing to make this edit for you?


    • Alex Morgan

      Hey Samuel, did you find the way to do that?

  • Tezendra Dahal

    Thanks for the tutorial, Is there a way to capture videos using ionic?

  • siti aishah ismail

    Thanks. really help me. But can I know why, if I’m change “saveToPhotoAlbum” to true, the photo did not show in a HTML and not save that photo in the Gallery/Device. Perhaps there have another way for me to do. Thanks.

    • What platform? Do you have any logs?

  • Snehal Prabhu

    hi Nic,

    For some reason the after taking the picture using camera the picture doesnt show up on the form. This happens only on an android phone but works perfectly fine in an iphone. So what exactly could be wrong.

    Could you help find a fix.

  • Sitara Singh

    thanks. can u tell me how to add snapchat on camera in ionic

  • Sitara Singh

    i want show a snapchat over view of camera

  • Rahul

    how can i fix a limit to be selected images from gallery in cordova camera??

  • Rodrigo BDHiv

    thank you! greetings from chile
    it’s works… but i would like avoid the confirmation step after taking every picture… do yo know how to avoid this window?

    • I don’t think it is possible without editing the plugin source code. You should raise a ticket with the developer of the plugin.


      • Rodrigo BDHiv

        oh… thank you
        i’ll keep searching, sincerely i dont have time to learn how to editing the plugin, i recently startet with mean platform… =(

  • Assane Dessables

    Once I install the app for the first it works fine. When I close the app an then start it again, it throws an error saying ‘Camera not defined’. To fix this i delete the data in the settings and it doesn’t crash anymore. Is there something that has to do with the way the variables are stored that makes it crash like that?

    • I cannot think why you would need to wipe the application in order to make it work. Anything else show up in your logs when this happens? Maybe paste your full logs.

  • Divya Eficaz

    Can you help me to capture a video through ionic framework

  • Bayan Abuawad

    Any idea how would camera work in typescripte ?

    • AngularJS 1 applications don’t use typescript.

      • beetch!

        Hey Nic love your tutorials. You have any chance to look at the cordova camera preview plugin. I’m not sure if its glitchy or i just don’t know how to work it

  • João Marcos Martins Da Costa C

    Hello, I made exactly like this article, but i can’t run in android, what can i do?

    • Don’t know how I can help you without seeing any logs. “Can’t run in android” doesn’t help me much from a troubleshooting perspective. How about some more details.

      • João Marcos Martins Da Costa C

        Sorry, my fault.

        In Chrome Debugging, is throwing

        ionic.bundle.js:26799 ReferenceError: Camera is not defined
        at Scope.$scope.takePicture (controllers.js:63)

        In adb logcat

      • João Marcos Martins Da Costa C

        so… any suggestion?

        • Sounds like the Apache Cordova plugin either isn’t installed or isn’t installed correctly.

          • João Marcos Martins Da Costa C

            LoL you are the man!!! I reinstalled the cordova camera plugin, and worked!, thanks

  • Rohan Gupta

    hi… can i access the image properties of clicked image like (image name, type and location of image where it is clicked)???

    • You can only access what you can access in JavaScript. So I’m sure such libraries exist to handle this, I’ve just never used them.


      • Rohan Gupta

        can we convert the base64 data to event JSON object???

        • Well you’re working with base64 image data which is binary data. While you can add this to a JSON object, it is not a JSON object or encoded object when returned.

          • Rohan Gupta

            So can we get a data in any other format instead (file or base64 format) when clicking image through camera.

          • You should probably read the plugin documentation.

  • Humbert Meza

    again you save me

  • Harishanker V

    I have done a AngularJS code on Ionic framework for Video recording in iOS but it is allowing me to only capture photo and not video. Let me tell you, it works perfectly fine on Android. I’m using the “cordova-plugin-media-capture” and the “capture.captureVideo” method for doing that. Is there anything else that I need to do, please help …. Thanks

  • Tercio Silveira

    Hi, how can I test it in the browser? Would Cordova-Plugin work?

  • Dimitri Podoliev

    Has anyone encountered any plugins/ways to crop video files for both iOS and Android?

  • Shaun Pritchard

    hey if you wanted to store those images to a database how would you do that?

    • You could store the images as base64 encoded strings in the database. However, it is best they exist on the filesystem instead for performance reasons.

  • Jose L Ferreira

    Its possible to make like whatsapp and open the camera to take photo or select recent pictures with this plugin in the same screen, with the legend “Keep press to video or push to photo”