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
- Supported Platforms
- Dependencies
- Installation
- Using the plugin (JavaScript)
- Using the plugin (TypeScript)
- Having trouble using CanvasCamera with Cordova ? Check our working cordova (javascript) demo here.
- Having trouble using CanvasCamera with Capacitor ? Check our working capacitor (typescript) demo here.
- iOS
- Android
-
Cordova : Cordova dependencies are managed with
plugman.plugmanwill check all dependencies and install them if they are missing. -
Capacitor : Capacitor dependencies are managed with
npm.npmwill check all dependencies and install them if they are missing.
Through the Command-line Interface:
cordova plugin add com.virtuoworks.cordova-plugin-canvascamera
# Add the plugin to your platforms (Android and/or iOS)
cordova prepareThrough the Command-line Interface:
cordova plugin remove com.virtuoworks.cordova-plugin-canvascameraThrough 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 syncThrough the Command-line Interface:
npm remove com.virtuoworks.cordova-plugin-canvascamera
# Remove the plugin from your platforms (Android and/or iOS)
npx cap syncThe 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 = {
cameraFacing: '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
// 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,fileto use files for rendering (lower CPU / higher storage) ordatato use base64 jpg data for rendering (higher cpu / lower storage). -
onBeforeDraw: Function, optional, default :null, callback executed before a frame has been drawn.framecontains the canvas element, the image element, the tracking data, ... -
onAfterDraw: Function, optional, default :null, callback executed after a frame has been drawn.framecontains the canvas element, the image element, the tracking data, ...
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);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);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.
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-canvascameraYou can check this NPM page for more informations about this type definition.
The plugin creates the object window.plugin.CanvasCamera with the following methods:
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
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,fileto use files for rendering (lower CPU / higher storage) ordatato use base64 jpg data for rendering (higher cpu / lower storage). -
onBeforeDraw: Function, optional, default :null, callback executed before a frame has been drawn.framecontains the canvas element, the image element, the tracking data, ... -
onAfterDraw: Function, optional, default :null, callback executed after a frame has been drawn.framecontains the canvas element, the image element, ...
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 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.
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);
}
);
}
}
// ...
}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);
}
);
}
}
// ...
}- Fork it
- Install development dependencies with
npm i - Create your feature branch (
git checkout -b my-new-feature) src/browser/src/CanvasCamera.tsis the source typescript filenpm run buildornpm run watchto build a newwww/CanvasCamera.jsoutput file- Commit your changes (
git commit -am 'Added some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request
This software is released under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent