Analysis of Ionic Camera Components

As long as Ionic is a mobile development platform, very often it’s required to implement some functionality related to uploading, capturing, saving and editing images on your application.

To implement these features with Ionic you mostly have to use Cordova plugins. Cordova plugins are packages of injected code, allowing the Cordova WebView, where the app renders to communicate with the native platform on which it runs.

After installing these plugins you will get access to the device’s functionality which isn’t available on web-based apps. Cordova plugins are written in native platform’s languages. And with the help of JavaScript, the device will use its “native” iOS or Android functionality.

Ionic also offers to use Ionic Native, which is basically a wrapper of Cordova plugins, making life easier when using them. It wraps plugin callbacks in Observables or Promises for much more handy usage.

:one: cordova-plugin-camera

This cordova plugin allows to use device’s native camera for taking pictures and choosing pictures or videos from system’s library.

To install on your Ionic project run:

$ ionic cordova plugin add cordova-plugin-camera

$ npm install --save @ionic-native/camera@4

Last command will install ionic-native wrapper for cordova-plugin-camera.

Basic usage:

getCamerapicture() {
  const options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    sourceType: this.camera.PictureSourceType.CAMERA
  };
  this.camera.getPicture(options).then((imageData) => {
    this.image = imageData.replace(/^file:\/\//, '');
  });
}

This example shows how to implement function which calls native photo camera and saves the result in global variable.

CameraOptions mean:

• quality: expressed as a range of 0-100, where 100 is the best quality (default value is 50);
• destinationType: the format of the return value;
• sourceType: source of the picture (Camera, Photolibrary or SavedPhotoAlbum).

Cordova-plugin-camera is a powerful solution for attaching media in your Ionic project.

Our reasons for choosing this plugin:

• possibility to choose the type of return value: DATA_URL (base64 encoded string), FILE_URI, NATIVE_URI;
• possibility to attach both image and video from phone library;
• basic image edit option.

Extra tips you should consider when choosing to work with this plugin:

• you can’t capture video via Cordova-plugin-camera (attaching only);
• edit option works unexpected on Android and it’s not recommend to allow editing on this platform. Also editing area bounces incorrectly when working with just captured image on iOS. This is not fixed on 4.0.3 version of plugin;
• by cameraDirection you can choose to use front- or back-facing option.

:two: cordova-plugin-media-capture

This cordova plugin provides access for capturing video, photo and audio from mobile device. It’s also recommended to install Media Capture plugin from Ionic Native library, when building an Ionic app.

As we were already using cordova-camera-plugin for capturing photos, we integrated cordova-plugin-media-capture to only make short videos.

To install on your Ionic project run:

$ ionic cordova plugin add cordova-plugin-media-capture

$ npm install --save @ionic-native/media-capture@4

Basic usage:

captureVideo() {
  let options: CaptureVideoOptions = {
  duration: 5
  };
  this.mediaCapture.captureVideo(options).then((result: MediaFile[]) => {
    this.video = result[0];
  }, (error: CaptureError) => {
    console.warn(error);
  });
}

The example above shows us how to implement a function to capture a video.

There are a couple of video options available to choose:

• duration: sets the max video duration in seconds. Video capturing automatically stops when the time ends;
• limit: sets the max quantity of video clips (defaults to 1).

CaptureVideo promise returns an array of MediaFiles. As long as the limit is 1 we’re saving the first element of array into our global variable.

Our reasons for choosing this plugin:

• no alternatives for capturing videos;
• available option to limit a video clip duration.

Extra facts you should be aware of when starting to work with this component:

• this plugin has a quality option for video. A value of 1 ( the default ) means high quality and value of 0 means low quality (Android only);
• there is a bug in last release version 3.0.2 on some Android versions. Application crashes during the video capturing because of permissions. You can fix this manually or find and fork the plugin version which is already fixed.

Summing up, both of the plugins, discussed above, are viable. They are not universal, but their limitations can be handled.