时间戳

首页 > 解决方案 > 来自 Ionic-native VideoEditor 插件的“Uncaught (in promise): TypeError: Object(...) is not a function”错误

angular - 来自 Ionic-native VideoEditor 插件的“Uncaught (in promise): TypeError: Object(...) is not a function”错误

问题描述

我正在开发一个离子应用程序，用户可以在其中录制新视频。然后我想将视频分成帧并将帧发送到服务器。我正在使用插件中的createThumbnail功能。ionic-native VideoEditor但是当我尝试调用createThumbnail函数时，它会抛出

ERROR 错误：未捕获（承诺中）：TypeError：Object(...) 不是函数

这是我的源代码。

HTML 代码

<ion-content padding>
  <button ion-button full (click)="captureVideo()">Capture video</button>
  <br/>
  <ion-list>
    <ion-item *ngFor="let file of mediaFiles" tappable (click)="playFile(file)" text-wrap>
      {{file.name}}
      <p>{{file.size/1000/1000 | number}} MB</p>
    </ion-item>
  </ion-list>
  <video controls autoplay #myvideo></video>
</ion-content>

打字稿代码

captureVideo() {
    let options: CaptureVideoOptions = {
      limit: 1,
      duration: 30
    }
    this.mediaCapture.captureVideo(options).then((res: MediaFile[]) => {

      let videoData = JSON.stringify(res);
      let res1 = JSON.parse(videoData);
      this.videoURL = res1[0]['fullPath'];
      
      let video = this.myvideo.nativeElement;
      video.src =  this.videoURL;
      video.play();

      var option: CreateThumbnailOptions = {
        fileUri: res[0].fullPath,
        outputFileName: 'aaaa',
        atTime: 2,
        width: 320,
        height: 480,
        quality: 100
      };
      console.log("option :" ,option);
      this.videoEditor.createThumbnail(option).then(res=>{
        console.log('Thumbnail result: ' + res);
      }).catch(err=>{
        console.log("ERROR ERROR", err)
      });

    }, (err) => {
      console.log("ERROR", "error selecting video");
    });
  }

有人可以帮助我，为什么我会收到这样的错误？

标签： angulartypescriptionic-frameworkionic3ionic4

解决方案

似乎 ionic 团队对他们的原生插件进行了一些更改。您需要安装与您的项目类型相对应的正确版本的原生插件。并根据您的角度版本正确导入。你需要做的就是，

在ionic.config.json文件中检查您的项目类型。

如果类型为“ ionic-angular ”，则安装 4.xx 版本。在你的情况下

npm i -s @ionic-native/video-editor@4.20.0

如果类型为“ angular ”，则安装 5.xx-beta 版本

npm i -s @ionic-native/video-editor@5.0.0-beta.24

笔记：

仅当您使用 Angular 6 时，才在导入结束时添加 ngx

import { VideoEditor } from '@ionic-native/video-editor/ngx';

如果不从 app.module.ts 和 app.component.ts 中的导入中删除 ngx

import { VideoEditor } from '@ionic-native/video-editor';

参考：https ://github.com/ionic-team/ionic/issues/15225#issuecomment-414074074

推荐阅读