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.
<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");
});
}
Can someone help me with, why I'm getting such error?
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.xx version. In your case
npm i -s @ionic-native/video-editor@4.20.0
If the type is " angular ", then install 5.xx-beta version
npm i -s @ionic-native/video-editor@5.0.0-beta.24
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.