CIS 136 Building Mobile Apps Camera CIS 136 Building Mobile Apps

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

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

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.

Options

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

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

DestinationType Defines the output format 

Options for pictureSourceType Defines where the picture is coming from

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

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

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

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

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

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

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

SUCCESS CALLBACK (cont.) function cameraCallback(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData; } https://github.com/apache/cordova-plugin-camera

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

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

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

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