Intel XDK Simple Camera Sample Works
The source code for this sample can be found here: https://github.com/gomobile/sample-imagecapture
or download the Intel(R) XDK to check out all the HTML5 Samples.
or download the Intel(R) XDK to check out all the HTML5 Samples.
Purpose
The camera demonstration is a very simple implementation of how the intel.xdkJavaScript Bridge Library can be used to use the device's camera in a hybrid app.
Source Code
The HTML of this app contains images and button DIV elements that are used to display the pictures taken with the camera and interact with the application. Touching the button DIV element triggers the takepicture function found injs/main.js.
<body>
<div class="masthead">
<img class="logo" src="images/logo.png"/>
</div>
<div class="content" id="contentid">
<div>
<div id="imagecontent" class="hide">
<div id="imagespace">
<img id="slideshowpicid" class="slideshowpic"/>
</div>
<img src="images/Arrow-L.png" class="arrows" id="previousid" onclick="Previous()"></img>
<img src="images/Arrow-R.png" class="arrows" id="nextid" onclick="Next()"></img>
<img src="images/EndShow.png" class="endbutton" onclick="endslideshow()"></img>
</div>
<img src="images/EmptyBox-Phone.png" id="photoone" />
<img src="images/EmptyBox-Phone.png" id="phototwo" />
<img src="images/EmptyBox-Phone.png" id="photothree" />
</div>
<div class="button" id="buttonid" onclick="takepicture()">Take Picture</div>
</div>
</body>
|
When the intel.xdk.camera.takePicture function is triggered, the native camera application on the device is started allowing the user to take a picture. Once a picture is successfully taken, or the camera application is closed, control returns back to the hybrid app and a JavaScript event is thrown.
//Camera button functionality
function takepicture()
{
intel.xdk.camera.takePicture(80, true, "jpg");
}
|
If the camera app successfully takes a picture, the intel.xdk.camera.picture.add event is thrown. If the user cancels out of the camera application without taking a picture, the intel.xdk.camera.picture.cancel event is thrown instead. In case the application tries to query the camera object while the app's native camera is loaded, the intel.xdk.camera.picture.busy event is thrown. In each of these cases, the onSuccess function acts as an event handler.
//Event listener for camera
document.addEventListener("intel.xdk.camera.picture.add",onSuccess);
document.addEventListener("intel.xdk.camera.picture.busy",onSuccess);
document.addEventListener("intel.xdk.camera.picture.cancel",onSuccess);
|
The onSuccess event handler reads whether the camera application successfully took a picture or not. In case of an error, the message returned is displayed in an alert box. If the camera was successful, the image URL is used to draw the image to the screen.
function onSuccess(event)
{
if (event.success == true)
{
var imagesrc = intel.xdk.camera.getPictureURL(event.filename);
var pic1 = document.getElementById("photoone");
var pic2 = document.getElementById("phototwo");
var pic3 = document.getElementById("photothree");
var changebutton = document.getElementById("buttonid");
pic3.src = pic2.src
pic2.src = pic1.src;
pic1.src = imagesrc;
if(picturecount>=2)
{
changebutton.innerHTML = "Make Slideshow";
changebutton.className = "button showbutton"
changebutton.onclick=makeslideshow;
}
picturecount++;
}
else
{
if (event.message != undefined)
{
alert(event.message);
}
else
{
alert("error capturing picture");
}
}
}
|
After three images are captured with the camera, a quick slide show can be displayed using the makeslideshow function.
//This function creates the slideshow of the captured pictures.
function makeslideshow()
{
var changebutton = document.getElementById("buttonid");
var pic1 = document.getElementById("photoone");
var pic2 = document.getElementById("phototwo");
var pic3 = document.getElementById("photothree");
pic1.className="hide";
pic2.className="hide";
pic3.className="hide";
changebutton.innerHTML="Take Picture";
changebutton.className="button hide";
document.getElementById("imagecontent").className="show";
var currentpic = document.getElementById("slideshowpicid");
currentpic.src=pic1.src;
}
|
Testing
This sample application has been tested on a variety of iOS and Android devices.
Limitations
The camera API relies on the device's native camera taking software. Depending on the device and operating system this sample application runs on, there could be differences and limitations on taking pictures that are out of the application's control.
Additional Note:
1) Documentation on Intel XDK Camera Object API be found at: https://software.intel.com/en-us/node/492889
2) It is reported that there is an issue when you apply clearPictures method as reported at:https://xdk.intel.com/viewtopic.php?f=34&t=5134
3) It is reported that the picture is saved as test.jpeg at the root of the physical storage as reported at: https://forums.html5dev-software.intel.com/viewtopic.php?f=29&t=6206 . It turned out to be that images are saved in the application storage directory which is not viewable in file browser application. Try debugging the application and you can see the file names persist in the application storage.
|
No comments:
Post a Comment