Use The Android And iOS Camera With Ionic Framework
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 cordova-plugin-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_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.
Full source code app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// ‘starter’ is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of ‘requires’
var exampleApp = angular.module(‘starter’, [‘ionic’, ‘ngCordova’])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don’t remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
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
});
}
});
|
1
2
3
4
5
|
<ion-content ng-controller=“ExampleController”>
<img ng-show=“imgURI !== undefined” ng-src=“{{imgURI}}”>
<img ng-show=“imgURI === undefined” ng-src=“http://placehold.it/300×300”>
<button class=“button” ng-click=“takePicture()”>Take Picture</button>
</ion-content>
|
Full sourecode index.html
<!DOCTYPE html>
<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”>
<!– IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href=”css/ionic.app.css” rel=”stylesheet”>
–>
<!– ionic/angularjs js –>
<script src=”lib/ionic/js/ionic.bundle.js”></script>
<script src=”js/ng-cordova.min.js”></script>
<!– cordova script (this will be a 404 during development) –>
<script src=”cordova.js”></script>
<!– your app’s js –>
<script src=”js/app.js”></script>
</head>
<body ng-app=”starter”>
<ion-pane>
<ion-header-bar class=”bar-stable”>
<h1 class=”title”>Ionic Blank Starter ok</h1>
</ion-header-bar>
<ion-content ng-controller=”ExampleController”>
<img ng-show=”imgURI !== undefined” ng-src=”{{imgURI}}”>
<img ng-show=”imgURI === undefined” ng-src=”http://placehold.it/300×300″>
<button class=”button” ng-click=”takePicture()”>Take Picture</button>
</ion-content>
</ion-pane>
</body>
</html>
Just like that, you can call takePicture() from your UI and initialize the native Android and iOS camera in Ionic Framework.
ref: https://www.thepolyglotdeveloper.com/2014/09/use-android-ios-camera-ionic-framework/