Appcelerator Titanium :: SquareCamera

An Appcelerator Titanium module that uses AVFoundation to allow for a much more customizable camera.

I have wanted (multiple times now) the option of being able to customize the camera size, shape, and functionality without just using the camera overlay. This lets you do that :)

NOTE: The name can be misleading, the camera does not HAVE to be a square :)

Supports

Devices

- iPhone (Tested with 3G, 3GS, 4, 4s, 5, 5c and 5s, and 6) - iPad (Tested with multiple iPads) - iPod Touch

iOS Versions

- 6.0+ (up to the latest iOS 8) - [7.0+ for 2d code detection in module version 0.7]

Titanium SDK Versions

- 3.2.0 - 3.2.1 - 3.2.3 - 3.3.X - 3.4.0 - 3.4.1 - 3.4.2 - 3.5.0.GA

Note: I am sure it works on many more versions than this, but these are just the one's I've used

Setup

Include the module in your tiapp.xml:


com.mfogg.squarecamera

Usage


var SquareCamera = require('com.mfogg.squarecamera'); // Initialize the SquareCamera module

// open a single window
var win = Ti.UI.createWindow({backgroundColor:"#eee"});

var camera_view = SquareCamera.createView({
  top: 0,
  height: 320,
  width: 320,
  detectCodes:true, // Since version 0.7 : optional boolean to activate 2d code detection. Dection fires "code" event contaning e.codeType and e.value -All codes types are supported
  backgroundColor: "#fff",
  frontQuality: SquareCamera.QUALITY_HIGH, // Optional Defaults to QUALITY_HIGH
  backQuality: SquareCamera.QUALITY_HD, // Optional Defaults to QUALITY_HD
  camera: "back" // Optional "back" or "front"
});

var label_message = Ti.UI.createLabel({
    height:Ti.UI.SIZE,
    left:10,
    right:10,
    text:'ready',
    top:330, 
});

var image_preview = Ti.UI.createImageView({
  right: 10,
  bottom: 10,
  width: 160,
  borderWidth:1,
  borderColor:'#ddd',
  height: 160,
  backgroundColor: '#444'
});

camera_view.addEventListener("success", function(e){
  image_preview.image = e.media;
});

// Since 0.7 : 2d code detection. Requires detectCodes:true on the camera view.
camera_view.addEventListener("code", function(e){
  label_message.text = e.codeType+' : '+e.value;
});

win.add(cameraView);
win.add(label_message);
win.add(image_preview);
win.open();

NOTE: The created view (ex. 'camera_view' above) can have other views added on top of it to act as a camera overlay (exactly how you would a standard Ti.UI.view)

Camera Quality

You are now able to change the quality when initializing the camera by setting frontQuality and backQuality parameters.


SquareCamera.QUALITY_LOW // AVCaptureSessionPresetLow
SquareCamera.QUALITY_MEDIUM // AVCaptureSessionPresetMedium
SquareCamera.QUALITY_HIGH // AVCaptureSessionPresetHigh
SquareCamera.QUALITY_HD // AVCaptureSessionPreset1920x1080 (Note: back camera only)

Functions

camera_view.takePhoto();

Takes the photo (and fires the "success" event)

camera_view.turnFlashOff();

Turns the flash off (and fires the "onFlashOff" event)

camera_view.turnFlashOn();

Turns the flash on (and fires the "onFlashOn" event)

camera_view.setCamera(camera);

Takes the parameters "front" or "back" to change the position of the camera (and fires the "onCameraChange" event)

camera_view.pause();

Pauses the camera feed (and fires the "onStateChange" event with the state param "paused")

camera_view.resume();

Resumes the camera feed (and fires the "onStateChange" event with the state param "resumed")

Listeners

"success"

Will fire when a picture is taken.


camera_view.addEventListener("success", function(e){

  Ti.API.info(JSON.stringify(e));

  Ti.API.info(e.media); // The actual blob data
  Ti.API.info(e.camera); // The "front" or "back" string for where the picture was taken

  image_preview.image = e.media;
});

"onFlashOn"

Will fire when the flash is turned on.


camera_view.addEventListener("onFlashOn", function(e){
  Ti.API.info("Flash Turned On");
});

"onFlashOff"

Will fire when the flash is turned off.


camera_view.addEventListener("onFlashOff", function(e){
  Ti.API.info("Flash Turned Off");
});

"onCameraChange"

Will fire when the camera is changed between front and back


camera_view.addEventListener("onCameraChange", function(e){
  // e.camera returns one of:
  //   "front" : using the front camera
  //   "back" : using the back camera
  
  Ti.API.info("Now using the "+e.camera+" camera"); // See what camera we're now using
});

"onStateChange"

Will fire when the camera itself changes states


// Event that listens for the camera to switch
camera_view.addEventListener("stateChange", function(e){
  // Camera state change event:
  //   "started" : The camera has started running!
  //   "stopped" : The camera has been stopped (and is being torn down)
  //   "paused" : You've paused the camera
  //   "resumed" : You've resumed the camera after pausing
  
  // e.state = The new state of the camera (one of the above options)
  
  Ti.API.info("Camera state changed to "+e.state);
});

"code"

Since 0.7. Fires when detectCodes:true


camera_view.addEventListener("code", function(e){
  // returns :
  //   e.value : The value.
  //   e.codeType : The 2D Code Type
  /*
  Available Code Types:
   UPCECode
   Code39Code
   Code39Mod43Code
   EAN13Code
   EAN8Code
   Code93Code
   Code128Code
   PDF417Code
   QRCode
   AztecCode
   Interleaved2of5Code
   ITF14Code
   DataMatrixCode
  */
  
  // TODO: set code types option on creation.
  
  Ti.API.info("2D code detected : "+e.codeType+' : '+e.value);

});

Known Issues and Future Improvements

Android support

... anything else :)

Please let me know if you'd like any additions or something isn't working!

License

Do whatever you want, however you want, whenever you want. And if you find a problem on your way, let me know so I can fix it for my own apps too :)

Other Stuff

Contributors (TONS of thanks!)

@Kosso @reymundolopez

kosso / squarecamera Goto Github PK

squarecamera's Introduction