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

T-Pub :)

The Techies' pub

Ionic 2 – Video capture and playback

Read previous post:

Ionic 2 – Authentication using Firebase