cordova-plugin-camera-preview / cordova-plugin-camera-preview Goto Github PK
View Code? Open in Web Editor NEWCordova plugin that allows camera interaction from HTML code
License: MIT License
Cordova plugin that allows camera interaction from HTML code
License: MIT License
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 ?
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
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):
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.
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?
Is it possible to create a 2 instances of camera preview?
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
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
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
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);
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)
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.
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!
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
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.
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.
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!
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.
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
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 ?
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 ?
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;
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?
So we can take a picture on click as an example.
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
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?
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?
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.
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.
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!
The plugin code doesn't seem properly factored-out from the demo app. See for instance:
import com.mbppower.CordovaCameraPreviewApp.R;
in CameraActivity.java
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)?
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.
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:
{x: 0, y: 100, width: 560, height:300}
<body>
start tag:<div style="position:absolute; border: 1px solid red; left: 0px; top: 100px; overflow: hidden; width: 560px; height: 300px;"></div>
Tested on a Nexus 5 with Android 5.0.1.
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 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!
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.
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.
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
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!
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....)
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?
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).
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?
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.
Hi This is a GREAT plugin.
It works great on Android,but not on iOS
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
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.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.