Capture the video and store into local storage but could not retrieve the html page video tag
HtML Page
<ion-content>
<div class="container">
<h2>Upload Video</h2>
<ion-button expand="full" (click)="captureVideo()">Capture Video</ion-button>
</div>
<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>
Last video control tag could not display the captured video
TS page
export class UploadVideoPage implements OnInit {
@ViewChild('myvideo', { static: true }) myVideo:any;
mediaFiles=[];
datastorage:any;
constructor(private router:Router,
private storage:Storage,
private navCtrl:NavController,
private mediaCapture:MediaCapture,
private media:Media,
private file:File
) {
}
ngOnInit() {
}
ionViewDidLoad(){
this.storage.get(MEDIA_FILES_KEY).then(res=>{
this.mediaFiles=JSON.parse(res) ||[];
});
}
captureVideo(){
let options:CaptureVideoOptions={
limit:1,
duration:30
}
this.mediaCapture.captureVideo(options).then((res:MediaFile[])=>{
let capturedFile=res[0];
console.log('my file:' , 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}]);
});
});
}
play(myFile){
console.log('play:',myFile);
if(myFile.name.indexOf('.wav')>-1){
const audioFile:MediaObject = this.media.create(myFile.localURL);
audioFile.play();
}else{
let path=this.file.dataDirectory+myFile.name;
let url=path.replace(/^file:\/\//,'');
let video=this.myVideo.nativeElement;
video.src=url;
video.play();
}
}
storeMediaFiles(files){
console.log('store:',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(files);
})
}
}
config.xml
<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
<string>We would like to access your camera for recording</string>
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="NSMicrophoneUsageDescription">
<string>We would like to access your microphone for recording</string>
</edit-config>