Opening Camera Instance from a Web App

Question

Is it possible to open Camera instance from Web App?

I have a Web App. displays something, and I want the user to be able to Take a picture and send it to the

server. How can I achieve this?

Answer 1

Using cordova apis it's easy

Check out the following code sample:

JS:

// A button will call this function
// To capture photo
function capturePhoto() {
    // Take picture using device camera and retrieve image as base64-encoded string
    navigator.camera.getPicture(uploadPhoto, onFail, { 
        quality: 50, destinationType: Camera.DestinationType.FILE_URI 
    });
}

// A button will call this function
// To select image from gallery
function getPhoto(source) {
    // Retrieve image file location from specified source
    navigator.camera.getPicture(uploadPhoto, onFail, { quality: 50,
        destinationType: navigator.camera.DestinationType.FILE_URI,
        sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
    });
}

function uploadPhoto(imageURI) {
    //If you wish to display image on your page in app
    // Get image handle
    var largeImage = document.getElementById('largeImage');

    // Unhide image elements
    largeImage.style.display = 'block';

    // Show the captured photo
    // The inline CSS rules are used to resize the image
    largeImage.src = imageURI;

    var options = new FileUploadOptions();
    options.fileKey = "file";
    var userid = '123456';
    var imagefilename = userid + Number(new Date()) + ".jpg";
    options.fileName = imagefilename;
    options.mimeType = "image/jpg";

    var params = new Object();
    params.imageURI = imageURI;
    params.userid = sessionStorage.loginuserid;
    options.params = params;
    options.chunkedMode = false;
    var ft = new FileTransfer();
    var url = "Your_Web_Service_URL";
    ft.upload(imageURI, url, win, fail, options, true);
}
//Success callback
function win(r) {
    alert("Image uploaded successfully!!");
}
//Failure callback
function fail(error) {
    alert("There was an error uploading image");
}
// Called if something bad happens.
// 
function onFail(message) {
    alert('Failed because: ' + message);
}

HTML:

<input name="button" type="button" onclick="capturePhoto()" value="Take Photo"/>

<input name="button" type="button" onclick="getPhoto();" value="Browse" />

Hope that helps.

Answer 2

If you're looking to go straight WebApp, you might want to look into the File input type for forms.

Specifically, in iOS 6, they added the ability to submit a picture from either the camera or the gallery using just a <input type="file"> within a form. You could then set the form to be sent to the server, and accept the incoming file.

This has the added benefit of not needing to build an app, not needing to try to get it through any approval process, etc. It's also pretty commonly supported as well. According to this File Upload Support on Mobile page, it's supported in iOS 6+, Android 2.2+, BlackBerry 6+, and Windows RT.