DotNetCurry Logo

A Windows Store App for Accessing Camera using JavaScript

Posted by: Mahesh Sabnis , on 2/17/2014, in Category Windows Store Apps
Views: 19569
Abstract: The WinJS library for WinRT applications allow us to build Windows 8 style apps using HTML5 and JavaScript. In this article, we will build a sample application and demonstrate the use of Media APIs exposed for accessing Camera device to capture an image.

With the Windows 8 and 8.1 availability on the Tablet, an end-user can make use of an application to capture a picture and upload it. A business scenario could be that an accident insurance inspector can take snaps of the incident using his device and upload the images immediately to the insurance office for further processing.

In the steps shown below, I have explained the use of JavaScript to call Media API. The scenario is to design an application which will take some snaps and upload them.

Step 1: Open VS 2012 and create a new Windows Store application, name it as ‘Store_JS_Camera’:

winrt-newproject

Step 2: Add the following Html code in the default.html:

<p>Content goes here</p>
<input type="button" id="btnCapture" value="Capture" 
    onclick="captureImage()"/>
<img id="imgCapture" src=""  width="100px" height="100px"/>
<input type="text" id="txterror" />

Step 3: Write the following code:

<script type="text/javascript">
function captureImage()
{
    //S1: Create a new Camera Capture UI Object
    var cam = Windows.Media.Capture.CameraCaptureUI();
    //S2: Perform an Async operation where the Capture
    // Image will be stored as file
    cam.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo)
        .done(function (data) {
            if (data)
            {
                //S3: Create a URL for the capture image
                // and assign it to the <Img>
                document.getElementById('imgCapture').src
                    = window.URL.createObjectURL(data);
            }
        }
        , error);
    document.getElementById('txterror').value = "Done";
}
function error()
{
    document.getElementById('txterror').value = "Error";
}
</script>

One important point here is that the operation is performed asynchronously . This is one of the new features of WinRT where API’s which may delay execution, are handled asynchronously. The ‘CameraCaptureUI’ class is used to capture single photo or video from the attached camera. The CaptureFileAsync() method creates an operation object which 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>.

Step 4: Run the application and the result will be as shown below:

win-store-app-camera

Click on the capture button. Since the application requires permissions to access the device, you will get the following result:

camera-capture

Stop the application. To assign the permissions, click on the ‘package.appxmanifest’. You will see the following screen. Click on the ‘Capabilities’ tab and select ‘WebCam’ check box as shown below:

webcam-capabilities

Run the application and click on the ‘Capture’ button. Now the system will ask your permission to allow access rights to use your camera in the application:

I4_Res_4

Click on the Allow button and you should see something similar to the following:

winrt-camera-capture

Double click on the Camera image and then Click on ‘OK’. The result will be as shown below:

camera-winrt

Conclusion: Windows Store WInRT applications provide a set of easy and developer friendly APIs to develop some cool applications.

Click here to download the entire source code of this article (Github)

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+
Further Reading - Articles You May Like!
Author
Mahesh Sabnis is a DotNetCurry author and Microsoft MVP having over 17 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). Follow him on twitter @maheshdotnet


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Darshana Dinushal on Tuesday, July 29, 2014 2:17 AM
Sir,How can we assess external web cam using Windows Store App.?