1. CIS 136 Building Mobile Apps
Camera
CIS 136 Building Mobile Apps

2. Camera plug-in
Provides the application with the ability to work with images
Capture directly from camera
Choosing images from the devices photo gallery
Accesses only the devices camera application
Does not access the devices audio and video recording application
Available once the deviceready event fires

3. Camera API One Object: navigator.camera Methods getPicture()
Takes a photo using the camera
Retrieves a photo from the device's image gallery
The image is passed to the success callback as a Base64-encoded String, or as the URI for the image
file.cleanup()

4. Syntax getPicture(…) takes three arguments:
navigator.camera.getPicture(success,error,options);
getPicture(…) takes three arguments:
the name of the function to run when a picture is successfully taken
the name of a function to run when an attempt to take a picture fails
some optional arguments which define the parameters on how the image is obtained, formatted, etc.

5. Options

6. Options for quality
Higher resolution lenses plus limited storage and bandwidth, required images to be compressed.
JPEG specification includes support for image quality to control compression
Different quality percentages affect the physical size of the image
Image at 100% is full capacity

7. Options for quality
When images are returned they are either saved in storage (image file) or returned as the raw, base64- encoded image file data
Image files are just pointers to stored location
Raw data files , must think about size, quality
High-res cameras at 100% quality might crash the device
Reducing quality reduces image data
Photo resolution on newer devices is quite good
Photos selected from the device's gallery are not downscaled to a lower quality, even if a quality parameter is specified

8. DestinationType
Defines the output format 

9. Options for pictureSourceType
Defines where the picture is coming from

10. allowEdit
iOS only – allows the user to edit the image before returning it to the app allowEdit: true

11. encodingType Encoding type indicates what kind of picture to take
Most cameras today take JPEG images, but some can also record PNG file formats
JPG is the default on most cameras

12. targetHeight and targetWidth
These parameters control the width and height of the image
Either of both can be indicated
API will scale to smallest aspect ratio
No way to accurately indicate image canvas unless testing on each and every device possible
Syntax targetHeight: 400 targetWidth: 400

13. mediaType
Devices can store many different media types in a photo library
Setting media type parameter to the following values when retrieving stored images will produce the indicated results

14. popoverOptions (iOS only)
specify the anchor element location and arrow direction of the popover when selecting images from an iPad's library or album
the size of the popover may change to adjust to the direction of the arrow and orientation of the screen

15. ERROR CALLBACK Provides the standard error object Code property:
Message property: A String containing the a message provided by the device's native code

16. SUCCESS CALLBACK
The returned value is in one of the following formats, depending on the options:
A String containing the Base64-encoded photo image.
A String representing the image file location on local storage (default)
You can do whatever you want with the encoded image or URI, for example:
Render the image in an <img> tag
Save the data locally (LocalStorage, sqlStorage)
Post the data to a remote server

17. SUCCESS CALLBACK (cont.)
function cameraCallback(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData; }

18. camera.cleanup()
Removes intermediate image files that are kept in temporary storage after calling camera.getPicture()
Applies only when the value of Camera.sourceType = Camera.PictureSourceType.CAMERA and the Camera.destinationType = Camera.DestinationType.FILE_URI
navigator.camera.cleanup(onSuccess, onError);
function onSuccess() {
console.log("Camera cleanup success.") }
function onError(message) {
alert('Failed because: ' + message);

19. Cameras can have problems
Error function gets an error object which can be examined
Use the console log to record the error
Possible errors
Device does not have a camera
Too much raw camera data, and it can’t be handled by the device
To avoid common memory problems, set Camera.destinationType to FILE_URI rather than DATA_URL

20. EXAMPLE
var options = { quality:75, sourceType: Camera.PictureSourceType.CAMERA, destinationType: Camera.DestinationType.FILE_URI, allowEdit: True, encodingType: Camera.EncodingType.JPEG, mediaType: Camera.MediaType.PICTURE, targetWidth: 400, targetHeight:400, correctOrientation: true } navigator.camera.getPicture(success,error,options);

21. EXAMPLE function success(imgUri) { }
var elem = document.getElementById('imageFile');
elem.src = imgUri; }