How to add Camera feature in angular js ionic mobile application
Hi guys, today I
am going to explain you how to add camera feature in angular js ionic mobile
application. Let’s start to create sample ionic mobile application with camera.
Here includes some steps to create ionic mobile application.
Step
1 Create ionic sample project
Open
command prompt and execute the command “ionic start MyCameraProject blank”
Step
2 Add the platform
Open command prompt and go to MyCameraProject and execute the command
“ionic platform add android”
Step
3 Download “ng-cordova.min.js” file and
paste into www/js/ folder
Step
4 Install cordova camera plugin
Open
command prompt and go to MyCameraProject and execute the command “cordova
plugin add org.apache.cordova.camera”
Step
5 Copy below code into head section of www/index.html
file.
<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>
<!-- cordova script (this will be a 404
during development) -->
<script
src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
Step 6 Copy below code into body
section of www/index.html file.
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="CameraController">
<img ng-show="imgURI !==
undefined" ng-src="{{imgURI}}">
<img ng-show="imgURI ===
undefined" ng-src="http://placehold.it/300x300">
<button class="button"
ng-click="takePicture()">Take Picture</button>
</ion-content>
</ion-pane>
Step
7 Copy below code into www/js/app.js file.
var cameraApp=angular.module('starter',
['ionic','ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
cameraApp.controller('CameraController',function($scope,$cordovaCamera){
$scope.takePicture=function(){
var options = {
quality: 50,
destinationType:
Camera.DestinationType.DATA_URL,
sourceType:
Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType:
Camera.EncodingType.JPEG,
targetWidth: 300,
targetHeight: 300,
popoverOptions:
CameraPopoverOptions,
saveToPhotoAlbum: false,
correctOrientation:true
};
$cordovaCamera.getPicture(options).then(function(imageData)
{
$scope.imgURI=
"data:image/jpeg;base64," + imageData;
},
function(err) {
});
}
});
Step
8 Build the project
Open
command prompt and go to My Camera Project and execute the command “ionic build
android”
Step
9 Run the project
Connect the device to
development machine and open command prompt and go to My Camera Project and
execute the command “ionic run”
Step 10 Output(Result)
Screen before clicking.
Screen after clicking.
!-----------------------------------------------------HunterTech--------------------------------------------------------!
Trilok Singh
www.bel-technology.com
!-----------------------------------------------------HunterTech--------------------------------------------------------!
Trilok Singh
www.bel-technology.com
0 comments