android - 如何使用 Ionic 3 拍摄图像或录制视频

Question

在带有 Ionic DevApp 的 Pixel 2 上运行时，我似乎无法解决这些警告和错误:

警告和错误:

[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

重现步骤:

安装 ionic

npm install -g cordova ionic

启动应用程序并运行以下内容:

1. $ ionic 启动

2. 项目名称:mediacapture

3. 选择一个“空白” ionic 角度项目

4. 'Y' - 将您的新应用与 Cordova 集成...

5. 'Y' - 安装免费的 Pro SDK...

6. cd ./mediacapture

7. 安装 Cordova 和 Ionic Native 插件:

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

9. $ ionic cordova 插件添加 cordova-plugin-media-capture

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

11. 如下所示编辑 app.module.ts、home.html 和 home.ts 文件

12. $ ionic serve -lcs

将以下内容添加到 app.module.ts 文件

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

providers: [
   ...
   MediaCapture,

将以下内容添加到 home.html 文件

<ion-content padding>
  <button ion-button (click)="startrecording()">Start</button>
</ion-content>

将以下内容添加到 home.ts 文件中

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 显示已安装 Media Capture 插件:

$ 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"

引用资料:

https://ionicframework.com/getting-started

https://ionicframework.com/docs/native/media-capture/

Answer 1

MediaCapture 插件在 Ionic DevApp 中不起作用，因为它目前不受支持。 Here is a list of the currently supported DevApp plugins.

为了测试 MediaCapture 插件，您需要在平台或模拟器上运行该应用。