Ionic 2 – Video capture and playback

Hi Friends,

Hope you are all well. This is one the most requested posts on this site. It’s pretty much simple to capture video in your Ionic 2 app, save it on your phone and play it back using a couple of plugins.

Let’s begin.

A video screencast of this post.

The complete code for this post is available here.

Scaffold out a new application using the ionic-cli.

We are going to use the MediaCapture plugin to capture video using the device camera. To install the plugin use the below command.

Now open up app.module.ts and add the MediaCapture component in providers as shown below.

Open up home.html. Let’s add a button to start recording. Add the below content inbetween ion-content tags.

Now open up home.ts file and write the code as shown below.

Now we could simply click on a button and record video using our app. This will get stored on the phone storage and is persistent.

Now to play this video in our app, we will make use of the Camera plugin. To install the plugin use the below command.

Once again open up app.module.ts and modify it as shown below.

 

Open up home.html and modify it as shown below.

Our video is going to be played in the video element. So let’s wire it up in home.ts as shown below.

Run the app in your device. Since we are using a couple of cordova plugins, it won’t run on a browser. If everything goes fine you would see a screen with a couple of buttons. Record a video. Click the select button and select the video you just recorded and it will play automatically in the app.

Please watch the video once as I feel I have explained it a bit better in the video. If you found this helpful, kindly share it with someone and help them too.

Thanks for reading guys. Peace.. :)

Liked it? Take a second to support admin on Patreon!
  • Jiya

    Thank you a lot .. How can we set a limit duration of a video record ?

    • slotdp02

      MediaCapture.captureVideo({
      limit: 1,
      duration: 5
      })

  • slotdp02

    Do you know a way to take the video automatically? The captureVideo method just opens the camera on the device. The user still has to press the record button. I’m building a photo booth style app so i need to start the recording on a trigger.

  • Iroshan Vithanage

    I got a blank screen :(

  • Nick Bleyen

    Is there a way to put the video that you recorded immediately in the video element without having to select it?