Getting "Uncaught (in promise): TypeError: Object(...) is not a function" Error from Ionic-native VideoEditor Plugin

Question

I'm developing an ionic app, where user can record a new video. Then I want to break the video into frames and send frames to a server. I'm using createThumbnail function from ionic-native VideoEditor plugin. But when I try to call createThumbnail function, it throws

ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function

Here's my source code.

HTML Code

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

TypeScript Code

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");
    });
  }

Can someone help me with, why I'm getting such error?

Rathnakara S · Accepted Answer · 2019-02-01 06:44:55Z

6

It seems ionic team has made some changes to their native plugins. You need to install the correct version of the native plugin corresponding to your project type. And import it correctly based on your angular version. All you need to do is,

Check your project type in ionic.config.json file.

If the type is "ionic-angular", then install 4.x.x version. In your case

npm i -s @ionic-native/[email protected]

If the type is "angular", then install 5.x.x-beta version

npm i -s @ionic-native/[email protected]

Note:

Add ngx at the end of import only if you are using Angular 6

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

if not remove ngx from the import both in app.module.ts and app.component.ts

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

Refencence:https://github.com/ionic-team/ionic/issues/15225#issuecomment-414074074

answered Feb 1, 2019 at 6:44

Rathnakara S

1,46611 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thamindu DJ Over a year ago

This solution works for me. So the problem is with the plugin version.Thank you very much @Rathnakara S.

Collectives™ on Stack Overflow

Getting "Uncaught (in promise): TypeError: Object(...) is not a function" Error from Ionic-native VideoEditor Plugin

HTML Code

TypeScript Code

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML Code

TypeScript Code

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related