A Windows Store App using JavaScript for Accessing Camera

Tweet

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 the image.

As Windows 8 will be available on the Tablet, it may happen that the end-user will take snaps with the device and may want to make use of the application to capture a photo and upload it. A business scenario could be that an accident insurance inspector will take snaps of the incident using his device and will upload the images immediately to the insurance office for further processing. This scenario requires an application which will take the snap and upload it.

In the steps shown below, I have explained the use of JavaScript to call Media API..

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



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 asynchronously performed. This is one of the new features of WinRT where the API which may delay the 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 display the dialog box that captures 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:



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



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:



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:



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



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



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

Download the source code

Tweet

About The Author

Mahesh Sabnis is a Microsoft MVP having over 18 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). He also blogs regularly at DotNetCurry.com. Follow him on twitter @maheshdotnet