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 :)

Supports

Devices

iOS Versions

Titanium SDK Versions

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