Uploading photos and videos from your App Cloud app

app cloud dev
 
Adam Mark's picture
Adam Mark on November 15, 2012

The latest version of the App Cloud SDK (1.12) allows developers to capture photos and videos from a user's camera or library and post them to a remote server. This functionality presents all kinds of possibilities for apps that depend on media capture and sharing. Here's a bare-bones example that shows how to capture a new image from the user's camera.

First, listen for a tap event on a button:

$("#take-pic-button").on("tap", openCamera);

In the callback function, we'll specify the source type ("camera") and permissible media types ("images"), then issue the command to take a picture:

var options = {
    "source": source,
    "mediaType": ["images"]
};

bc.device.mediaUpload.uploadMedia(SERVER_URL, handleTakePictureInit, handleTakePictureError, options);

The function uploadMedia takes a URL, a success callback and an error callback. The error callback should look familiar to you if you've used any other bc.device methods. The success callback fires as soon as the picture is captured. When this happens, you might want to show a progress indicator:

var handleTakePictureInit = function () {
    showProgressIndicator();
};

Note you can specify many more options in the uploadMedia function.

As the image is uploading, you'll certainly want to present some feedback to the user. For this, you can listen for PROGRESS, ERROR and COMPLETE events:

$(bc).on(bc.device.mediaUpload.events.ERROR, handleUploadError);
$(bc).on(bc.device.mediaUpload.events.PROGRESS, handleUploadProgress);
$(bc).on(bc.device.mediaUpload.events.COMPLETE, handleUploadComplete);

When you receive a PROGRESS event, you can update your progress widget to show the percent uploaded:

var handleUploadProgress = function (evt, data) {
    updateProgressIndicator(data.info.progress / data.info.expected);
};

And when you receive a COMPLETE event, you can take additional action based on the response you get from your server:

var handleUploadComplete = function (evt, data) {
    if (data.info.response === "OKAY") {
        // hooray!
        hideProgressIndicator();
    }
    else {
        // booooo
    }
};

The above example is extremely basic—my server simply returns the text "OKAY" if the operation is successful. But you can return any kind of data you want, such as the URL of the uploaded image.

Get the full rundown in the API docs and download a working demo from GitHub.

p.s. Get more tips and tricks (and share your own) by joining the Brightcove App Cloud discussion group on Google.

Post new comment

The content of this field is kept private and will not be shown publicly.
0

Comments