Showing camera view inside html in android and then snap a picture

android ios cordova phonegap-plugins cordova-plugins
Imran Omar Bukhsh picture Imran Omar Bukhsh · Jan 5, 2013 · Viewed 20k times · Source

Is there a view of showing the live camera view inside html ( e.g. embedded in a div ) before we snap a picture using JavaScript? I have tried PhoneGap but it totally starts a new camera app and totally moves away from my html web app before returning to it. I need something embedded in my app

Thanks

Answer

Ekta Jayswal picture Ekta Jayswal · Apr 21, 2015

You can install mbppower/CordovaCameraPreview plugin (for android,ios) in your Cordova/phonegap application that allows camera interaction from HTML code. A really amazing plugin it is.. You can access Features such as:

Start a camera preview from HTML code. Drag the preview box. Set camera color effect (Android and iOS),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 and Maintain HTML interactivity.

Or you can also use donaldp24/CanvasCamera Plugin for your application if it fits to your requirements.Its supported in both android and iOS platforms. I have observed, for iOS its working fine but in android it isn't working.

Now you can install CordovaCameraPreview plugin through Online PhoneGap too. So without using CLI you can directly use it through this by adding

<gap:plugin name="com.mbppower.camerapreview" version="0.0.8" source="plugins.cordova.io" />

in your config.xml file and create ApplicationTemplate.apk/.ipa. For more information regarding this you can ask me. Happy to help.

UPDATE:10th Oct 2017 It used to work well during that time but, donaldp24/CanvasCamera is no longer maintained and currently fails build with the latest Cordova version.

Related questions

Generating iOS and Android icons in Cordova / PhoneGap

I have a freshly created Cordova project with the following config.xml setup (used the instructions from http://docs.phonegap.com/en/edge/config_ref_images.md.html). I also added 2 platforms (iOS and Android). When I run either cordova …

Read More
Phonegap - Save image from url into device photo gallery

I'm developing phonegap application and I need to save Image from url to the Device Photo Gallery. I can't find at the Phonegap Api a way for doing it and Also I didn't find phonegap plugin for that. I need …

Read More
You are not logged in. Please log in and try again

I'm using phonegap facebook connect plugin (https://github.com/Wizcorp/phonegap-facebook-plugin) for Facebook Authentication in app. It was working till today morning. Now suddenly it stops working and gives error as below for different devices iOS & Android: For Android: …

Read More