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.

Having trouble using CanvasCamera Plugin ? Check our working demo here.

• iOS
• Android

Cordova will check all dependencies and install them if they are missing.

The plugin can either be installed into the local development environment or cloud based through PhoneGap Build.

Through the Command-line Interface:

cordova plugin add https://github.com/VirtuoWorks/CanvasCameraPlugin.git && cordova prepare

Through the Command-line Interface:

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

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

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

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

Set flash mode for camera.

window.plugin.CanvasCamera.flashMode(true);

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

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

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
    },
    onAfterDraw: function(frame){
      // do something after drawing a frame
    }
}

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

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

CanvasCamera.initialize(fullsizeCanvasElement);

let options:CanvasCamera.CanvasCameraOptions = {
    cameraPosition: 'back',
    onAfterDraw: function(frame) {
      // do something with each frame
    }
};

CanvasCamera.start(options);

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

CanvasCamera.initialize(fullsizeCanvasElement, thumbnailCanvasElement);

let options:CanvasCamera.CanvasCameraOptions = {
    cameraPosition: 'front',
    fps: 15,
    thumbnailRatio: 1/6,
    onAfterDraw: function(frame) {
      // do something with each frame of the fullsize canvas element only
    }
};

CanvasCamera.start(options);

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Added some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

This software is released under the MIT License.