Capturing Image Using Camera In Windows 10 Universal App Using JavaScript

Suresh M
8y
5.6k
0
3

Article

Let’s see the steps.

Create new windows 10 universal app using javascript. For creating a new Windows 10 universal project, refer to the following:

Develop Apps For Windows 10

We need to enable the capability “Webcam" in the Package.appx manifest file as in the following image.

file

Next we need to add a button to capture Image and an Image control to show the captured image.

Go to default.html page and write the following code.

<input type="button" id="btnCapture" value="Capture"
onclick="captureImage()" />
<img id="imgCapture" src="" width="100px" height="100px" />

Now go to default.js file and add the following code on capture button click event to capture the image using camera.

var page = WinJS.UI.Pages.define("default.html",
{
ready: function (element, options) {
document.getElementById("btnCapture").addEventListener("click", captureImage, false);
},
});
function captureImage() {
var cam = Windows.Media.Capture.CameraCaptureUI();
cam.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo)
.done(function (data) {
if (data) {
document.getElementById('imgCapture').src
= window.URL.createObjectURL(data);
}
}
, error);
}
function error() {
alert('Error');
}

The ‘CameraCaptureUI’ class is used to capture photo or video from the camera. The CaptureFileAsync() method creates an object and displays the dialog box to capture a photo or video. ‘Done’ represents the completion of the async operation which here in case displays the captured photo in the <img> tag.

Now run the app and output can be seen like the following screen:

output

For more information on Windows 10 UWP, refer to my e-book:

Windows 10 UWP E-book