phonegap camera capture in embed iframe

Question

I was desperately looking around the internet for:
How to use PhoneGap to access the device's camera and put it inside my HTML, e.g. in a frame and take a snapshot with my custom button I created in that HTML. So, not using the device's native camera interface.
Mostly they all say it isn't possible with PhoneGap.
Could someone please provide a comprehensive step-by-step tutorial on how to do it in Eclipse for Android, no matter if it is PhoneGap or some other approach.

Thank you very much

Answer 1

I found this custom plugin on github while searching for the same:

Cordova-CanvasCamera

To set install:

1. Copy CanvasCamera.h and CanvasCamera.m to Plugins directory inside your PhoneGap project.
2. Edit your config.xml and add CanvasCamera into your Plugins list.
3. Copy CanvasCamera.js into your www directory and add a script tag for it in your index.html.
4. If not already present, add the CoreVideo.framework library in the Build Phases tab of the project

The following is a sample code implementation:

Configuration for <img>:

<img id="camera" width="352" height="288" />
<script>
  CanvasCamera.capture = function(data) {
    document.getElementById('camera').src = data;
  }
</script>

Configuration for <canvas>:

<canvas id="camera" width="352" height="288"></canvas>
<script>
    var context = document.getElementById('camera').getContext("2d");
    var camImage = new Image();
    camImage.onload = function() {
      context.drawImage(camImage, 0, 0);
    };
    CanvasCamera.capture = function(data) {
      camImage.src = data;
    };
</script>

Start capture:

<script>
  document.addEventListener("deviceready", function() {
    CanvasCamera.start();
  });
</script>