How to display captured video in ionic 2 using Typescript

Question

Using ionic 2 with Typescript I could capture video with the following code:

takeVideo() {
let data: Array<any> = this.MediaFile;
let  options = { 
   limit: 1, 
   duration: 15,
   type: "video/mp4",
   height: 100,
   width: 120,
   quality: 1
};
MediaCapture.captureVideo(options)
  .then((MediaFile) => { this.MediaFile[0] = "data:video/mp4" + MediaFile;
    console.log(MediaFile);
    let i, path, len;
    for (i = 0, len = data.length; i < len; i += 1) {
      console.log(path);
      // How do I display this video to the user?
      this.videoFilePath = MediaFile[0].fullPath;

    }
  },
  (err) => {
    console.error(err);
  }
  );
}

But I could not display the captured video to enable the user to preview the captured video. Meanwhile, the captured video is always saved in the phone. I was trying the following code in home.html to display the captured video with it:

<video width="320" height="240" id="resource-video" controls="controls" autoplay="false" 
  [src]="MediaFile" *ngIf="MediaFile">
</video>

I do not know what else to do to get the captured video displayed. Please I'm eagerly seeking for a way to have it done. Kindly assist me if you could. Thanks.

Did you manage to get a solution for this? I also have the same issue now — J.Rem
– J.Rem, Commented May 3, 2017 at 22:39
@J.Rem Is your issue with video resolved? If not let me know, I've got a solution. — Iris_geek
– Iris_geek, Commented Jun 29, 2017 at 12:06

Iris_geek · Accepted Answer · 2017-06-29 12:15:55Z

Did some workaround for my project and here is my solution. Hope it helps someone.

import { Component, ViewChild } from '@angular/core';
import { Camera } from '@ionic-native/camera';
import { MediaCapture } from '@ionic-native/media-capture';
import { VideoPlayer } from '@ionic-native/video-player';

export class HomePage {

@ViewChild('myvideo') myVideo: any;
videoURL: any;


this.videoCapture(this.camera.MediaType.VIDEO);

videoCapture(mediaType) {

 var options = {
  limit: 1,
  mediaType: mediaType,
  duration: 10
};

this.mediaCapture.captureVideo(options).then((data: MediaFile[])=>{

    let videoData = JSON.stringify(data);
    let res1 = JSON.parse(videoData);

    this.videoURL = res1[0]['fullPath'];

    let video = this.myVideo.nativeElement;

    video.src =  this.videoURL;
    video.play();

}, (err) => {
  this.presentToast('Error while selecting video');
});

}
}

In my html

<video #myvideo controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" width="100" height="100" class="videoPlayer"></video>

Juljan Dimo · Accepted Answer · 2016-11-16 00:25:21Z

0

I used many times capture video and to display them on my view i used the code as below.

<iframe ng-src="MediaFile" frameborder="0" >
</iframe>

answered Nov 16, 2016 at 0:25

Juljan Dimo

1

Collectives™ on Stack Overflow

How to display captured video in ionic 2 using Typescript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related