Have ideas to improve npm?Join in the discussion! »

    com.virtuoworks.cordova-plugin-canvascamera

    1.2.0 • Public • Published

    NPM Version NPM Downloads Codacy Badge

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

    Working Demo

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

    Supported Platforms

    • iOS
    • Android

    Dependencies

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

    Installation

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

    Adding the Plugin to your project

    Through the Command-line Interface:

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

    Removing the Plugin from your project

    Through the Command-line Interface:

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

    TypeScript/Angular 2 support

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

    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);

    Contributing

    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

    License

    This software is released under the MIT License.

    Install

    npm i com.virtuoworks.cordova-plugin-canvascamera

    DownloadsWeekly Downloads

    45

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    148 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar
    • avatar