daraosn / cordova-canvascamera

PhoneGap iOS Cordova Plugin to capture Camera streaming into a HTML5 Canvas or an IMG tag.

CanvasCamera

for iOS PhoneGap / Cordova

---

Plugin to capture Camera streaming into a HTML5 Canvas or an IMG tag.

It uses AVCaptureVideoDataOutput to create a capture session. Each frame is base64 encoded and passed to the Cordova UIWebView. Please note this is mostly experimental and is slower than any native approach.

How to 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

How to Use

---

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>

Known Issues & Roadmap/TODO

---

• Capture has some delay. This could be improved using another approach instead of base64 JPEG encoding.
• Capture runs at low quality (352x288), but this can be changed using a different sessionPreset.
• Missing configuration options for fps, quality, orientation, size, formats, etc.

Author & Contributions

---

Diego Araos [email protected]

Feel free to fork & contribute!

License

---

MIT

cordova-canvascamera's Issues

Use a video format ?

Instead of doing this why not convert the camera to a video ? and then stream it to a video element on the fly ? ( Thats what probably webrtc does and probably that would be much faster )

Memory leak

For anyone using this: There's a memory leak in this plugin (you can see with the Profiler). If someone wants to address this, go for it :)

Android Support

I desperately need something like this, but I can't find anything apart from this one, and I need to support android. The native camera apps / intents are useless for me as I need to do some things exactly timed with the video start/end, limit it's length etc.