• x - Defaults to 0
• y - Defaults to 0
• width - Defaults to window.screen.width
• height - Defaults to window.screen.height
• camera - Options are 'front' and 'rear' - Defaults to 'rear'
• toBack - Defaults to false - Set to true if you want your html in front of your preview
• tapPhoto - Defaults to true - Does not work if toBack is set to false in which case you use the takePicture method
• previewDrag - Defaults to true - Does not work if toBack is set to false

1CameraPreview.startCamera({x: 0, y: 0, width: window.screen.width, height: window.screen.height, camera: "front", toBack: false, tapPhoto: true, previewDrag: false});

When setting the toBack to true, remember to add the style below on your app's HTML or body element:

1html, body {
2  background-color: transparent;
3}

stopCamera([successCallback, errorCallback])

Stops the camera preview instance.

1CameraPreview.stopCamera();

switchCamera([successCallback, errorCallback])

Switch between the rear camera and front camera, if available.

1CameraPreview.switchCamera();

show([successCallback, errorCallback])

Show the camera preview box.

1CameraPreview.show();

hide([successCallback, errorCallback])

Hide the camera preview box.

1CameraPreview.hide();

takePicture(options, successCallback, [errorCallback])

Take the picture. It defaults to max supported picture resolution if no width or height specified. If width and height are specified, it will choose a supported photo size that is closest to width and height specified and has closest aspect ratio to the preview. The argument quality defaults to 85 and specifies the quality/compression value: 0=max compression, 100=max quality.

1CameraPreview.takePicture({width:640, height:640, quality: 85}, function(base64PictureData){
2  /*
3    base64PictureData is base64 encoded jpeg image. Use this data to store to a file or upload.
4    Its up to the you to figure out the best way to save it to disk or whatever for your application.
5  */
6
7  // One simple example is if you are going to use it inside an HTML img src attribute then you would do the following:
8  imageSrcData = 'data:image/jpeg;base64,' +base64PictureData;
9  $('img#my-img').attr('src', imageSrcData);
10});
11
12// OR if you want to use the default options.
13
14CameraPreview.takePicture(function(base64PictureData){
15  /* code here */
16});

setFlashMode(flashMode, [successCallback, errorCallback])

Set the flash mode. Available flash modes are off, on, auto, torch. Torch mode is currently Android only

1CameraPreview.setFlashMode('ON');

setColorEffect(colorEffect, [successCallback, errorCallback])

Set the color effect.
iOS Effects: none, mono, negative, posterize, sepia.
Android Effects: none, mono, negative, posterize, sepia, aqua, blackboard, solarize, whiteboard

1CameraPreview.setColorEffect('sepia');

setZoom(zoomMultiplier, [successCallback, errorCallback])

Set the zoom level. zoomMultipler option accepts an integer. Zoom level is initially at 1

1CameraPreview.setZoom(2);

setPreviewSize([dimensions, successCallback, errorCallback])

Change the size of the preview window.

1CameraPreview.setPreviewSize({width: window.screen.width, height: window.screen.height});

getSupportedPictureSizes(cb, [errorCallback])

1CameraPreview.getSupportedPictureSizes(function(dimensions){
2  // note that the portrait version, width and height swapped, of these dimensions are also supported
3  dimensions.forEach(function(dimension) {
4    console.log(dimension.width + 'x' + dimension.height);
5  });
6});

IOS Quirks

It is not possible to use your computers webcam during testing in the simulator, you must device test.

Sample App

cordova-plugin-camera-preview-sample-app for a complete working Cordova example for Android and iOS platforms.

Screenshots

Credits

Maintained by Weston Ganger - @westonganger

Created by Marcel Barbosa Pinto @mbppower