How to capture an image or record video with Ionic?

#1

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:

#2

Is your code that initialized the plugin wrapped in platform.ready() ?

If it’s outside of that, errors occur

#3

Well the code is inside a function that’s trigger by a click event. Should that suffice? Every time you click the “Start” button the following is output to the terminal:

[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
#4

Yeah probably. Are you running on an actual device, and not DevApp? That may be the problem, or you may need to add a USAGE_DESCRIPTION of some kind to config.xml.

Those are my only thoughts

#5

Thanks for the suggestions. I’m currently running inside the Ionic DevApp on the Android. Any suggestions regarding finding out more about the USAGE_DESCRIPTIONs for the config.xml?

#6

I’d check the plugins git repo or readme attaches to that plugin under your projects plugins folder.

I’d guess it’s DevApp though (it’s not on their list of supported plugins for DevApp)

#7

jaydz, it looks like you are correct. The MediaCapture plugin is not currently in the DevApp supported plugins list. Thanks for your help!