|
In this article I will talk about how to capture photo in Windows Store using WinJS.
Step 1: Open VS2012 and select New Project from File Menu.
Step 2: Select template type as Windows Store under JavaScript.
Step 3: Open default.html place below code inside the body tag.
<div>
<p>Capture Photo Demo</p>
<button id="capturePhoto">Capture Photo</button>
<button id="reset">Reset</button>
</div>
<br />
<div>
<img class="imageHolder" id="capturedPhoto" alt="Captured image will appear here." src="/images/imageplaceholder.png" style="border: solid; border-color: red;" />
</div>
If you want you can change theme from
< link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
to
< link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
Step 4: Open default.js and place below code at the end of file or you can create another js file as well.
photoSettings of CamerCaptureUI has below properties.
allowCropping determines photo cropping will be enabled or not in the user interface of capture photo.
croppedAspectRatio determines the aspect ration of captured photo.
croppedSizeInPixels determines exact size of captured photo in pixels.
format determines the format of captured photo to store.
maxResolution determines the maximum selectable resolution by user.
capturePhoto method will create object of Windows.Media.Capture.CameraCaptureUI and set the aspect ratio. captureFileAsync creates operation object for displaying the dialog that captures a photo.
reset method will reset the html image to blank.
(function () {
"use strict";
var page = WinJS.UI.Pages.define("default.html", {
ready: function (element, options) {
document.getElementById("capturePhoto").addEventListener("click", capturePhoto, false);
document.getElementById("reset").addEventListener("click", reset, false);
document.getElementById("reset").style.visibility = "hidden";
}
});
function capturePhoto() {
var dialog = new Windows.Media.Capture.CameraCaptureUI();
var aspectRatio = { width: 1, height: 1 };
dialog.photoSettings.croppedAspectRatio = aspectRatio;
dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).done(function (file) {
if (file) {
var photoBlobUrl = URL.createObjectURL(file, { oneTimeOnly: true });
document.getElementById("capturedPhoto").src = photoBlobUrl;
document.getElementById("reset").style.visibility = "visible";
}
}, function (err) {
WinJS.log && WinJS.log(err, "sample", "error");
});
}
function reset() {
document.getElementById("capturedPhoto").src = "/images/imageplaceholder.png";
document.getElementById("reset").style.visibility = "hidden";
}
})();
Step 5: Now run the application and you will get screen as shown below.
Step 6: Now click on Capture Photo button and you will get notification saying "This app needs permission to use your camera. You can change this in the app's settings." as shown below.
Step 7: Now open package.appxmanifest and check Webcam checkbox. By default Internet (Client & Server) will be checked, if your app doesn't use internet you can uncheck it.
Step 8: Now run the application again and click on Capture Photo button. You will get notification saying "Can <App Name> use your webcam?" as shown below. This will appear only first time when you run the app.
Step 9: You will notice camera will be turned on and on click on the screen photo will be captured. On next screen you will get application bar button with OK and Retake and on click of OK the captured image will be set in the HTML image controls of default.html.
Camera Options
1. When you run the app, you will get the application bar like below.
2. On click of Camera options you will get flyout like shown below.
3. On click of more of Camera Options you will get screen like below to set the Brightness, Contrast and Flicker.
4. On click of time followed by click on screen will start the time of 3 seconds.
This ends the article of capturing photo from camera in Windows Store using WinJS
|