Mediafilepicker video file selection(display video on the app) - nativescript-angular

Question

I am using Mediafilepicker plugin to pick a video file from my device, but when I select the video it doesn't display on the app but once I press (pick a video) button for the second time its when the video shows
I searched for a similar problem but didn't find any
public pickvideo(){
let options: VideoPickerOptions = {
android: {
isCaptureMood: false,
isNeedCamera: true,
maxNumberFiles: 1,
isNeedFolderList: true,
maxDuration: 20,
},
};
let mediafilepicker = new Mediafilepicker();
mediafilepicker.openVideoPicker(options);
mediafilepicker.on("getFiles", res => {
let results = res.object.get('results');
this.videoSrc = results[0].file;
console.dir(results);
if (results) {
for (let i = 0; i < results.length; i++) {
let result = results[i];
console.dir(result);
let file = result.file;
console.log(file);
}
}
It doesn't show any errors

Answer 1

Use this code for pick a video from gallery and show in the app.
media-picker.component.ts:-
import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from "#angular/core";
import { Page } from "tns-core-modules/ui/page";
import * as app from 'tns-core-modules/application';
import { Mediafilepicker, VideoPickerOptions } from 'nativescript-mediafilepicker';
declare const AVCaptureSessionPreset1920x1080, AVCaptureSessionPresetHigh;
#Component({
selector: "media-picker",
moduleId: module.id,
templateUrl: "./media-picker.component.html",
styleUrls: ["./media-picker.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MideaPickerComponent implements OnInit {
public videoFileUrl: Array<string> = [];
constructor(public page: Page,
private ref: ChangeDetectorRef) {
// Use the constructor to inject services.
// Get reference to object we want to animate with code
}
ngOnInit(): void {
}
//Open video gallery list
public openVideoGallery() {
let allowedVideoQualities = [];
if (app.ios) {
allowedVideoQualities = [AVCaptureSessionPreset1920x1080, AVCaptureSessionPresetHigh];
}
let options: VideoPickerOptions = {
android: {
isCaptureMood: false,
isNeedCamera: true,
maxNumberFiles: 2,
isNeedFolderList: true,
maxDuration: 20,
},
ios: {
isCaptureMood: false
}
};
let mediafilepicker = new Mediafilepicker();
mediafilepicker.openVideoPicker(options);
mediafilepicker.on("getFiles", (res) => {
let results = res.object.get('results');
if (results) {
this.videoFileUrl = [];
for (let i = 0; i < results.length; i++) {
let result = results[i];
let file = result.file;
this.videoFileUrl.push(file);
if (result.file && app.ios && !options.ios.isCaptureMood) {
let fileName = file.replace(/^.*[\/]/, '');
setTimeout(() => {
mediafilepicker.copyPHVideoToAppDirectory(result.urlAsset, fileName).then(res => {
console.dir(res);
}).catch(e => {
console.dir(e);
});
}, 1000);
} else if (result.file && app.ios) {
// or we will get our own recorded video :)
console.log(file);
}
}
}
});
mediafilepicker.on("error", (res) => {
let msg = res.object.get('msg');
console.log(msg);
});
mediafilepicker.on("cancel", (res) => {
let msg = res.object.get('msg');
console.log(msg);
});
setInterval(() => {
// require view to be updated
this.ref.markForCheck();
}, 500);
}
}
media-picker.component.html:-
<StackLayout row="0">
<Button height="50" (tap)="openVideoGallery()" text="Open Video Gallery">
</Button>
</StackLayout>
<StackLayout row="1">
<VideoPlayer *ngFor="let video of videoFileUrl" src="{{video}}" autoplay="true" height="300"></VideoPlayer>
</StackLayout>