Appcelerator Titanium :: SquareCamera

• NOTE: This fork don't have the video funcionality, and runs in the main thread, if you app don't have an intense use of the camera inside of a navigationGroup, use the original module by mikefogg, this update I made was only to work correctly in a project I'm working on.

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) - iPad (Tested with multiple iPads) - iPod Touch

iOS Versions

- 6.0+ (up to the latest iOS 7)

• NOTE: I have not tested against iOS8 Beta yet but will be doing that in the coming months (but feel free to try it and let me know :) )

Titanium SDK Versions

- 3.2.0 - 3.2.1 - 3.2.3 - 3.3.0 RC (and various nightly builds)

• 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,
  backgroundColor: "#fff",
  camera: "back" // Optional "back" or "front"
});

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;
});

win.add(cameraView);
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)

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);
});

Known Issues and Future Improvements

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