A Windows Store App for Accessing Camera using JavaScript
Posted by: Mahesh Sabnis ,
on 2/17/2014,
in
Category Windows Store Apps
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’:

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:

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: 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)
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Mahesh Sabnis is a DotNetCurry author and a Microsoft MVP having over two decades 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), and Front-end technologies like Angular and React. Follow him on twitter @
maheshdotnet or connect with him on
LinkedIn