Skip to content

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

Notifications You must be signed in to change notification settings

daraosn/Cordova-CanvasCamera

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 

Repository files navigation

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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published