How to record video in ionic2 app with typescript using Camera from ionic-native?

Ionic Framework ionic-v3
1

I could find many samples of capturing image using Camera, but recording video doesn’t work. Here is the sample code I was trying to use

Camera.getPicture({
      destinationType: Camera.DestinationType.DATA_URL,
      mediaType: Camera.MediaType.VIDEO,
      sourceType: Camera.PictureSourceType.CAMERA
    }).then((videoData) => {
      this.base64Video = "data:video/mp4;base64," + videoData;
    }, (err) => {
      console.log(err);
    });

This opens up camera to capture image but not to record video. Where am I going wrong?

1 Like
2

To record a video, you need to use Cordova Media Capture, which isn’t part of ionic 2 native [at time of writing]. You can install it from Definitely Typed with:

typings install -SG dt~cordova/plugins/mediacapture

Then:

recordVideo() {
        navigator.device.capture.captureVideo(
          (videoData) => {
              console.log('Video Recorded. Result: '+ JSON.stringify(videoData));
              //do something with videoData
          },
          (err) => {
            console.log('videoCaptureFail, err: ', err);
          },
          {
              limit: 1,
              duration: 60
          }
        );

‘limit’ and ‘duration’ are the only parameters you can set with media capture.

The output of the console.log is:
"Video Recorded. Result: [{"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"}]", source: file:///android_asset/www/build/js/app.bundle.js (377)

1 Like