ionic-framework - Ionic v4 Uncaught TypeError : Object(. ..) 不是函数

Question

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { ModalController, NavParams } from '@ionic/angular';
import { SelecttopicPage } from '../selecttopic/selecttopic.page';
import { ActionSheetController } from '@ionic/angular';
import { Platform } from '@ionic/angular';
import { Storage } from '@ionic/storage';
import { MediaCapture, MediaFile, CaptureError, CaptureVideoOptions } from '@ionic-native/media-capture';
import { Media } from '@ionic-native/media';
import { File } from '@ionic-native/file';
import { Diagnostic } from '@ionic-native/diagnostic';
import { AndroidPermissions } from '@ionic-native/android-permissions';

const MEDIA_FILES_KEY = 'mediaFiles';

@Component({
  selector: 'app-uploadvid',
  templateUrl: './uploadvid.page.html',
  styleUrls: ['./uploadvid.page.scss'],
})
export class UploadvidPage implements OnInit {
  @ViewChild('myvideo') myVideo: any;
  //uploadVid: FormGroup;
  public filePath: string;
  public mediaFiles = [];
  public isAndroid: boolean;

  uploadVid = new FormGroup({
    title: new FormControl('', Validators.required),
    topic: new FormControl({value: '', disabled: true}, Validators.required),
    target: new FormControl('', Validators.required)
  });

  PERMISSION = {
    WRITE_EXTERNAL: this.diagnostic.permission.WRITE_EXTERNAL_STORAGE,
    READ_EXTERNAL: this.diagnostic.permission.READ_EXTERNAL_STORAGE,
    CAMERA: this.diagnostic.permission.CAMERA,
  };

  constructor(public formBuilder: FormBuilder, 
    public modalCtrl: ModalController, 
    public platform: Platform, 
    public actionSheetController: ActionSheetController, 
    public storage: Storage, 
    public mediaCapture: MediaCapture, 
    public media: Media, 
    public file: File, 
    private diagnostic: Diagnostic, 
    private androidPermissions: AndroidPermissions) { 

    // this.uploadVid = formBuilder.group({
    //   title: ['', Validators.compose([Validators.required])],
    //   topic: ['', Validators.compose([Validators.required])],
    //   target: ['', Validators.compose([Validators.required])]
    // });
  }

  ngOnInit() {
    this.checkIfMobile();
  }

  loadStoredVideo(){
    this.storage.get(MEDIA_FILES_KEY).then(res => {
        this.mediaFiles = JSON.parse(res) || [];
    });
  }

  checkIfMobile(){
    if(this.platform.is('android')){
      this.isAndroid = true;
    }else{
      this.isAndroid = false;
    }
  }

  async openModal() {
    const modal = await this.modalCtrl.create({
      component: SelecttopicPage,
      //componentProps: { value: 123 }
    });

    modal.onDidDismiss((topic) => {

      console.log("topic2: "+topic);
      this.uploadVid.controls['topic'].setValue(topic);

    })

    return await modal.present();

  }

  // for web & ios
  handleFileSelect(evt){
    this.filePath = evt.target.files;
    alert("Selected Video: "+this.filePath);
  }

  // for android
  async openVidOption() {
    const actionSheet = await this.actionSheetController.create({
      header: "Albums",
      buttons: [{
        text: 'Camera',
        role: 'destructive',
        icon: 'camera',
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: 'Gallery',
        role: 'cancel',
        icon: 'folder-open',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });
    await actionSheet.present();
  }

  checkAndroidPerm(){
    if(this.platform.is('android')){
       //this.requestAllPermissions();
       this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.CAMERA).then(
        (success) => {console.log('Succes granted the permissions');
        this.captureVideo()},
        (err) => {this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA)}
    );

    this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.CAMERA, this.diagnostic.permission.WRITE_EXTERNAL_STORAGE, this.diagnostic.permission.WRITE_EXTERNAL_STORAGE]);
    }
  }

  // requestAllPermissions(){
  //   const permissions = Object.keys(this.PERMISSION).map(k => this.PERMISSION[k]);
  //   this.diagnostic.requestRuntimePermissions(permissions).then((status) => {
  //           alert(JSON.stringify(status));
  //       }, error => {
  //           alert('Error: '+ error);
  //   });
  // }

  captureVideo(){
    let options: CaptureVideoOptions = {
      limit: 1,
      duration: 30
    }
    this.mediaCapture.captureVideo(options).then((res: MediaFile[]) => {
        //this.storeMediaFiles(res);
        let capturedFile = res[0];
        console.log('capturedFile: '+capturedFile);
        let fileName = capturedFile.name;
        let dir = capturedFile['localURL'].split('/');
        dir.pop();
        let fromDirectory = dir.join('/');
        let toDirectory = this.file.dataDirectory;

        this.file.copyFile(fromDirectory, fileName, toDirectory, fileName).then(res => {
          let url = res.nativeURL.replace(/^file:\/\//, '');
          this.storeMediaFiles([{name: fileName, size: capturedFile.size, localURL: url}]);
        });
    });
  }

  storeMediaFiles(files){
    this.storage.get(MEDIA_FILES_KEY).then(res =>{
      if(res){
        let arr = JSON.parse(res);
        arr = arr.concat(files);
        this.storage.set(MEDIA_FILES_KEY, JSON.stringify(arr));
      }else{
        this.storage.set(MEDIA_FILES_KEY, JSON.stringify(files));
      }
      this.mediaFiles = this.mediaFiles.concat();
    })
  }

  playFile(myFile){
    console.log('play: ', myFile);
    let video = this.myVideo.nativeElement;
    video.src = myFile.localURl;
  }



  

}

我是 Ionic 的新手，正在研究此 tutorial 的视频捕获功能.当我构建 android apk 并打开应用程序时，我得到了空白屏幕。所以我检查了计算机浏览器并得到错误，如屏幕截图所示。我试图寻找它的解决方案并找到了这个帖子 Link1和 Link2但这也没有解决我的问题。

如果有人可以在这方面帮助我，那就太好了。提前致谢。

// config.xml

<plugin name="cordova-plugin-whitelist" spec="1.3.3" />
    <plugin name="cordova-plugin-device" spec="2.0.2" />
    <plugin name="cordova-plugin-ionic-webview" spec="^2.0.0" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
    <plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
    <plugin name="cordova-sqlite-storage" spec="^2.3.3" />
    <plugin name="cordova-plugin-filechooser" spec="^1.0.1" />
    <plugin name="cordova-plugin-filepicker" spec="^1.1.5" />
    <plugin name="cordova-plugin-filepath" spec="^1.4.2" />
    <plugin name="cordova-plugin-camera" spec="^4.0.3" />
    <plugin name="cordova-plugin-file" spec="^6.0.1" />
    <plugin name="cordova-plugin-media" spec="^5.0.2">
    <plugin name="cordova-plugin-android-permissions" spec="^1.0.0" />
    <plugin name="cordova.plugins.diagnostic" spec="^4.0.8" />
    <engine name="ios" spec="4.5.5" />
    <engine name="android" spec="7.0.0" />
    <plugin name="cordova-plugin-media-capture" spec="^3.0.2" />

// package.json

"dependencies": {
    "@angular/common": "6.0.9",
    "@angular/core": "6.0.9",
    "@angular/forms": "6.0.9",
    "@angular/http": "6.0.9",
    "@angular/platform-browser": "6.0.9",
    "@angular/platform-browser-dynamic": "6.0.9",
    "@angular/router": "6.0.9",
    "@ionic-native/android-permissions": "^4.12.0",
    "@ionic-native/core": "5.0.0-beta.14",
    "@ionic-native/diagnostic": "^4.12.0",
    "@ionic-native/file": "^4.12.0",
    "@ionic-native/file-chooser": "^4.12.0",
    "@ionic-native/file-path": "^4.12.0",
    "@ionic-native/media": "^4.12.0",
    "@ionic-native/media-capture": "^4.12.0",
    "@ionic-native/splash-screen": "5.0.0-beta.14",
    "@ionic-native/status-bar": "5.0.0-beta.14",
    "@ionic/angular": "4.0.0-beta.0",
    "@ionic/lab": "^1.0.2",
    "@ionic/ng-toolkit": "1.0.0",
    "@ionic/schematics-angular": "1.0.1",
    "@ionic/storage": "^2.1.3",
    "angular-progress-http": "^1.0.0",
    "cordova-android": "7.0.0",
    "cordova-ios": "4.5.5",
    "cordova-plugin-android-permissions": "^1.0.0",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-filechooser": "^1.0.1",
    "cordova-plugin-filepath": "^1.4.2",
    "cordova-plugin-filepicker": "^1.1.5",
    "cordova-plugin-ionic-keyboard": "^2.1.2",
    "cordova-plugin-ionic-webview": "^2.0.2",
    "cordova-plugin-media": "^5.0.2",
    "cordova-plugin-media-capture": "^3.0.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.3.3",
    "cordova.plugins.diagnostic": "^4.0.8",
    "core-js": "^2.5.3",
    "rxjs": "^6.2.2",
    "rxjs-compat": "^6.2.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "6.0.8",
    "@angular/compiler": "6.0.9",
    "@angular/compiler-cli": "6.0.9",
    "@angular/language-service": "6.0.9",
    "@angular-devkit/architect": "0.7.0-rc.3",
    "@angular-devkit/build-angular": "0.7.0-rc.3",
    "@angular-devkit/core": "0.7.0-rc.3",
    "@angular-devkit/schematics": "0.7.0-rc.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.5.2",
    "codelyzer": "~4.4.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.7.2"
  }

Answer 1

我所要做的就是:
在依赖项中，而不是 "@ionic-native/media-capture": "^4.12.0"我写了 "@ionic-native/media-capture": "^5.0.0-beta.14" .之后我输入 npm update在 CLI 中。在我的页面组件中，我使用了 import { MediaCapture, MediaFile, CaptureError, CaptureImageOptions } from '@ionic-native/media-capture/ngx'; .这里的重要部分是/ngx如本 link 中所述.好吧，我必须为 AndroidPermissions、Diagnostic、Media 和 File 执行此操作。那个问题解决了之后。希望它能帮助别人。