Cordova/Capacitor CanvasCamera plugin

Plugin's Purpose

The purpose of the plugin is to capture video to preview camera in a web page's canvas element. Allows to select front or back camera and to control the flash.

Table of Contents

1. Working Demo
2. Supported Platforms
3. Dependencies
4. Installation
5. Using the plugin (JavaScript)
6. Using the plugin (TypeScript)

Working Demo

Cordova

• Having trouble using CanvasCamera with Cordova ? Check our working cordova (javascript) demo here.

Capacitor

• Having trouble using CanvasCamera with Capacitor ? Check our working capacitor (typescript) demo here.

Supported Platforms

• iOS
• Android

Dependencies

• Cordova : Cordova dependencies are managed with plugman. plugman will check all dependencies and install them if they are missing.

• Capacitor : Capacitor dependencies are managed with npm. npm will check all dependencies and install them if they are missing.

Installation

Table of Contents

1. Installation in a Cordova project
2. Installation in a Capacitor project

Installation in a Cordova project

Adding the Plugin to your project

Through the Command-line Interface:

cordova plugin add com.virtuoworks.cordova-plugin-canvascamera
# Add the plugin to your platforms (Android and/or iOS)
cordova prepare

Removing the Plugin from your project

Through the Command-line Interface:

cordova plugin remove com.virtuoworks.cordova-plugin-canvascamera

Installation in a Capacitor project

Adding the Plugin to your project

Through the Command-line Interface:

npm install com.virtuoworks.cordova-plugin-canvascamera
# Build the Angular project using the plugin
npm run build
# Add the plugin to your platforms (Android and/or iOS)
npx cap sync

Removing the Plugin from your project

Through the Command-line Interface:

npm remove com.virtuoworks.cordova-plugin-canvascamera
# Remove the plugin from your platforms (Android and/or iOS)
npx cap sync

Using the plugin (JavaScript)

The plugin creates the object window.plugin.CanvasCamera with the following methods:

Plugin initialization

The plugin and its methods are not available before the deviceready event has been fired. Call initialize with a reference to the canvas object used to preview the video and a second, optional, reference to a thumbnail canvas.

document.addEventListener(
  'deviceready',
  function () {
    // Call the initialize() function with canvas element reference
    var objCanvas = document.getElementById('canvas');
    window.plugin.CanvasCamera.initialize(objCanvas);
    // window.plugin.CanvasCamera is now available
  },
  false
);

start

Start capturing video as images from camera to preview camera on web page. capture callback function will be called with image data (image file url) each time the plugin takes an image for a frame.

window.plugin.CanvasCamera.start(options);

This function starts a video capturing session, then the plugin takes each frame as a JPEG image and gives its url to web page calling the capture callback function with the image url(s). The capture callback function will draw the image inside a canvas element to display the video.

Example

var options = {
  cameraFacing: 'front',
};
window.plugin.CanvasCamera.start(options);

flashMode

Set flash mode for camera.

window.plugin.CanvasCamera.flashMode(true);

cameraPosition

Change input camera to 'front' or 'back' camera.

window.plugin.CanvasCamera.cameraPosition('front');

Options

Optional parameters to customize the settings.

{
    width: 352,
    height: 288,
    canvas: {
      width: 352,
      height: 288
    },
    capture: {
      width: 352,
      height: 288
    },
    fps: 30,
    use: 'file',
    flashMode: false,
    thumbnailRatio: 1/6,
    cameraFacing: 'front', // or 'back'
    onBeforeDraw: function(frame){
      // do something before drawing a frame
      // frame.image; // HTMLImageElement
      // frame.element; // HTMLCanvasElement
    },
    onAfterDraw: function(frame){
      // do something after drawing a frame
      // frame.image.src; // file path or base64 data URI
      // frame.element.toDataURL(); // requested base64 data URI
    }
}

• width : Number, optional, default : 352, width in pixels of the video to capture and the output canvas width in pixels.

• height : Number, optional, default : 288, height in pixels of the video to capture and the output canvas height in pixels.

• capture.width : Number, optional, default : 352, width in pixels of the video to capture.

• capture.height : Number, optional, default : 288, height in pixels of the video to capture.

• canvas.width : Number, optional, default : 352, output canvas width in pixels.

• canvas.height : Number, optional, default : 288, output canvas height in pixels.

• fps : Number, optional, default : 30, desired number of frames per second.

• cameraFacing : String, optional, default : 'front', 'front' or 'back'.

• flashMode : Boolean, optional, default : false, a boolean to set flash mode on/off.

• thumbnailRatio : Number, optional, default : 1/6, a ratio used to scale down the thumbnail.

• use : String, optional, default : file, file to use files for rendering (lower CPU / higher storage) or data to use base64 jpg data for rendering (higher cpu / lower storage).

• onBeforeDraw : Function, optional, default : null, callback executed before a frame has been drawn. frame contains the canvas element, the image element, the tracking data, ...

• onAfterDraw : Function, optional, default : null, callback executed after a frame has been drawn. frame contains the canvas element, the image element, the tracking data, ...

Usage

Full size video only

let fullsizeCanvasElement = document.getElementById('fullsize-canvas');

CanvasCamera.initialize(fullsizeCanvasElement);

let options: CanvasCamera.CanvasCameraOptions = {
  cameraFacing: 'back',
  onAfterDraw: function (frame) {
    // do something with each frame
    // frame.image.src; // file path or base64 data URI
    // frame.element.toDataURL(); // requested base64 data URI
  },
};

CanvasCamera.start(options);

With thumbnail video

let fullsizeCanvasElement = document.getElementById('fullsize-canvas');
let thumbnailCanvasElement = document.getElementById('thumbnail-canvas');

CanvasCamera.initialize(fullsizeCanvasElement, thumbnailCanvasElement);

let options: CanvasCamera.CanvasCameraOptions = {
  cameraFacing: 'front',
  fps: 15,
  thumbnailRatio: 1 / 6,
  onAfterDraw: function (frame) {
    // do something with each frame of the fullsize canvas element only
    // frame.image.src; // file path or base64 data URI
    // frame.element.toDataURL(); // requested base64 data URI
  },
};

CanvasCamera.start(options);

Using the plugin (TypeScript)

TypeScript/Angular ≥ 2 support

CanvasCamera plugin ≥1.2.1 (current, typescript version)

The plugin was entirely re-written in typescript and the type definition file CanvasCamera.d.ts included in the plugin.

For exemple, in your typescript file :

import { CanvasCameraUserOptions } from 'com.virtuoworks.cordova-plugin-canvascamera';

To import the type for the options object.

CanvasCamera plugin ≤1.2.0 (prior to typescript version)

The CanvasCamera 1.2.0 plugin type definition has been added to the DefinitelyTyped repository (see commit here) thanks to a benevolent contributor.

If you wish to install the type definition file :

npm install --save @types/cordova-plugin-canvascamera

You can check this NPM page for more informations about this type definition.

The plugin creates the object window.plugin.CanvasCamera with the following methods:

Important :

This TypeScript documentation is intended for CanvasCamera ≥1.2.1 with the provided CanvasCamera.d.ts.

The CanvasCamera ≥1.2.1 plugin might not be compatible with the definitely typed CanvasCamera type definition.

The plugin creates a global CanvasCamera variable. Importing any type from com.virtuoworks.cordova-plugin-canvascamera augments the global namespace with this new variable.

No need to import CanvasCamera type from the plugin to use its implementation.

From now on, we assume that we are in an Angular component

Plugin options

Optional parameters to customize the settings.

import { Component, AfterViewInit } from '@angular/core';
import {
    CanvasCameraUserOptions,
    CanvasCameraUseImageAs,
    CanvasCameraCameraFacing,
    CanvasCameraFrame
} from 'com.virtuoworks.cordova-plugin-canvascamera';

// ...
export class SomeAngularComponent implements AfterViewInit {

  // ...

  private use: CanvasCameraUseImageAs = 'file';
  private position: CanvasCameraCameraFacing = 'back';

  private options: CanvasCameraUserOptions = {
    width: 320,
    height: 240,
    canvas: {
      width: 320,
      height: 240,
    },
    capture: {
      width: 320,
      height: 240,
    },
    use: use,
    fps: 30,
    flashMode: this.flash,
    hasThumbnail: true,
    thumbnailRatio: 1 / 6,
    cameraFacing: this.position,
    onBeforeDraw: <CanvasCameraFrame>(frame) => {
      // do something before drawing a frame
      // frame.image; // HTMLImageElement
      // frame.element; // HTMLCanvasElement
    },
    onAfterDraw: <CanvasCameraFrame>(frame) =>{
      // do something after drawing a frame
      // frame.image.src; // file path or base64 data URI
      // frame.element.toDataURL(); // requested base64 data URI
    }
  };

  //...

}

• width : Number, optional, default : 352, width in pixels of the video to capture and the output canvas width in pixels.

• height : Number, optional, default : 288, height in pixels of the video to capture and the output canvas height in pixels.

• capture.width : Number, optional, default : 352, width in pixels of the video to capture.

• capture.height : Number, optional, default : 288, height in pixels of the video to capture.

• canvas.width : Number, optional, default : 352, output canvas width in pixels.

• canvas.height : Number, optional, default : 288, output canvas height in pixels.

• fps : Number, optional, default : 30, desired number of frames per second.

• cameraFacing : String, optional, default : 'front', 'front' or 'back'.

• flashMode : Boolean, optional, default : false, a boolean to set flash mode on/off.

• thumbnailRatio : Number, optional, default : 1/6, a ratio used to scale down the thumbnail.

• use : String, optional, default : file, file to use files for rendering (lower CPU / higher storage) or data to use base64 jpg data for rendering (higher cpu / lower storage).

• onBeforeDraw : Function, optional, default : null, callback executed before a frame has been drawn. frame contains the canvas element, the image element, the tracking data, ...

• onAfterDraw : Function, optional, default : null, callback executed after a frame has been drawn. frame contains the canvas element, the image element, ...

Plugin initialization

Call initialize with a reference to the canvas object used to preview the video and a second, optional, referencing a thumbnail canvas.

import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
import {
    CanvasCameraUserOptions,
    CanvasCameraUseImageAs,
    CanvasCameraCameraFacing,
    CanvasCameraFrame
} from 'com.virtuoworks.cordova-plugin-canvascamera';

// ...
export class SomeAngularComponent implements AfterViewInit {

  // ...

  // Referencing a template HTMLCanvasElement (<canvas #fullsize/>)
  @ViewChild('fullsize') fullsizeCanvas: ElementRef;
  // (Optional) Referencing a template HTMLCanvasElement (<canvas #thumbnail/>)
  @ViewChild('thumbnail') thumbnailCanvas: ElementRef;

  ngAfterViewInit() {
    CanvasCamera.initialize({
      fullsize: this.fullsizeCanvas.nativeElement,
      thumbnail: this.thumbnailCanvas.nativeElement, // optional
    });
  }

  // ...

}

start

Start capturing video as images from camera to preview camera on web page. capture callback function will be called with image data (image file url) each time the plugin takes an image for a frame.

import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
import {
    CanvasCameraUserOptions,
    CanvasCameraUseImageAs,
    CanvasCameraCameraFacing,
    CanvasCameraFrame
} from 'com.virtuoworks.cordova-plugin-canvascamera';

// ...
export class SomeAngularComponent implements AfterViewInit {

  private options: CanvasCameraUserOptions = {}

  // ...

  start() {
    if (CanvasCamera) {
      CanvasCamera.start(
        this.options,
        (error) => {
          console.log('[CanvasCamera start]', 'error', error);
        },
        (data) => {
          console.log('[CanvasCamera start]', 'data', data);
        }
      );
    }
  }

  // ...

}

This function starts a video capturing session, then the plugin takes each frame as a JPEG image and gives its url to web page calling the capture callback function with the image url(s). The capture callback function will draw the image inside a canvas element to display the video.

flashMode

Set flash mode for camera.

import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
import {
    CanvasCameraUserOptions,
    CanvasCameraUseImageAs,
    CanvasCameraCameraFacing,
    CanvasCameraFrame
} from 'com.virtuoworks.cordova-plugin-canvascamera';

// ...
export class SomeAngularComponent implements AfterViewInit {

  private flash = true;

  // ...

  flashMode() {
    if (CanvasCamera) {
      CanvasCamera.flashMode(
        this.flash,
        (error) => {
          console.log('[CanvasCamera start]', 'error', error);
        },
        (data) => {
          console.log('[CanvasCamera start]', 'data', data);
        }
      );
    }
  }

  // ...

}

cameraPosition

Change input camera to 'front' or 'back' camera.

import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
import {
    CanvasCameraUserOptions,
    CanvasCameraUseImageAs,
    CanvasCameraCameraFacing,
    CanvasCameraFrame
} from 'com.virtuoworks.cordova-plugin-canvascamera';

// ...
export class SomeAngularComponent implements AfterViewInit {

  private position: CanvasCameraCameraFacing = 'back';

  // ...

  cameraPosition() {
    if (CanvasCamera) {
      CanvasCamera.cameraPosition(
        this.position,
        (error) => {
          console.log('[CanvasCamera cameraPosition]', error);
        },
        (data: CanvasCameraData) => {
          console.log('[CanvasCamera cameraPosition]', 'data', data);
        }
      );
    }
  }

  // ...

}

Contributing

1. Fork it
2. Install development dependencies with npm i
3. Create your feature branch (git checkout -b my-new-feature)
4. src/browser/src/CanvasCamera.ts is the source typescript file
5. npm run build or npm run watch to build a new www/CanvasCamera.js output file
6. Commit your changes (git commit -am 'Added some feature')
7. Push to the branch (git push origin my-new-feature)
8. Create new Pull Request

License

This software is released under the MIT License.