Intel XDK Camera Demo Project
STEPS
1) Create a new project
1.1) Click Start A New Project
1.2) Select Work with a Demo and then select Image Capture Project.
1.3) Click Use This Demo.
1.4) Enter Project Name DemoImageCapture and then click Create button
1.5) You should get Success Message
2) Understanding the codes
2.1) Index.html
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<script>
(function() {
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/))
{
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}"));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
})();
</script>
<title>Demo-Camera API</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="css/fonts.css" rel="stylesheet" type="text/css" charset="utf-8" />
<link href="css/main.css" rel="stylesheet" type="text/css">
<script src="intelxdk.js"></script>
<script src='cordova.js'></script>
<script src='xhr.js'></script>
<script src="js/main.js" type="text/javascript"></script>
</head>
<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>
</html>
|
Notice the links to the external files.
Three of the links refer to phantom libraries. These library will be added into your project when it is compiled. XDK handles this process.
a) intelxdk.js – calling XDK API
b) cordova.js – calling the cordova API
c) xhr.js – calling XDK CORS (Cross Origin Resource Sharing) API
The other three refers to files in your application root. You can edit these files as long as you know how they work.
a) css/font.css
b) css/main.css
c) js/main.js
3) Emulate Window
If you emulate this project, you will notice that XDK will create dummy images when you click Take Picture. You would also be seeing a slideshow of these dummy images.
You need to test this project in the real device in order to see how image capture actually works.
4) Test and Debug
4.1) Connect your device and make sure XDK detects it.
4.2) Click Test.
4.3) When the apps appear in device, click Debug.
4.4) Test by taking three pictures.
4.5) Click Make Slideshow to view the images.
4.6) Notice that when you end the slideshow, the images disappear from the frame.
5) Finding the location of the images
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