Use The Device Camera In An Ionic 2 Android And iOS App

As I continue to port my Ionic Framework tutorials to Ionic 2, I figured it was time to discuss how to make use of the device camera within an application.  There are often needs to obtain pictures within an application.  Maybe you’re creating an application like Imgur, or maybe you just want to be able to obtain a profile picture.  Like I mentioned, I had written a camera tutorial a few years back on how to use the camera in an Ionic Framework application.

This time around we’re going to see how to snap pictures within an Ionic 2 Android and iOS mobile application.

Let’s start by creating a fresh Ionic 2 project.  From the Command Prompt (Windows) or Terminal (Mac and Linux), execute the following commands:

A few things to note above.  We are creating an Ionic 2 TypeScript project.  This means that you need to have the appropriate Ionic CLI installed.  If you are not using a Mac then you cannot add and build for the iOS platform.

To use the Android and iOS device camera there are a few options.  Both options require the Apache Cordova camera plugin.  You can use vanilla JavaScript with the plugin or you can use Ionic Native.

We’re going to use Ionic Native, but first let’s install the Apache Cordova plugin:

Let me start by saying that as of now, April 2016, the official Ionic Native documentation for the camera plugin is terrible.  To learn how to use this plugin I had to dig into the source code.  I’m going to save you the trouble.

UPDATE: The documentation as of July 2016 has improved for the camera module.  In any scenario, this article will continue to put you on the correct path.

Developing the Ionic 2 Device Camera Logic

The logic file won’t be too complicated.  Essentially we’ll be creating a function that uses Camera class with various options.  There are some catches though which we’ll see.  First open the project’s app/pages/home/home.ts file and include the following code:

Let’s break everything down because I’m sure some of it won’t make sense.

The first import that didn’t ship with our blank template is as follows:

This allows us to use some Angular 2 friendly camera functionality with Ionic Native.

 

With the imports out of the way we find ourselves in the constructor method:

In the constructor we are defining a placeholder image to be used when no camera image exists.

Like I said previously, the takePicture function just calls the Ionic Native camera class and passes it a bunch of options that I dug out of the Ionic source code.

Finally you see this:

This is how we are refreshing the base64Image variable that is bound to the UI.  This will replace the placeholder image with the data from our camera.  Since the camera data is in base64 format we must declare it as such when we store it, otherwise the HTML tag won’t know what to do.

The logic at this point is done.

Designing the Ionic 2 UI

With the logic out of the way, let’s cook up a simple UI.  Essentially we’re only going to have a placeholder image and navigation button on the screen.  Open the project’s app/pages/home/home.html file and include the following code:

The navigation button will be of a camera and appear on the right side.  The placeholder image will exist until a camera photo is taken.

This application will probably not work in an iOS simulator or web browser.  iOS simulators have issues when it comes to the device camera, and since this uses native platform code, the web browser won’t understand it.

Conclusion

You just saw how to create a simple application that will take pictures and display them on the screen.  Things are a little different than the Ionic Framework 1 camera tutorial that I wrote in the sense that we are now using Angular 2 with TypeScript.  Nothing was particularly difficult and it should put you on the right track towards using the device camera within your mobile application.

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.

  • Pedro Cruz

    Great tutorial! Do you have any resources to be able to upload photos to Firebase from the Camera Roll?

    • I don’t use Firebase, sorry.

    • I just followed this guide and I’m using Firebase, what I did was I just saved the base64Image string resulting from the function into my database as a simple string, it’s working fine 😛

  • Shubham

    Hey Nic,

    Your all article is awesome.

    Can you please let me know when is your next article is publishing for downloading firebase base64-image into mobile photo gallery using ionic and angularjs ?

  • Vicheanak Vannavy

    Hey Nic, thanks for the tutorial. But how can I test it to see if it’s working on a real device? Say, iPhone, I tried to run ‘phonegap serve’ on the root of ionic project, but it’s not working.

  • sanjay yadav

    hi @nicraboy:disqus ,
    thank a lot for such kind of task.
    I have used it and working good for me.
    I want to store many images (like gallery), how i can do that. As we can store only one image at a time.

    thanks

  • Veeraj Shenoy

    [ts] Cannot find name ‘YouTubeVideoPlayer’.
    any

    I am getting this error. Can you help?

    • How is that relevant to this particular article?

  • Thanks for your article. I’ve also wrote some articles about ionic 2 camera.
    Access Gallery: https://phonegappro.com/ionic2-tutorial/access-photo-gallery-using-ionic-2/
    Access Camera: https://phonegappro.com/ionic2-tutorial/access-camera-using-ionic-2/

  • minhnd

    I use this plugin Ionic Framework Version: 2.0.0-rc.2.
    It worked great with android but in ios, it does not show the image to the view. Any help please?

    • Thomas Solhøj

      Ive got the same problem, any solution?

      • minhnd

        I had problem on ionic view. But when I built the app using xcode, there is no error. Did you try to build the app?

        • Thomas Solhøj

          Hi, no not yet, still just in Ioniv View.

          But great, and thank you for a quick reply, then I will rest my mind about this issue, and get on with some xcode testing 🙂

          • minhnd

            You’re welcome. Just try it. Hope it work ^^

          • Thomas Solhøj

            Hi, would just let you know I found the problem, and the solution, using DomSanitizer, so i can work through the IoincView app.

            Just do this:

            import {DomSanitizer} from ‘@angular/platform-browser’;

            constructor(
            private domSanitizer: DomSanitizer
            )

  • Daniel Codrea

    Hi,
    I am trying to use the camera plugin in an ionic 2 app, but after taking a picture, the app is refreshed and I don’t get the chance to save the image.