Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.3 The Camera Plugin

In this lesson, I'll show you how easy it is to add photo capture to a Cordova app. We'll create a camera and photo page and configure the camera plugin.

3.3 The Camera Plugin

Hello everyone, this is Reggie Dawson. Welcome to the building an app with Cordova course for Tuts+. In this video we're gonna set up our camera page and configure the camera plug in. First we will go to our index.html page and set up our camera page. Let's add a div with a the role of page and an id of page two. Remember we set up page one to have a link to this page through the id of page two. This is the page that will load when we click on the camera button. Then we add our content div and inside of that another grid solo div. Inside of that grid solo div we're going to put an img tag with an id of photo. Then we are going to add another ui-grid-solo. But this time around we're going to use an input style button. The input type is button, the value is Take Pic, and the id is pic. The value is going to be the label on the button. After that, our page is set up. We aren't going to use a footer here as we don't need one. Now let's go to a command prompt and navigate to your project folder. Cordova plugin add Cordova-plugin-camera will add the camera plugin to our project. Cordova plugin add Cordova-plugin-dialogues will add the dialogue plugin to our project. We're going to use the dialog plug in to send an alert if we fail to take a picture, so we need this plug in. The picture plug in allows you to take a picture. There are other plug ins in Cordova that allow you to capture pictures, video and audio, but this plugin allows you to take pictures only. After we have them installed, go to index.js. First we are going to configure a click handler for our take pick button in our on device ready method. Inside of that click handler, we are going to call the app.takepic method, again in the scope of the event, so we use at. Then we are going to add the takePic method we just called. Inside of this method we will use the camera plugin. Navigator.camera.getPicture will open the camera application and take a photo. It has two callback functions, onSuccess and onFail. It also has camera options that are telling the application to save the file location of the picture on local storage. We can also return the image as a base-64 encoded photo. Then we add our onSuccess method. OnSuccess takes an argument of imageURI which is return from the navigator.camera.getPicture method. Then we use jQuery to set this source of the image tag to the returnURI. And then finally we add our onFail method. This method has an argumentative message which is returned from the navigator.camera.getPicture method. Inside of this method we will use the dialogue plugin to display an alert if we fail to take a picture. This alert will also display the reason for the failure. After that, let's save and preview. Remember that you have to run a prepare first. Now if we run this app on Ripple, it will not display the image after taking the picture as it has poor support for emulating the camera. Now on the Cordova emulator it will work fine and display the picture. Ultimately the best test would be to run it on an actual device. We now have our pic page set up. In a full application we would set up some way to store the images or possibly upload them but for right now we have the picture which is a start. In the next video we will set up our navigation page.

Back to the top