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:
|
1
2
3
4
|
ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios
|
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:
|
1
|
cordova plugin add org.apache.cordova.camera
|
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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>
<meta charset=“utf-8”>
<meta name=“viewport” content=“initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width”>
<title></title>
<link href=“lib/ionic/css/ionic.css” rel=“stylesheet”>
<link href=“css/style.css” rel=“stylesheet”>
<script src=“lib/ionic/js/ionic.bundle.js”></script>
<script src=“js/ng-cordova.min.js”></script>
<script src=“cordova.js”></script>
<script src=“js/app.js”></script>
</head>
<body ng-app=“starter”>
|
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:
|
1
|
angular.module(‘starter’, [‘ionic’, ‘ngCordova’])
|
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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
exampleApp.controller(“ExampleController”, function($scope, $cordovaCamera) {
$scope.takePicture = function() {
var options = {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 300,
targetHeight: 300,
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
});
}
});
|
Notice on line 17, I added a bunch of other data to my scope. Because our destination type is DATA_URLwe 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.
|
1
2
3
4
5
|
<ion-content ng-controller=“ExampleController”>
<img ng-show=“imgURI !== undefined” ng-src=“”>
<img ng-show=“imgURI === undefined” ng-src=“http://bit.ly/1qK4KuA;>
<button class=“button” ng-click=“takePicture()”>Take Picture</button>
</ion-content>
|
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.
View more at: http://bit.ly/1XReQFr
Post a Comment