How to capture an image or record video with Ionic 3

@mgithens wrote:

This question is also posted on StackOverflow

I can’t seem to get around these warning & errors when running on a Pixel 2:

Warnings and Errors:

[09:54:00]  lint finished in 2.37 s
[09:54:24]  console.log: deviceready has not fired after 5 seconds.
[09:54:24]  console.log: Channel not fired: onDOMContentLoaded
[09:54:24]  console.log: Channel not fired: onFileSystemPathsReady
[09:54:28]  console.log: Angular is running in the development mode. Call enableProdMode() to enable the productionmode.
[09:54:33]  console.warn: Ionic Native: deviceready did not fire within 5000ms. This can happen when plugins are in an
            inconsistent state. Try removing plugins from plugins/ and reinstalling them.
[09:54:33]  console.log: Start Recording
[09:54:33]  console.warn: Native: tried calling MediaCapture.captureImage,
            but the MediaCapture plugin is not installed.
[09:54:33]  console.warn: Install the MediaCapture
            plugin: 'ionic cordova plugin add cordova-plugin-media-capture'
[09:54:33]  console.error: plugin_not_installed

Steps to reproduce:
Install Ionic

npm install -g cordova ionic

Start App and run through the following:

1. $ ionic start

2. Project Name: mediacapture

3. Choose a ‘blank’ ionic-angular project

4. ‘Y’ - integrate your new app with Cordova…

5. ‘Y’ - Install the free Pro SDK…

6. cd ./mediacapture

7. Install the Cordova and Ionic Native plugins:

8. $ npm install @ionic-native/core --save

9. $ ionic cordova plugin add cordova-plugin-media-capture

10. $ npm install --save @ionic-native/media-capture

11. Edit the app.module.ts, home.html, & home.ts files as shown below

12. $ ionic serve -lcs

Add the following to the app.module.ts file

import { MediaCapture/*, MediaFile, CaptureError, CaptureImageOptions*/ } from '@ionic-native/media-capture';

providers: [
   ...
   MediaCapture,

Add the following to the home.html file

<ion-content padding>
  <button ion-button (click)="startrecording()">Start</button>
</ion-content>
Add the following to the home.ts file
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { MediaCapture, MediaFile, CaptureError, CaptureImageOptions } from '@ionic-native/media-capture';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

   constructor(public navCtrl: NavController,private mediaCapture: MediaCapture) {

}

startrecording(){
   console.log('Start Recording');
   let options: CaptureImageOptions = { limit: 3 };
   this.mediaCapture.captureImage(options)
     .then(
       (data: MediaFile[]) => console.log(data),
       (err: CaptureError) => console.error(err)
     );
   }
}

Listing plugins show that the Media Capture plugin is installed:

$ ionic cordova plugin list
   > cordova plugin ls

  You have been opted out of telemetry. To change this, run: cordova telemetry on.
  cordova-plugin-media-capture 3.0.1 "Capture"

References:

Posts: 3

Participants: 2

Read full topic