Ionic : Gestion de la camera

Etape 1 : Installer le plugin email-composer :

ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera

Etape 2 : Ajouter les permissions pour android

Aller dans platform\android\app\src\main

et modifier le fichier : AndroidManifest.xml en ajoutant les permissions suivantes :

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Etape 2 : Créer une claase (provider ou service) pour gérer la camera :

ionic g provider gcamera

Etape 3 : Déclarer Camera dans app.module.ts

Aller dans app/app.modle.ts

Ajouter la bibliothèque Email Composer dans :

- les imports :

import { Camera } from '@ionic-native/camera';

- et dans provides: [ ajouter

Camera,

Etape 4 : Modifier la classe gcamera.ts dans les providers

Aller dans providers/gcamera/gcamera.ts et modifier la classe :

import { Injectable } from '@angular/core';

import { Camera, CameraOptions } from '@ionic-native/camera';

/**************************************

* Gestion de la camera du mobile

***********************************/

@Injectable()

export class GcameraProvider {

constructor(private_CAMERA:Camera)

{ }

/**

* @public

* @method prendrePhoto

* @return {Promise}

prendrePhoto() :Promise<any>

{

returnnewPromise((resolve) =>

{

letcameraOptions:CameraOptions= {

sourceType :this._CAMERA.PictureSourceType.PHOTOLIBRARY,

destinationType :this._CAMERA.DestinationType.FILE_URI,

quality : 100,

targetWidth : 320,

targetHeight : 240,

encodingType : this._CAMERA.EncodingType.JPEG,

correctOrientation : true

};

this._CAMERA.getPicture(cameraOptions)

.then((data : any) =>

{

resolve(data);

});

}

Etape 5 : Prendre une photo à partir des pages.ts

importer le service GcameraProvider dans votre page.ts :

import { EmailProvider } from '../../providers/email/email';

Déclarer l'objet EmailProvider :

Source : http://masteringionic.com/blog/2017-10-09-adding-email-functionality-to-an-ionic-application/

Détails: Écrit par : Richard GAUTHIER; Création : 7 Octobre 2018; Mis à jour : 10 Décembre 2018; Clics : 2308

Vidéos YouTube

Ionic : Gestion de la camera