In this tutorial I will introduce you to Intel XDK camera API. We will be creating an sample application which lets you take a picture using camera or imports picture from photo library. It also displays the image and uploads the image to server.
Let’s get started
Including Camera and File Plugins
Make sure you include Intel XDK camera and file plugins in your app.
Basic Template
This is the basic template of the app
<html>
<head>
<title>Blank Hybrid App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="lib/ft/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<img src="" id="picture" width="200" height="150" />
<progress min="0" max="100" id="progress"></progress><br>
<button onclick="captureCamera();">Take a Picture</button>
<button onclick="importLibrary();">Import from Library</button>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
</body>
</html>
Capturing or Importing Image
Here is the JavaScript code to capture or import image into application storage when respective buttons are clicked
{
/*this function opens default camera app and captures a picture. It stores the captured image in application storage. Parameters:
1. Quality 0-100
2. Should stores the picture in photo library of phone also or not
3. Image format png or jpg
*/
intel.xdk.camera.takePicture(10,true,"png");
}
function importLibrary()
{
//this function opens default photo library of phone and imports a image into application storage.
intel.xdk.camera.importPicture();
}
Handing Success, Busy and Cancel Events
Event is fired based on your action on native camera or photo library application when they are opened. Here is the JavaScript code to handle the events.
document.addEventListener("intel.xdk.camera.picture.add",function(event){
alert("Picture added to application local storage");
});
//fired if camera is in use by another app
document.addEventListener("intel.xdk.camera.picture.busy",function(){
alert("Camera is already in use");
});
//fired when user clicks cancel instead of capturing an image or importing.
document.addEventListener("intel.xdk.camera.picture.cancel",function(){
alert("You pressed the cancel button");
});
Displaying Picture
We can display the image once we have it on our application local storage. Every image inside application local storage gets a unique name. Image file name is the image identifier.
//picture name
var name = event.filename;
//absolute URL of the image
var url = intel.xdk.camera.getPictureURL(name);
//dislay the image
document.getElementById("picture").setAttribute("src", url);
});
Uploading Image to Server
We can upload the image once we have it on our application local storage. We can upload it using Intel XDK File Upload API.
document.addEventListener("intel.xdk.camera.picture.add",function(event){
//picture name
var name = event.filename;
//absolute URL of the image
var url = intel.xdk.camera.getPictureURL(name);
//upload the image to server
intel.xdk.file.uploadToServer(url,"http://labs.qnimate.com/demo/index.php", "", "image/png", "updateUploadProgress");
});
document.addEventListener("intel.xdk.file.upload.busy",uploadBusy);
document.addEventListener("intel.xdk.file.upload",uploadComplete);
document.addEventListener("intel.xdk.file.upload.cancel",uploadCancelled);
function uploadBusy(evt)
{
alert("Sorry, a file is already being uploaded");
}
function uploadComplete(evt)
{
if(evt.success==true)
{
alert("File "+evt.localURL+" was uploaded");
}
else {
alert("Error uploading file "+evt.message);
}
}
function uploadCancelled(evt)
{
alert("File upload was cancelled "+evt.localURL);
}
Handling Uploads on Server
This is a sample PHP script to handle uploads on server
set_time_limit(0);
move_uploaded_file($_FILES["Filedata"]["tmp_name"], $_FILES["Filedata"]["name"]);
?>
Complete App Source code
Here is the code for the complete app
<html>
<head>
<title>Blank Hybrid App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="lib/ft/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<img src="" id="picture" width="200" height="150" />
<progress min="0" max="100" id="progress"></progress><br>
<button onclick="captureCamera();">Take a Picture</button>
<button onclick="importLibrary();">Import from Library</button>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script>
function captureCamera()
{
intel.xdk.camera.takePicture(10,true,"png");
}
function importLibrary()
{
intel.xdk.camera.importPicture();
}
document.addEventListener("intel.xdk.camera.picture.add",function(event){
var name = event.filename;
var url = intel.xdk.camera.getPictureURL(name);
document.getElementById("picture").setAttribute("src", url);
intel.xdk.file.uploadToServer(url,"http://labs.qnimate.com/demo/index.php", "", "image/png", "updateUploadProgress");
});
document.addEventListener("intel.xdk.camera.picture.busy",function(){
alert("Camera is already in use");
});
document.addEventListener("intel.xdk.camera.picture.cancel",function(){
alert("You pressed the cancel button");
});
function updateUploadProgress(bytesSent,totalBytes)
{
if(totalBytes>0)
currentProgress=(bytesSent/totalBytes)*100;
document.getElementById("progress").setAttribute("value", currentProgress);
}
document.addEventListener("intel.xdk.file.upload.busy",uploadBusy);
document.addEventListener("intel.xdk.file.upload",uploadComplete);
document.addEventListener("intel.xdk.file.upload.cancel",uploadCancelled);
function uploadBusy(evt)
{
alert("Sorry, a file is already being uploaded");
}
function uploadComplete(evt)
{
if(evt.success==true)
{
alert("File "+evt.localURL+" was uploaded");
}
else {
alert("Error uploading file "+evt.message);
}
}
function uploadCancelled(evt)
{
alert("File upload was cancelled "+evt.localURL);
}
</script>
</body>
</html>
Its not all about Intel XDK camera API. You can do many more things.
Displaying all Images
This is the code to display all captured and imported images into app storage
var arrPictureList = intel.xdk.camera.getPictureList();
for (var x=0;x<arrPictureList.length;x++)
{
var name = arrPictureList[x];
var url = intel.xdk.camera.getPictureURL(name);
}
Deleting Images
To delete a image you just need the image file name. Here is the code to remove all images
for (var x=0;x<arrPictureList.length;x++)
{
var name = arrPictureList[x];
//this function is used to delete a image file.
intel.xdk.camera.deletePicture(name);
}
//this is fired after every attempt to delete an image.
document.addEventListener("intel.xdk.camera.picture.remove",onRemove);
function onRemove(evt)
{
if(evt.success==true)
{
alert(evt.filename + " has been removed from the application storage");
}
else
{
alert(evt.filename + " has been failed to remove from application storage");
}
}
Building app Binary
While building app binary for Android make sure you set permission to access user’s camera