Using Webcam to Preview Video In Windows Store App

Before reading this article, please go through the following articles:

1. Developing Windows Store Apps : Introduction And Requirement Specification
2. Plans For Designing Metro Style Apps (Windows Store Apps)
3. Windows Store Application Life-Cycle
4. Guidelines to Pass Windows Store App Certification
5. Navigation Patterns to Develop Windows Store Application
6. Templates to Develop Windows Store Apps
7. Develop Your First Windows Store App (Hello World)
8. Controls to Design Windows Store Apps
9. Lay-out Design Guidelines For Windows Store Apps
10. Guidelines to Create Splash Screen For Windows Store Application
11. Configure Your Windows Store Application Using Manifest Designer
12. Working With Progress Controls in Windows Store Application
13. Global AppBar For Windows Store Applications

Introduction

In my last article in this series we saw how to create a global app bar for a Windows Store app. In this article we will see how to use a webcam or any other capture device to preview the video in a Windows Store app. Assume you are developing an application related to photo sharing and you need to first capture the image and then share this captured image with other users. For that we need to use our system's capture devices. To use a webcam or capture device we need to modify some settings.

In this article we will see how to make our Windows Store application that can use a webcam or any other capture device. To make a webcam enabled in a Windows Store app have a look at the following procedure.

Step 1

I'm assuming you know how to create a basic Windows Store application using Visual Studio 2012. First create a Windows Store application.

Step 2

Next open the manifest file from the Solution Explorer by double-clicking on the "package.appxmanifest" file. In this file we have to set the capabilities for accessing the webcam in our Windows Store application.

Step 3

Go to the capabilities tab in the manifest file and check the checkbox for the webcam or capture device of which access is to be enabled. For more capabilities see this article.

Step 4

After adding the capability for the webcam we need the control on our page for showing a preview of the captured video from the webcam. In the Windows Store app we have a new control to do that called CaptureElement. Add captureelement onto your page like the following:

<CaptureElement Name="capturePreview" Height="400" />

Step 5

After adding a capture element, we need to create an object of the MediaCapture class that contains methods and properties related to capturing video. Create the object like the following and initialize it.

MediaCapture captureMgr = new MediaCapture();

await captureMgr.InitializeAsync(); 

Step 6

The last thing to do to complete our work is to assign the source to our CaptureElement added in Step 4 to the MediaCapture object and start previewing it in the CaptureElement.

capturePreview.Source = captureMgr;

await captureMgr.StartPreviewAsync(); 

Step 7

Next run your application and see the live video from you webcam in your Windows Store application.

Conclusion

Using a simple way we can create a video capturing application using a Windows Store app.