5

As far as I can tell the Phonegap API has a couple of options to for capturing a picture, but they all 'launch' the phones camera and then return to the app with the path to the captured image.

Is it possible to display the camera stream in a control on a page in an app so the image is captured 'within the app'? E.g. like Instagram, the user is not taken out of the app to capture the image i.e I require custom camera to be opened in a part of my current application page only.

If this is accomplished with a plugin, is there an existing third party plugin for Custom Camera or would I need to write this myself?

I REALLY like the whole idea of Phonegap, especially with Phonegap Build (awesome) but if I can't get this kind of functionality I'm going to have to go native :-(

Thanks in advance!

Ekta Jayswal
  • 245
  • 3
  • 13
wallismark
  • 1,766
  • 2
  • 21
  • 35
  • 1
    possible duplicate of [Showing camera view inside html in android and then snap a picture](http://stackoverflow.com/questions/14176334/showing-camera-view-inside-html-in-android-and-then-snap-a-picture) – givanse Jun 29 '14 at 01:32

2 Answers2

7

I needed the same 'live camera view' for my augmented reality (AR) application. Phonegap does indeed not offer a live camera view yet. Therefore, I am using a Wikitude plugin for Phonegap.

Although Wikitude is an AR SDK, the basic functionality it offers is that exact camera live view.

How it works? You define a 'world', which is a basic HTML page. Once loaded, the background of this webpage will be your camera live view. In this webpage, you can still run PhoneGap Javascript code. You can call this 'world' whenever you want from your PhoneGap code.

Where to start You can get the PhoneGap plugin from https://github.com/Wikitude/wikitude-phonegap. Setup instructions and example projects are included. There is an unlimited trial of the Wikitude SDK available, you will need that as well.

Caroline
  • 920
  • 2
  • 8
  • 25
  • Looks like a great suggestion, thanks Caroline...I'll mark it as the accepted answer as soon as I've had a chance to sit down and see if it works for me :-) – wallismark May 07 '13 at 02:50
1

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. You can also draw Grid lines on camera preview.

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 in your project using PhoneGap Build..So without using CLI you can directly use it by adding this:

<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.

Ekta Jayswal
  • 245
  • 3
  • 13
  • 1
    donaldp24/CanvasCamera is no longer maintained and currently fails build with the latest Cordova version. –  May 30 '17 at 16:33