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

      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?

  • Enzo Notario

    Hi! Do you know if ther is a way to have the “camera” inside the app (maybe as fragments in native development)? I tryied your code, but when I finished the record, the app is restarted, so I lost the stack and can’t catch the promise… thanks! and sorry for my english

  • Hassan Shahzad

    Hi, i want to upload the video with others parameters to the server is there any way?

  • Ankit Maheshwari

    Is there a way to get base64 of video captured using camera..?

    • base64 is a string whereas video is a continuous stream of data..

      • Ankit Maheshwari

        Then how do we create a file object to sent over the server just after camera captured video.

        • The captured video file will be saved on your phone.. Use the file-chooser plugin to select the video file and then create a blob out of it using a reader object. Then store the blob on a server or any other storage mechanism that you use..

          • Ankit Maheshwari

            Thanks raja yogan! Actually we don’t want user to select video from phone gallery (we are restricting that), instead we want user to capture it and upload as soon as the video is captured.
            Please suggest.

          • Sanchit Mahajan

            Hello Sir.. Will you help me in sending the video from gallery to server? Right now I captured the video from gallery and able to play in app, but I want to send that video to serve along with other stuff.. How to achieve this? This is my captured video code…
            selectvideo() {
            let video = this.myVideo.nativeElement;
            var options = {
            sourceType: 2,
            mediaType: 1

   => {
            video.src = data;
            //let vdopath = video.src.fullPath;
            Thanking You….

          • siva adhithya

            videodata is not defined whats the problem for me

          • Sanchit Mahajan

            Thanks for instant reply…In my above code what I am missing… I want to upload video to server…thanking you..

          • siva adhithya

            kindly give ur mailid sanchit mahajan
            i want to discuss something regarding ionic2

          • Sanchit Mahajan
  • Prithivraj K

    I am trying to record and display video immediately. I am getting response as below:


    In my ts:

    in my html:

    But I am unable to play video. Kindly help me.


    • Noah Wilson

      Hi Prithivraj,

      I had a similar issue. For whatever reason you are unable to bind video/image data via HTML, instead you must do it through TS. So instead of

      use something like Raja used ViewChild to access the native element and update the src inside of your typescript.

      @ViewChild(‘myvideo’) myVideo: any;
      selectVideo() {
      let video = this.myVideo.nativeElement;

      video.src = data;


  • Sanchit Mahajan

    Nice …. But I want to upload the video to server.. How to achieve it? Thanking You….

  • siva adhithya

    can we able to control the stop or pause button in camera ionic2