Access camera using Ionic

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

Steps

Create New Ionic Project

ionic start TakePhoto

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 '@angular/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