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.

ionic plugin add cordova-plugin-media-capture

1	ionic plugin add cordova-plugin-media-capture

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

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { MediaCapture } from 'ionic-native';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, MediaCapture]
})
export class AppModule {}

import { NgModule, ErrorHandler } from '@angular/core';

import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { MediaCapture } from 'ionic-native';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, MediaCapture]

})

export class AppModule {}

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

<button ion-button (click)="startrecording()">Start</button>

1	<button ion-button (click)="startrecording()">Start</button>

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

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { MediaCapture } from 'ionic-native';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  
  constructor(public navCtrl: NavController) {
  }

  startrecording() {
    MediaCapture.captureVideo((videodata) => {
      alert(JSON.stringify(videodata)); 
     })
  }
}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { MediaCapture } from 'ionic-native';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController) {

}

startrecording() {

MediaCapture.captureVideo((videodata) => {

alert(JSON.stringify(videodata));

})

}

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.

ionic plugin add cordova-plugin-camera

1	ionic plugin add cordova-plugin-camera

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

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { MediaCapture, Camera } from 'ionic-native';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, MediaCapture, Camera]
})
export class AppModule {}

import { NgModule, ErrorHandler } from '@angular/core';

import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { MediaCapture, Camera } from 'ionic-native';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, MediaCapture, Camera]

})

export class AppModule {}

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

<ion-header>
 <ion-navbar>
 <ion-title>
 Ionic Blank
 </ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
<button ion-button (click)="startrecording()">Start</button>
<button ion-button (click)="selectvideo()">Select</button>
<video #myvideo height="300" width="300" controls></video>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button (click)="startrecording()">Start</button>

<button ion-button (click)="selectvideo()">Select</button>

</ion-content>

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

import { Component, ViewChild } from '@angular/core';

import { NavController } from 'ionic-angular';

import { MediaCapture, Camera } from 'ionic-native';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 
  @ViewChild('myvideo') myVideo: any;
  
  constructor(public navCtrl: NavController) {
    
  }

  startrecording() {
    MediaCapture.captureVideo((videodata) => {
      alert(JSON.stringify(videodata)); 
     })
  }

  selectvideo() {
    let video = this.myVideo.nativeElement;
    var options = {
      sourceType: 2,
      mediaType: 1
    };

    Camera.getPicture(options).then((data) => {
      video.src = data;
      video.play();
    })
  }

}

import { Component, ViewChild } from '@angular/core';

import { NavController } from 'ionic-angular';

import { MediaCapture, Camera } from 'ionic-native';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

@ViewChild('myvideo') myVideo: any;

constructor(public navCtrl: NavController) {

}

startrecording() {

MediaCapture.captureVideo((videodata) => {

alert(JSON.stringify(videodata));

})

}

selectvideo() {

let video = this.myVideo.nativeElement;

var options = {

sourceType: 2,

mediaType: 1

};

Camera.getPicture(options).then((data) => {

video.src = data;

video.play();

})

}

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..

Follow me

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?
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..?
- raja yogan
  
  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.
    - raja yogan
      
      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.
Prithivraj K

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

[{“name”:”20160710_195724.mp4″,
“localURL”:”cdvfile://localhost/sdcard/DCIM/Camera/20160710_195724.mp4″,
“type”:”video/mp4″,”lastModified”:null,
“lastModifiedDate”:1468195046000,”size”:2731528,
“start”:0,”end”:0,
“fullPath”:”file:///storage/emulated/0/DCIM/Camera/20160710_195724.mp4″}]”

In my ts:
this.videosrc=response[0].fullPath;

in my html:

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

Thanks
- 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;
  …
  }

T-Pub :)

The Techies' pub

Ionic 2 – Video capture and playback

Read previous post:

Ionic 2 – Authentication using Firebase