ionic-access-camera
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 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

DOWNLOAD SOURCE CODE

Access camera using Ionic 2 Output

ionic2-takephoto-button

ionic2-output

Categories: Uncategorized
Sundaravel M

About the author: Hey! It's me sundar. (Yea, I'm the founder of codesundar.com). I'm a passionate computer programmer who loves modern web and mobile development. feel free to reach me : Facebook - Twitter - Google+