cordova-plugin-camera-preview/cordova-plugin-camera-preview

Cordova plugin that allows camera interaction from HTML code

Cordova Plugin Camera Preview

Cordova plugin that allows camera interaction from Javascript and HTML

Releases are being kept up to date when appropriate. However, this plugin is under constant development. As such it is recommended to use master to always have the latest fixes & features.

PR's are greatly appreciated.

Features

• Start a camera preview from HTML code
• Take Photos and Snapshots
• Maintain HTML interactivity
• Drag the preview box
• Set camera color effect
• Send the preview box to back of the HTML content
• Set a custom position for the camera preview box
• Set a custom size for the preview box
• Set a custom alpha for the preview box
• Set the focus mode, zoom, color effects, exposure mode, white balance mode and exposure compensation
• Tap to focus
• Record Videos

Installation

Use any one of the installation methods listed below depending on which framework you use.

To install the master version with latest fixes and features

cordova plugin add https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git

ionic cordova plugin add https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git

meteor add cordova:cordova-plugin-camera-preview@https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git#[latest_commit_id]

<plugin spec="https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git" source="git" />

or if you want to use the last released version on npm

cordova plugin add cordova-plugin-camera-preview

ionic cordova plugin add cordova-plugin-camera-preview

meteor add cordova:[email protected]

<gap:plugin name="cordova-plugin-camera-preview" />

iOS Quirks

1. It is not possible to use your computers webcam during testing in the simulator, you must device test.
2. If you are developing for iOS 10+ you must also add the following to your config.xml

<config-file platform="ios" target="*-Info.plist" parent="NSCameraUsageDescription" overwrite="true">
  <string>Allow the app to use your camera</string>
</config-file>

<!-- or for Phonegap -->

<gap:config-file platform="ios" target="*-Info.plist" parent="NSCameraUsageDescription" overwrite="true">
  <string>Allow the app to use your camera</string>
</gap:config-file>

Android Quirks

1. When using the plugin for older devices, the camera preview will take the focus inside the app once initialized. In order to prevent the app from closing when a user presses the back button, the event for the camera view is disabled. If you still want the user to navigate, you can add a listener for the back event for the preview (see onBackButton)

Methods

startCamera(options, [successCallback, errorCallback])

Starts the camera preview instance.

Options: All options stated are optional and will default to values here

• x - Defaults to 0
• y - Defaults to 0
• width - Defaults to window.screen.width
• height - Defaults to window.screen.height
• camera - See CAMERA_DIRECTION - Defaults to front camera
• 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
• tapFocus - Defaults to false - Allows the user to tap to focus, when the view is in the foreground
• previewDrag - Defaults to false - Does not work if toBack is set to false
• storeToFile - Defaults to false - Capture images to a file and return back the file path instead of returning base64 encoded data.
• disableExifHeaderStripping - Defaults to false - Android Only - Disable automatic rotation of the image, and let the browser deal with it (keep reading on how to achieve it)

let options = {
  x: 0,
  y: 0,
  width: window.screen.width,
  height: window.screen.height,
  camera: CameraPreview.CAMERA_DIRECTION.BACK,
  toBack: false,
  tapPhoto: true,
  tapFocus: false,
  previewDrag: false,
  storeToFile: false,
  disableExifHeaderStripping: false
};

CameraPreview.startCamera(options);

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

html, body, .ion-app, .ion-content {
  background-color: transparent;
}

When both tapFocus and tapPhoto are true, the camera will focus, and take a picture as soon as the camera is done focusing.

If you capture large images in Android you may notice that performace is poor, in those cases you can set disableExifHeaderStripping to true and instead just add some extra Javascript/HTML to get a proper display of your captured images without risking your application speed.

When capturing large images you may want them to be stored into a file instead of having them base64 encoded, as enconding at least on Android is very expensive. With the feature storeToFile enabled the plugin will capture the image into a temporary file inside the application temporary cache (the same place where Cordova will extract your assets). This method is better used with disableExifHeaderStripping to get the best possible performance.

stopCamera([successCallback, errorCallback])

Stops the camera preview instance.

CameraPreview.stopCamera();

switchCamera([successCallback, errorCallback])

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

CameraPreview.switchCamera();

show([successCallback, errorCallback])

Show the camera preview box.

CameraPreview.show();

hide([successCallback, errorCallback])

Hide the camera preview box.

CameraPreview.hide();

takePicture(options, successCallback, [errorCallback])

Take the picture. If width and height are not specified or are 0 it will use the defaults. 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.

CameraPreview.takePicture({width:640, height:640, quality: 85}, function(base64PictureData|filePath) {
  /*
    if the storeToFile option is false (the default), then base64PictureData is returned.
    base64PictureData is base64 encoded jpeg image. Use this data to store to a file or upload.
    Its up to the you to figure out the best way to save it to disk or whatever for your application.
  */

  /*
    if the storeToFile option is set to true, then a filePath is returned. Note that the file
    is stored in temporary storage, so you should move it to a permanent location if you
    don't want the OS to remove it arbitrarily.
  */

  // One simple example is if you are going to use it inside an HTML img src attribute then you would do the following:
  imageSrcData = 'data:image/jpeg;base64,' + base64PictureData;
  $('img#my-img').attr('src', imageSrcData);
});

// OR if you want to use the default options.

CameraPreview.takePicture(function(base64PictureData){
  /* code here */
});

takeSnapshot(options, successCallback, [errorCallback])

Take snapshot of the camera preview. The resulting image will be the same size as specified in startCamera options. The argument quality defaults to 85 and specifies the quality/compression value: 0=max compression, 100=max quality.

CameraPreview.takeSnapshot({quality: 85}, function(base64PictureData){
  /*
    base64PictureData is base64 encoded jpeg image. Use this data to store to a file or upload.
  */

  // One simple example is if you are going to use it inside an HTML img src attribute then you would do the following:
  imageSrcData = 'data:image/jpeg;base64,' +base64PictureData;
  $('img#my-img').attr('src', imageSrcData);
});

getSupportedFocusModes(cb, [errorCallback])

Get focus modes supported by the camera device currently started. Returns an array containing supported focus modes. See FOCUS_MODE for possible values that can be returned.

CameraPreview.getSupportedFocusModes(function(focusModes){
  focusModes.forEach(function(focusMode) {
    console.log(focusMode + ', ');
  });
});

setFocusMode(focusMode, [successCallback, errorCallback])

Set the focus mode for the camera device currently started.

• focusMode - FOCUS_MODE

CameraPreview.setFocusMode(CameraPreview.FOCUS_MODE.CONTINUOUS_PICTURE);

getFocusMode(cb, [errorCallback])

Get the focus mode for the camera device currently started. Returns a string representing the current focus mode.See FOCUS_MODE for possible values that can be returned.

CameraPreview.getFocusMode(function(currentFocusMode){
  console.log(currentFocusMode);
});

getSupportedFlashModes(cb, [errorCallback])

Get the flash modes supported by the camera device currently started. Returns an array containing supported flash modes. See FLASH_MODE for possible values that can be returned

CameraPreview.getSupportedFlashModes(function(flashModes){
  flashModes.forEach(function(flashMode) {
    console.log(flashMode + ', ');
  });
});

setFlashMode(flashMode, [successCallback, errorCallback])

Set the flash mode. See FLASH_MODE for details about the possible values for flashMode.

CameraPreview.setFlashMode(CameraPreview.FLASH_MODE.ON);

getFlashMode(cb, [errorCallback])

Get the flash mode for the camera device currently started. Returns a string representing the current flash mode.See FLASH_MODE for possible values that can be returned

CameraPreview.getFlashMode(function(currentFlashMode){
  console.log(currentFlashMode);
});

getHorizontalFOV(cb, [errorCallback])

Get the Horizontal FOV for the camera device currently started. Returns a string of a float that is the FOV of the camera in Degrees.

CameraPreview.getHorizontalFOV(function(getHorizontalFOV){
  console.log(getHorizontalFOV);
});

getSupportedColorEffects(cb, [errorCallback])

Currently this feature is for Android only. A PR for iOS support would be happily accepted

Get color modes supported by the camera device currently started. Returns an array containing supported color effects (strings). See COLOR_EFFECT for possible values that can be returned.

CameraPreview.getSupportedColorEffects(function(colorEffects){
  colorEffects.forEach(function(color) {
    console.log(color + ', ');
  });
});

setColorEffect(colorEffect, [successCallback, errorCallback])

Set the color effect. See COLOR_EFFECT for details about the possible values for colorEffect.

CameraPreview.setColorEffect(CameraPreview.COLOR_EFFECT.NEGATIVE);

setZoom(zoomMultiplier, [successCallback, errorCallback])

Set the zoom level for the camera device currently started. zoomMultipler option accepts an integer. Zoom level is initially at 1

CameraPreview.setZoom(2);

getZoom(cb, [errorCallback])

Get the current zoom level for the camera device currently started. Returns an integer representing the current zoom level.

CameraPreview.getZoom(function(currentZoom){
  console.log(currentZoom);
});

getMaxZoom(cb, [errorCallback])

Get the maximum zoom level for the camera device currently started. Returns an integer representing the manimum zoom level.

CameraPreview.getMaxZoom(function(maxZoom){
  console.log(maxZoom);
});

getSupportedWhiteBalanceModes(cb, [errorCallback])

Returns an array with supported white balance modes for the camera device currently started. See WHITE_BALANCE_MODE for details about the possible values returned.

CameraPreview.getSupportedWhiteBalanceModes(function(whiteBalanceModes){
  console.log(whiteBalanceModes);
});

getWhiteBalanceMode(cb, [errorCallback])

Get the curent white balance mode of the camera device currently started. See WHITE_BALANCE_MODE for details about the possible values returned.

CameraPreview.getWhiteBalanceMode(function(whiteBalanceMode){
  console.log(whiteBalanceMode);
});

setWhiteBalanceMode(whiteBalanceMode, [successCallback, errorCallback])

Set the white balance mode for the camera device currently started. See WHITE_BALANCE_MODE for details about the possible values for whiteBalanceMode.

CameraPreview.setWhiteBalanceMode(CameraPreview.WHITE_BALANCE_MODE.CLOUDY_DAYLIGHT);

getExposureModes(cb, [errorCallback])

Returns an array with supported exposure modes for the camera device currently started. See EXPOSURE_MODE for details about the possible values returned.

CameraPreview.getExposureModes(function(exposureModes){
  console.log(exposureModes);
});

getExposureMode(cb, [errorCallback])

Get the curent exposure mode of the camera device currently started. See EXPOSURE_MODE for details about the possible values returned.

CameraPreview.getExposureMode(function(exposureMode){
  console.log(exposureMode);
});

setExposureMode(exposureMode, [successCallback, errorCallback])

Set the exposure mode for the camera device currently started. See EXPOSURE_MODE for details about the possible values for exposureMode.

CameraPreview.setExposureMode(CameraPreview.EXPOSURE_MODE.CONTINUOUS);

getExposureCompensationRange(cb, [errorCallback])

Get the minimum and maximum exposure compensation for the camera device currently started. Returns an object containing min and max integers.

CameraPreview.getExposureCompensationRange(function(expoxureRange){
  console.log("min: " + exposureRange.min);
  console.log("max: " + exposureRange.max);
});

getExposureCompensation(cb, [errorCallback])

Get the current exposure compensation for the camera device currently started. Returns an integer representing the current exposure compensation.

CameraPreview.getExposureCompensation(function(expoxureCompensation){
  console.log(exposureCompensation);
});

setExposureCompensation(exposureCompensation, [successCallback, errorCallback])

Set the exposure compensation for the camera device currently started. exposureCompensation accepts an integer. if exposureCompensation is lesser than the minimum exposure compensation, it is set to the minimum. if exposureCompensation is greater than the maximum exposure compensation, it is set to the maximum. (see getExposureCompensationRange() to get the minumum an maximum exposure compensation).

CameraPreview.setExposureCompensation(-2);
CameraPreview.setExposureCompensation(3);

setPreviewSize([dimensions, successCallback, errorCallback])

Change the size of the preview window.

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

getSupportedPictureSizes(cb, [errorCallback])

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

getCameraCharacteristics(cb, [errorCallback])

Currently this feature is for Android only. A PR for iOS support would be happily accepted

Get the characteristics of all available cameras. Returns a JSON object representing the characteristics of all available cameras.

CameraPreview.getCameraCharacteristics(function(characteristics){
  console.log(characteristics);
});

Example Characteristics:

{
  "CAMERA_CHARACTERISTICS": [
    {
      "INFO_SUPPORTED_HARDWARE_LEVEL": 1,
      "LENS_FACING": 1,
      "SENSOR_INFO_PHYSICAL_SIZE_WIDTH": 5.644999980926514,
      "SENSOR_INFO_PHYSICAL_SIZE_HEIGHT": 4.434999942779541,
      "SENSOR_INFO_PIXEL_ARRAY_SIZE_WIDTH": 4032,
      "SENSOR_INFO_PIXEL_ARRAY_SIZE_HEIGHT": 3024,
      "LENS_INFO_AVAILABLE_FOCAL_LENGTHS": [
        {
          "FOCAL_LENGTH": 4.199999809265137
        }
      ]
    },

    {
      "INFO_SUPPORTED_HARDWARE_LEVEL": 0,
      "LENS_FACING": 0,
      "SENSOR_INFO_PHYSICAL_SIZE_WIDTH": 3.494999885559082,
      "SENSOR_INFO_PHYSICAL_SIZE_HEIGHT": 2.625999927520752,
      "SENSOR_INFO_PIXEL_ARRAY_SIZE_WIDTH": 2608,
      "SENSOR_INFO_PIXEL_ARRAY_SIZE_HEIGHT": 1960,
      "LENS_INFO_AVAILABLE_FOCAL_LENGTHS": [
        {
          "FOCAL_LENGTH": 2.0999999046325684
        }
      ]
    }
  ]
}

tapToFocus(xPoint, yPoint, [successCallback, errorCallback])

Set specific focus point. Note, this assumes the camera is full-screen.

let xPoint = event.x;
let yPoint = event.y
CameraPreview.tapToFocus(xPoint, yPoint);

onBackButton(successCallback, [errorCallback])

Callback event for the back button tap

CameraPreview.onBackButton(function() {
  console.log('Back button pushed');
});

getBlob(url, [successCallback, errorCallback])

When working with local files you may want to display those on certain containers like canvas, given that file:// is not always a valid url type, you need to first convert it explicitly to a blob, before you push it further into the display side. The function getBlob will do the proper conversion for you, and if succedeed will pass the content on it's callback function as first argument.

function displayImage(content) {
  var ctx = $("canvas").getContext('2d');

  img.onload = function(){
    ctx.drawImage(img, 0, 0)
  }

  img.src = URL.createObjectURL(blob);
}

function takePicture() {
  CameraPreview.takePicture({width: app.dimension.width, height: app.dimension.height}, function(data){
    if (cordova.platformId === 'android') {
      CameraPreview.getBlob('file://' + data, function(image) {
        displayImage(image);
      });
    } else {
      displayImage('data:image/jpeg;base64,' + data);
    }
  });
}

startRecordVideo(options, cb, [errorCallback])

Currently this feature is for Android only. A PR for iOS support would be happily accepted

Start recording video to the cache.

var opts = {
  cameraDirection: CameraPreview.CAMERA_DIRECTION.BACK,
  width: (window.screen.width / 2),
  height: (window.screen.height / 2),
  quality: 60,
  withFlash: false
}

CameraPreview.startRecordVideo(opts, function(filePath){
  console.log(filePath)    
});

stopRecordVideo(cb, [errorCallback])

Currently this feature is for Android only. A PR for iOS support would be happily accepted

Stop recording video and return video file path

CameraPreview.stopRecordVideo(function(filePath) {
  console.log(filePath);
});

Settings

FOCUS_MODE

Focus mode settings:

Name	Type	Default	Note
FIXED	string	fixed
AUTO	string	auto
CONTINUOUS	string	continuous	IOS Only
CONTINUOUS_PICTURE	string	continuous-picture	Android Only
CONTINUOUS_VIDEO	string	continuous-video	Android Only
EDOF	string	edof	Android Only
INFINITY	string	infinity	Android Only
MACRO	string	macro	Android Only

FLASH_MODE

Flash mode settings:

Name	Type	Default	Note
OFF	string	off
ON	string	on
AUTO	string	auto
RED_EYE	string	red-eye	Android Only
TORCH	string	torch

CAMERA_DIRECTION

Camera direction settings:

Name	Type	Default
BACK	string	back
FRONT	string	front

COLOR_EFFECT

Color effect settings:

Name	Type	Default	Note
AQUA	string	aqua	Android Only
BLACKBOARD	string	blackboard	Android Only
MONO	string	mono
NEGATIVE	string	negative
NONE	string	none
POSTERIZE	string	posterize
SEPIA	string	sepia
SOLARIZE	string	solarize	Android Only
WHITEBOARD	string	whiteboard	Android Only

EXPOSURE_MODE

Exposure mode settings:

Name	Type	Default	Note
AUTO	string	auto	IOS Only
CONTINUOUS	string	continuous
CUSTOM	string	custom
LOCK	string	lock	IOS Only

Note: Use AUTO to allow the device automatically adjusts the exposure once and then changes the exposure mode to LOCK.

WHITE_BALANCE_MODE

White balance mode settings:

Name	Type	Default	Note
LOCK	string	lock
AUTO	string	auto
CONTINUOUS	string	continuous	IOS Only
INCANDESCENT	string	incandescent
CLOUDY_DAYLIGHT	string	cloudy-daylight
DAYLIGHT	string	daylight
FLUORESCENT	string	fluorescent
SHADE	string	shade
TWILIGHT	string	twilight
WARM_FLUORESCENT	string	warm-fluorescent

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

cordova-plugin-camera-preview's Issues

[Request] Camera in the background

Hello there,
I would like to know if it is possible to render the camera in the background. While the HTML still being rendered on top.
I am also willing to pay for this feature to be added as i need this for a project.
Jarvis

iOS CIFilter bug in iOS 8 - SDK bug

I keep getting an error: BSXPCMessage received error for message: Connection interrupted. After som time on google i found out it is caused by CIFilter.

I would like to cite: http://stackoverflow.com/questions/26065808/bsxpcmessage-received-error-for-message-connection-interrupted

XPC Services are meant to reduce crashes by isolating less stable components such as filters and plugins. This is usually not fatal and the connection will be restored by launchd restarting the service. Since this is not a long running service, but simply an operation, chances are that your image filter is not actually being applied.

How to display full viewport, instead of the zoomed in feel of the preview window

The preview shows a zoomed and cropped viewport of the camera. When you capture a picture you have access to both the full image and the one shown in the preview.

I want to be able to display the full image as the preview (as opposed to the zoomed/cropped view).

How can I do this?

feature request of multiple images taken at once

I am working on a school project were we want to do a photosession of 20 images, analyse them, delete them and then take 20 more if the first ones are not bad. We want to create a 2D FFT on the images. would it be possible to capture 20 frames in a row (within 2 seconds)?

[Question] Image outputed as a Data URI?

Would you be able to add a Data URI output option? This plugin works perfectly for my project but I'm needing to save the photos as a data uri, could this be a possible feature that can be implemented?

Thanks for this awesome plugin none the less!

Disable save to camera roll and just return a data URI

For my project I use Firebase to store my images as Data URI's. It would be great to disable save to camera roll and just return a data URI string.

Black screen on IOS 8.1.2 Ipad

When the plugin for Cordova Camera Preview is ran on IOS 8.1.2. The app will load up fine, but when the start camera function is called. The screen goes black with the camera view displayed on the screen. Please see the screenshot below.

Any idea why this is? I have used the application demo and still get the same bug.

The to-back camera preview with jQuery mobile pages ...

The to-back camera preview does not work with jQuery mobile pages.

I don't know if there is some workaround or if it is by design that it does not work.

Is this an issue or would this be an enhancement?

Thanks!

Can not install plugin with cordova

When I run command
cordova plugin add https://github.com/mbppower/CordovaCameraPreview.git

it shows an error :
Error: EXDEV, cross-device link not permitted

How to fix that, thanks

Getting ENCODING_ERR on Cordova resolveLocalFileSystemURI method of cordova in Android

I am returning ImageURI from cordova.plugins.camerapreview.setOnPictureTakenHandler(),
when it is passed in resolveLocalFileSystemURI method of cordova then it throws ENCODING_ERR (Error Code: 5) in Android.

Note: It works on iOS perfectly.

Position relative to web view

On the JS side, we don't know the height of the status bar. So it would be helpful if the X/Y coordinates of that we pass to startCamera() were treated as being relative to the web view.

For example, if you're using the status bar plugin on iOS with StatusBarOverlaysWebView=false, the web view might start 20px or 40px below the top of the screen. So you could add that to the Y coordinate of the camera preview.

Android preview image isn't masked, but only some of the time

In the Android plugin, mSurfaceView is a fixed size, and frame_camera_cont is a custom size that masks it. When you take a picture, you get the "actual" image from mSurfaceView, and the "preview" image from frame_camera_cont.

But at random times, the "preview" image contains the same image as the "actual" image, just resized to fit the custom size. I haven't been able to figure out why this happens. I can take several pictures in succession, and only some will have this problem.

Here's what it should look like (the top image is the preview):

And here's the problem:

FYI, this happens both with and without my fix in pull request #25.

It happens on the emulator and a real device, running Android 5.0.1.

Fullscreen stretched, fix on switch camera

I'm trying to start camera on device ready. Everything's ok but the preview resolution. The camera preview seems to be stretched. When I switch the camera from back to front (or from front to back) the resolution seems to be ok. How can I do to solve the problem? I tried to assign in js screen width and height to the startCamera method. Is there a way to fix this?

Unsupported Plugin in Phonegap Build !

I am developing an application in cordova/phonegap with DevExtreme. I am adding plugins in my application via Online Phonegap Build. But when I am using this plugin : add gap:plugin name="com.mbppower.camerapreview Error pop ups: Unsupported Plugin !!

If it is unsupported in that , how can I add in my application to access CamerePreview mode ? (I can't use CLI) @mbppower , or anyone please help me out. Thanks a lot in advance.

Camera does not resize with orientation change ...

The fixed nature of the camera preview size results in having to stop/start the camera after the orientation change event fires.

Is there a way to make the camera occupy the entire screen and without having to recalculate width and height and stop/start the camera?

I don't know if this is a bug, a lack of feature or limitation.

Thanks!

ANDROID:Camera doesn't focus and preview looks blurred, Captured Picture also Blured !

Many of the times Camera doesn't focus and preview looks blurred, I am working on a application which require accuracy in view/size of the dimensions of object in the captured photo.
Is there any handle for "Camera Auto Focus" and also if any options to manipulate "Exposure Value" of camera ? I have gone through code I couldn't get any handle so posting here. Any help is much appreciated. Thanks a lot in advance.

Detect when Camera Started

hi,

Is it possible to detect when the camera is ready (for taking a picture)? What I want to do is to trigger an event when the camera is ready / initialized. I am pretty new to java / js, and I know it is kinda something simple I'd need to fit in somewhere to fire the camerapreview ready.

And also is it possible to add in a picture quality parameter?

Thanks a ton,
M&M

Android camera orientation always 90 degrees clockwise

iOS is working fine, but on Android the camera preview window is always showing off by 90 degrees clockwise; eg, what the camera is picking up is wrong.

This persists even as I change between portrait and landscape.

How can I have the camera recording in the correct orientation?

There's no interesting code on my end governing this:
cordova.plugins.camerapreview.startCamera(rect, "front", tapEnabled, dragEnabled, toBack);

I haven't made any progress on this, Stripped down the camera to it's most basic and issue is still presenting; being rotated by 90 degrees all the time. The picture that's captured is correct, but the preview window is showing off. Does anyone have any ideas?

Can't compile outside of CordovaCameraPreviewApp

The plugin code doesn't seem properly factored-out from the demo app. See for instance:

import com.mbppower.CordovaCameraPreviewApp.R;

in CameraActivity.java

Issue in iOS

Hi This is a GREAT plugin.
It works great on Android,but not on iOS

Attach preview window to DOM element, instead of placed by pixels

This plugin is awesome, many thanks. I am trying to attach the preview to a dom element which is dynamically placed, and then have it move with the element as scrolling occurs or the element's position changes.

The only way I can see straight away to do this is keep an eye on the element's location and as it changes kill the preview window and add a new one at the new location; obviously this is horribad especially for scrolling.

Is there any way I can attach it to an html element so it's always stuck with it?

some issue feedback to you

I am using PGB 3.7 (build.phonegap.com)
Android 4.4.2
iOS 8.3

Android issue
[issue 1]
when I use "cordova.plugins.camerapreview.startCamera" that the prereview box will show
immediately "I use cordova.plugins.camerapreview.takePicture"，but it will crash the app
[issue 2]
when I use "cordova.plugins.camerapreview.setOnPictureTakenHandler"
but it seem no any response

ios issue
all method can't work (no any response....)

Camera freezes after phone sleeps and doesn't wake up ...

When the phone goes to sleep, by timeout or by pressing the power button, the camera freezes.

The only way out of this is to stop/start the camera.

This creates a user experience that is not seamless.

Is this a bug?

Thanks

Low quality images

The images that this plugin captures seem to be unbelievably low quality. Taking a picture with the front facing camera using this plugin vs taking the picture with the same camera and the system provided photo application produces extremely different results.

Is there something I am missing, or an attribute I may be passing that could effect this? Here is my code for actually snapping the photo:

cordova.plugins.camerapreview.takePicture({maxWidth:1600, maxHeight:1200});

(however changing the value here doesn't seem to have any effect on the resultant photo).

Return image content to JavaScript

I'd like to be able to get the image's content on the JavaScript side, instead of saving it to a file. Maybe it could be passed to the callback function as a base64-encoded string

This would let you pass it somewhere with an XMLHttpRequest, instead of saving it. And it would let you show it with a background-image property, e.g. with "data:image/png;base64,".

Thanks for the plugin, by the way...it's very helpful.

Android Preview

I've got problems with the display dimensions, for example if I set the camera with : cordova.plugins.camerapreview.startCamera({x: 0, y: 0, width: 360, height: 360}, "front", tapEnabled, dragEnabled, toBack);
The application crashes and in the logcat I have the following lines :
D/Preview (25516): previewWidth:1280 previewHeight:720
D/layout (25516): left:0
D/layout (25516): top:-745
D/layout (25516): right:1244
D/layout (25516): bottom:1465
E/SurfaceFlinger( 134): dimensions too large 1244 x 2210
E/SurfaceFlinger( 134): createNormalLayer() failed (Invalid argument)
E/SurfaceComposerClient( 444): SurfaceComposerClient::createSurface(SurfaceView) error Invalid argument
W/WindowStateAnimator( 444): OutOfResourcesException creating surface

After a little testing it appears that the crash occurs for a height > 325
(The screen.width returns 360 and the screen.height returns 592)

iOS memory usage

This is a GREAT plugin! Kudos.

I use it in a time-lapse app. Works great on Android, for hours; but on iOS, I observe that the heap continues to grow as pictures are taken, until the device is eventually out of memory. Any thoughts?

Again, a great plugin.

Initial blurry camera feed

Running the code below for the first time renders a blurry camera image feed. Pressing the square app selector on the menu bar and simply reselecting the same app the camera feed is corrected and is no longer blurry.

Tested on Android Nexus 7.2 using 5.1

var tapEnabled = true; //enable tap take picture
var dragEnabled = false; //enable preview box drag across the screen
var toBack = false; //send preview box to the back of the webview
cordova.plugins.camerapreview.startCamera({x: 0, y: 0, width: 512, height:256}, "front", tapEnabled, dragEnabled, toBack);

preview box changes dimension while taking pic

Hello,
as I wrote in the title, while I take a picture and I see the black surface with loader, that surface changes dimension increasing the width.
Is it possible to prevent this behavior ?

Is it also possible to have a transparent surface instead of black (continuing to see the images)

I had developed a similar plugin in the past but the js interface was not so good like this one,it would be amazing to me to have that features.

thanks

Enhancement: Faster Camera

Hi, I really like this plugin. But there's on thing, that bothers me.

After taking a picture, the liveview disappears, until the setOnPictureTakenHandler fires. It would be nice, if the the liveview would be still available.

My suggestion to enhance functionality (if possible): cordova.plugins.camerapreview.takePicture method will return an object containing a identifier (e.g. the timestamp), and the setOnPictureTakenHandler would contain the same identifier.

Like:

var photo = cordova.plugins.camerapreview.takePicture(obj);
//photo.timestamp == 123456789
setOnPictureTakenHandler(function(result,e){
//e.timestamp == 123456798
})

Maybe the same problem: If I'm taking photos too fast, some photos are lost between.

Store images to temp folder, not the user's album. iOS

When using the test-app on iOS it appears that all images are stored to the users photo album. This is not ideal when developing an application. If you process/move/delete the image the user is prompted for the app gaining access to the photo album.

It would be better if the images are stored to a temp location, and the developer could choose to push the photos to the album themselves if that is what they really want.

In addition, I really think that there should be some sort of way to say "I do not what the preview image". Maybe even a way to choose the preferred size?

I have little-to-none experience with native iOS dev. so I am not able to help out much right now until I have read up on some stuff, but I found a nice SO question/answer which might be of help with this: http://stackoverflow.com/questions/14531912/storing-images-locally-on-an-ios-device

Anyways, great work thus far!

2 instaces of Camera Preview

Is it possible to create a 2 instances of camera preview?

error with CordovaWebView when building project

All is ok except sending camera to back:

I get these errors
method getParent() is undefined for the type CordovaWebView
method setBackgroundColor(int) is undefined for the type CordovaWebView

I am on cordova 5.0.0, building app pour android 4.4.2 (API 19)

I've tried to cast types but this doesn't work either.
Can anyone help me to solve this problem ?

Android camera preview not showing on first app load

I open up the app and the camera preview window is not shown. If I simply minimize the app then open it again it's there like magic! I added an alert which is fired on camera.show, for some reason this does not actually happen until the second open. Any idea why?

Android width too small, image distorted/squeezed

Full screen Android images are squeezed horizontally. Using window.innerWidth and window.innerHeight, the height appears to be right, but width is too small. I've temporally fixed this by multiplying my width by 1.5, but this obviously isn't a permanent solution.

[Suggestion] Make the preview clickable

So we can take a picture on click as an example.

Cannot press buttons on IOS 8.0 when in camera preview mode.

Any button or link in the cordova application becomes unresponsive / does not work when you start the preview mode. It would also be nice feature to overlay HTML content over the camera preview mode.

Samsung S6 small view of camara

Hi, I have been using a cell samsumg S6 and when opening the camera gives me a little screen of the camera that is not respect the size you assign can help me solve it.
In the line: var rect = {x: 100, y: 100, width: 200, height: 200}; assign values to get the width and height of the screen "$ (window) .width (), $ (window) .height ()".
The measures are right but the box is very small.
We are in contact

How to get image of actual max resolution supported by phone's camera ?

I want accuracy at pixel level in captured picture resolution. How can I get the actual picture captured by phone according to its maximum Camera Angle Field Of View( CAFOV) ?
I tried to get origionalPicture the existing functionality in plugin, but it doesn't seem to give me picture of original resolution.
I am passing null argument in takePicture() method to allow camera to capture original supported resolution by device camera. But isn't giving me result as expected. Any other ways to solve it ?

How to set CameraPreview orientation according to the Device Orientation ?

I need to set CameraPreview orientation according to Device orientaion i.e. Landscape or portrait.
By default what it shows is wrong. How can I change it ?

In landscape, Android preview is in the wrong place

If I rotate an Android phone to landscape mode, and open a camera view with a width larger than 500px or so, the left and right sides of the camera view appear in the wrong places. They snap back into place when you call takePicture.

You can reproduce this on the Preview app:

• Change the onStartCamera function in index.js to pass the following size element:
  {x: 0, y: 100, width: 560, height:300}
• Add an element of the same size for reference, to index.html just after the <body> start tag:
  <div style="position:absolute; border: 1px solid red; left: 0px; top: 100px; overflow: hidden; width: 560px; height: 300px;"></div>
• Rotate the device to landscape.
• Tap Start Camera.
• The preview appears like this:
  
• If you replace 560 with 300 in the above values, the preview appears with the right size.

Tested on a Nexus 5 with Android 5.0.1.

Closing very slow

When I call stopCamera() on iOS, there's about a 10-second delay where the camera image is still visible, and the rest of the app is frozen.

In Xcode, the last log entry when it freezes is:

2015-03-05 11:39:36.886 Investor[8271:1333954] Stopping session

and the first entry after it hides the window is:

2015-03-05 11:39:45.933 Investor[8271:1333841] THREAD WARNING: ['CameraPreview'] took '9047.212891' ms. Plugin should use a background thread.

Capture image from Landscape

Hi @mbppower
It's me again. I've tried to capture image from landscape and it crops a little bit weird?
Was it suppose to be like that?

Or am I missing something?

[Bug] Issue with android crosswalk

If you are using crosswalk to speed up your android app it only works after first closing the app and then opening it again, then the preview shows.

blurry preview image under certain circumstances

Hello,
I'm getting a blurry preview image with a nexus 5 running the newest version of android. It only occurs with the initial call to startCamera and only when the default camera is set to back.
If set to front, there is no problem. Also if you navigate away for the app, then come back, the image is sharp again.

I noticed this same behavior with the demo app when I set the default camera to back.

Thanks,
Matt

iOS: maxWidth / maxHeight intrepreted as minimal values

Not completely sure this is a bug or rather my interpretation.

I take a picture with the following parameters: takePicture({maxWidth:640, maxHeight:640});
Expected result: the saved image will be at most 640 pixels width OR height, the other dimension smaller.
Actual result: the smallest dimension is 640 pixels, the other dimension bigger.
If this is not intended the fix is trivial: change the less than comparison into greater than in line 202 of CameraPreview.m like this:

            CGFloat scale = scaleHeight > scaleWidth ? scaleWidth : scaleHeight;

Cannot access clicked image on android

This is one great plugin. Thanks!

The image doesn't gets stored into the camera roll in android as it does in ios.
Cannot access the image from the returned url(result[0]) as well, on android.

Any help would be appreciated, Thanks!

Android v4.1.1 cordova.plugins.camerapreview undefined

After trying to implement the Camera Preview I ran into issues initializing the camera. Followed the documentation but could not figure out why the cordova.plugins.camerapreview was not firing anything and after deviceready executing

alert(cordova.plugins.camerapreview)

Returns undefined in the alert box

I then tried to build the app Cordova Camera Preview App and everything worked as expected after building onto my HTC running Android v5.0.5

After going through the CordovaCameraPreviewApp cordova folder structure everything was set up the same except for the following file

CordovaCameraPreviewApp

./platforms/android/cordova/version
var VERSION = "3.6.4";

MyApp

./platforms/android/cordova/version
var VERSION = "4.1.1";

Any suggestions on solving this issue I also tried to remove all plugins and reinstalling but to no avail

iOS preview has black border on top and right

The camera view on iOS has a black bar on the top and right sides. Here's an example with the demo app, with an iPhone 6 running iOS 8.1.3:

can not fine symbol : method setBackgroundColor(int)

Cordova Version: 5
Java Version : 1.8

CameraPreview.java:107: error: cannot find symbol webView.setBackgroundColor(0x00000000);

symbol: method setBackgroundColor(int)
location: variable webView of type CordovaWebView

CameraPreview.java:108: error: cannot find symbol ViewGroup g = (ViewGroup)webView.getParent();

symbol: method getParent()
location: variable webView of type CordovaWebView
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
2 errors
FAILED