- Overview
- Transcript
1.2 Use the Camera With Ionic
In this lesson we will build a small Ionic app to demonstrate using the Cordova plugin to access device hardware. We'll set up a basic Ionic project, install the plugins, and then write some simple UI and controller code to take pictures, record video and browse the media library.
Code Snippet
Here's the code we use to take a picture with the camera.
//get a reference to the 'myPic' img element
var tmpPic = document.getElementById('myPic');
//on successful image capture, update the myPic element to display the picture
function picSuccess(imageURI) {
tmpPic.src = imageURI;
};
//on failure, display an error message
function picError(message) {
alert('Failed because: ' + message);
};
//take the picture and save it to the photo album
$scope.takePic = function(){
navigator.camera.getPicture(picSuccess, picError, {quality: 50, destinationType: Camera.DestinationType.FILE_URI, saveToPhotoAlbum: true});
};
1.2 Use the Camera With Ionic
[MUSIC] Hello everyone, this is Reggie Dawson. Welcome to the Use The Camera With Ionic Coffee Break Course for Tuts Plus. Ionic is a framework that allows us to build mobile and web apps with HTML and JavaScript. The platform is built on top of Cordova and Angular and is suitable for all types of apps. The platform uses the web view to host your apps and as a result we need a way to access the hardware of the device our app runs on. How can we have a true mobile app if we can't access the camera of our device? Fortunately, Cordova comes with numerous plug ins that address this issue. In this course, we will learn to use the camera plugin to take pictures and videos. It doesn't matter what kind of device you're on, we expect it to have a camera. It doesn't matter what kind of camera it is, since all we're going to do is launch the native camera application of our device. We are also going to learn to use these plugins to access the image gallery of our device. The first thing we need to do is install ionic. The easiest way to do this is to install noJS. After that, we will use NPM to install. This will install the ionic command line interface. Understand that we haven't installed any platform specific development kits. You'll need these to build your app locally, if you want to use Android or iOS. It's not really important as we can preview our project in a browser and compile with a service like Ionic package or PhoneGap Build. I already have the Android development kit installed, so I'll be able to build for that platform. This is important as you need to build an app for a platform to run the emulator for that particular platform, or to run it on your device while testing. After we install Ionic, we can create our project. Navigate to where you wanna save your project in a command line and run the Ionic Start Command. Camera App is the name of our project folder. Blank is the template that we are using for this app, the Blank template. That will build our project in a folder named Camera App. After that, let's navigate into our Project folder. Here, we will install our plugins. Most functionality is stripped out of the basic Ionic project and we add what we need through plugins. Firstly, I've used the Ionic plugin command to add the Cordova plugin camera. And then, we use the plugin command add the Cordova plugin media capture. The Cordova plugin camera allows us to take a picture as well as accessing pictures or videos from our image library. The media capture plugin is what we use to record video, since the camera plugin only takes pictures. Then we will open up our project in our text editor and go through the index.html file in the www folder. The first thing we will do is that a script reference for our controllers.js file. Controllers JS will supply the logic to our app. Then we will change the name in ng app to camera app. This will correspond to what we will name our angular app in a moment. Next, we will change the title of our app, then we will add a ng.controller to our ion content element. This makes the controller that we're going to build in a moment available to our page. Then we will add our image which has been stored in our img folder inside of our www folder. This photo of a camera has a class attached to it to manage the size of the image. Then we can add our first button to take a picture. This is a standard ionic button with an ng-click attached. Ng-click is how we create a click event lister in Angular. Here, we are calling the takePic function we click the button. Then we are going to add another button to open the picture library. This button will execute the open pix function which will access our image gallery and allow us to select the picture. Then we add a button to open the video library set to execute the open vids function and then finally, we will add a button to record a video. This button will execute the RecordVid function when we click it, then we will add our image tag. We will use this image tag to display our image after we take a picture as well as displaying a picture when we choose one from the library. It has an ID of my pic and the same small class we assign to our camera image. Notice that we don't add a source to our image, that is because we will sign the source in our controller. Then we will add a video element, this element has an ID of my vid. Controllers ensure that the video player has controls the stop and start the video and pre-load is set to none which controls how the video loads with the page. Again, we don't have a source as we will sign it in our controller. After that our index.html page is done. Next, we will open our styles.css and add some rules for our image. Here we are setting the small class to control our image size. This is a little trick that I do to center images. By setting the image to block and adding the margins it centers our image for us. Next, we will go to our app.js file. Here we will create a variable to hold our Angular module and rename the app to Camera App. Here we have renamed the app as well as capturing the module in a variable. Now this is not required but I do this to avoid having to type the module over and over again. The last thing we need to do in this file is add our variable to the run block. This completes all of the preliminary set up for our app to work. Now we can create controllers.js inside of our js folder. After we create controllers.js we will add our cam controller, this creates our cam controller with a dependency of scope. Scope is a common dependency that you'll see in angular and what we use the pass data to our HTML pages. Then we will create variables that capture our image and video elements. Then we will add our success callback for our take pic function. The image that we take will be returned as an image URI and we will assign that as the source of our image. Then we have our error callback. Here we alert with the error message that is passed if we have a problem. Then we add our take pic function. Notice we have added scope to this function since it is called from one of our buttons. Adding scope makes it available to be called from index that HTML. Then we use the navigator camera get picture method to grab our picture we could have used the media capture plugin since that also can take pictures. The reason I chose the camera plugin was because you get more options on how to capture an image. Here we have the configuration object inside of the getPicture method. Quality indicates how good of an image you will capture from zero to one hundred. Destination type is the file path that you will return for the image. The other options are dataURL, and native URI although it is suggested to steer clear of data URLs due to potential memory issues. Finally, we have save to photo album set to true which will save the image to our photo library. The other reason I use the camera plugin is the ease that we can save our image. With the media capture plugin, we need to manage the image on our own. With this plugin, we can just set the save to photo album and the picture will be saved. Then we add our open pics function. Here we are using the camera get picture method to choose a picture from our image library. The cool thing is that we can use the same method to grab a picture by changing a few of the options in the configuration object. We also use the success and failure callbacks from the take pic function. Then by setting the source type to photo library we access the library instead of launching the camera application. Then we can add our success and error callbacks for the open vid function. First in the vid success function, I am alerting the video to give you an idea of what is returned to this callback. Then I set the source of the video element to the return video. This video will be returned as a data URL since that is the only way a video is returned to this method. In the vid error function we will just alert the error. Then we add our open vids function. Here we are using the get picture method to return just videos. We do this by setting the source type to photo library and the media types at the video. Also notice that our destination type is at the data URL. Then we will add a video options object with limit set to one. This ensures that we should only be able to capture one video at a time. Here there is not anything I need to do with the returned media file, so I just alert with the file path. Then I add the error call back, and again all I'm doing is alerting on the error. And then the last thing I would do in this file is add recordVid function. The navigator.device.capture.captureVideo method comes from the capture plugin that we used to record our video. After we record a video, we will be returned to our app. After that our project is done. Go ahead and save your project and then we will compile it so that we can preview it. First, I'll add the Android platform to our project. Now I could build and preview this project in a browser, but then we won't be able to see all of the functionality of going into the library that this provides us. Instead I'm going to build the app into a APK, and then I'm going to install and use it on the blue stack's player. First, we will build our APK. After that, we can open the project in the blue stack's player. Your APK will be found in your project folder. In the platforms folder. In the android folder. Inside of the build folder. Inside of the outputs folder and then inside of the APK folder. Once we have the app running, if we click on the take picture button, We can take a picture that is added to our library and as you can see, the picture is placed in our image element. And then, if we open up our picture gallery, and as you can see, if we choose another picture from our gallery, it'll be placed there as well. Next we're going to record a video and after we record our video, we should be able to open it from our video library. And as you can see, we are alerted to the path that it's stored on our SD card and then the videos should load. But unfortunately, on the Bluestacks player, we get an error and it crashes, but rest assured if we run this app on the Android device, it will run properly. That's everything you need to know to get started with using the camera in Ionic. Hopefully, you can come up with some unique ways to use the camera in your applications.
