Access camera using Ionic 2 + Ionic Native

Access camera using Ionic 2
Access camera using Ionic 2
Access camera using Ionic 2

This example, I’m gonna explain how to access camera using Ionic 2 with Ionic Native

Goal

  • Take Picture via Camera & Display on the page

DOWNLOAD SOURCE CODE

Steps

Create New Ionic 2 Project

ionic start TakePhoto --v2

Add Required Platform

ionic platform add android
ionic platform add ios

Add cordova Camera Plugin (https://github.com/apache/cordova-plugin-camera)

ionic plugin add cordova-plugin-camera

Add these lines to src/pages/home/home.html

<ion-content padding>
<button ion-button color="dark" (click)="takePhoto()">Take Photo</button>
<img [src]="imageURL" *ngIf="imageURL" />
</ion-content>

Edit src/pages/home/home.ts

import { Component } from [email protected]/core';
import { Camera } from 'ionic-native';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  imageURL
  constructor() {}
  takePhoto(){
    Camera.getPicture().then((imageData) => {
       this.imageURL = imageData
    }, (err) => {
       console.log(err);
    });
  }
}

Run your project

ionic run android

DOWNLOAD SOURCE CODE

Access camera using Ionic 2 Output

 
ionic2-takephoto-button

ionic2-output

  • Talha Ansari

    This was very helpful, Sundara. Thanks!