How to capture video and play it back?

Ionic Framework ionic-v3
21

@olivier_p did you solve this issue. If yes, then let me know, how you solved it?

22

Hey I have solution for this. I posted on stack overflow. Check this link

23

@Geeky_Girl, i want to record the video and then send it to the server. Do you know how to get video after recording?

24

That’s what I did in the code. Can you please check with the code and run? It’s working for me.

25

@Geeky_Girl, your example code is not uploading a video after recording. While i have some confusion.

Why you use @ViewChild(‘myvideo’) myVideo: any; What is reason of using it.

Then you capture video by this.videoCapture(this.camera.MediaType.VIDEO);

Then again you are capturing video by this.mediaCapture.captureVideo(options).then((data: MediaFile[])=>

What is this.myVideo.nativeElement; ?

26

It’s a directive to display the video captured in html. In HTML if you see am actually adding it to video tag. It wasn’t working for me if I give source attribute. Hence I did this way. you have to add the relative cordova plugins camera and mediacapture and set options for video (which includes duration, mediatype, and limit). This is the working prototype of capturing the video and displaying it in ionic view. You might be doing something wrong. Read the docs before directly writing the code. I did the same.

27

@Geeky_Girl, I do not want to play video, i want to record it and then upload it. For this do you have any solution.

28

Are you able to solve your issue?

I can able to play downloaded video but not able to play recorded video by my phone’s camera.

29

Can you check with my code. It’s working fine for me. Can you tell exactly where it is going wrong?

30

I am using Lenovo phone. When I record video and try to play using video tag, it is not playing. When I click on play, it just turns to pause but not showing video or duration.

31

can you alert the video path and check what it is? Is it working on emulator or any other phones?

32

It is working on Samsung device as well as in my other video play app (MX player) also. Path starts without “file://” prefix.

33

So are you saying that it’s not working only on Lenovo phone and it has nothing to do with your code?

34

That’s what I believe because it is working with other device or may be there is some other way to play it.

35 
 <video controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer">
      <source src= "{{your video source}" type="video/mp4"/></video>

Try this once.

36

I already tried this solution but it seems that problem with codec supported by video tag. so for the workaround, I just display thumb instead of play video and onClick of thumb I open native player to play video. Thanks for your help though.

37

HI,

I am trying to use ionic 2 media-capture native plugin. I am able to record video and receive response.
But I am unable to play it. Kindly help me.Find the code and response below.

ts:

import { MediaCapture, MediaFile, CaptureError, CaptureVideoOptions } from '@ionic-native/media-capture';

constructor(private media:MediaCapture){}
vsrc;
capture(){
const options:CaptureVideoOptions={
    limit:1
   }
   this.media.captureVideo(options)
   .then((re:MediaFile[])=>{
     
       this.vsrc=re[0].fullPath;  
     
   })
   .catch((ero)=>{
       console.log(JSON.stringify(ero));
   })
}

html:

<video controls="controls">
      <source [src]="vsrc" type="video/mp4">
    </video>
38

make the local server of the folder if you want to access file for mobile
below link will give a clear explanation of how to do it.

39

Thanks @killerchip for the explanation. This resolved my issue.