Walkthrough: Capturing photos in your Windows 8 application

Windows 8 apps easily access all the sensors on a Windows 8 machine. But Windows 8 apps can’t access any sensors on a Windows 8 machine without first asking the user’s permission.

Asking Permission

Windows 8 apps are safe. That’s fundamental. Where desktop apps could (and can) do whatever the developer wants, Windows 8 apps are limited only to what the user allows.

Developers ask for device access by the application manifest. This XML file is in every Windows 8 app. It is manipulated by the GUI editor or notepad (for the die hard).

The manifest is how applications tell the operating system what sensors it intends to use. Just the manifest is not enough. Once requested, the operating system will verify access with the user first. 

Important note: checking webcam lets you capture photos. However, to capture video (including access to the vide stream) you need to ask for webcam and microphone. That’s just how it works.

Capture a Photo

Why do you want to capture a photo? There are a million reasons. Maybe you want to apply filters and effects. Maybe you want to update the user’s account photo. Or, maybe something else. Whatever reason, you can!

Do you remember with desktop applications, to open a file you call the OpenFileDialog? You didn’t build the dialog, you just invoke it. The user picks some file and presto, the dialog hands it to your code.

Just like that OpenFileDialog, the Windows 8 CameraCaptureUI dialog let’s the user take a photo or video and simply hands the resulting image back to you. All you do is invoke it.

The best part of the capture dialog is that it handles everything for you. Cropping photos, re-taking photos, camera settings – they are all part of the dialog and implemented for you, for free.

Here’s how:

 

In the code above, those three lines really are it. I instantiate the capture UI and call it’s CaptureFileAsync() method, indicating by its argument if the result should be a photo, video or either. In the second command (third line) I move the resulting file (defaulted in the temporary file) to my application’s isolated storage.

Capturing Video

The CameraCaptureUI is the same mechanism for capturing video. In fact, other than the CaptureFileAsync() argument value, it’s the same code and demonstrated in the section above.

Previewing the Camera

Because the CameraCaptureUI is a stand-alone, brokered dialog, it means it does it’s job and then returns the result. It could happen that your application needs (or wants) to show the user a preview of the camera – even to the point of handling the monotony that the CameraCaptureUI handles for you out-of-the-gate.

No problem. Enter the <MediaCapture /> XAML element. (Note: there’s a Windows 8 SDK sample for this). This clever element let’s developers preview the output of the camera without using the CameraCaptureUI.

You can create a simple UI that previews and shows a captured photo like this:

The screen above is accomplished with some very simple XAML:

In the XAML above, I implement the <MediaCapture /> element which we use to preview the camera on the device. To make this work, however, you need to do a little code behind. Like this:

In the code above, I am effectively “turning on” the MediaCapture element. First with it’s InitializeAsync() method, and then it’s StartPreviewAsync() method.

Capture a picture or video like this:

In the code above I create the target file. Then I use the MediaCapture which is the source of my CaptureElement to call CapturePhotoToStorageFileAsync(); This well-named method takes the current preview frame and saves it to the specified file. Presto, your own camera!

Best of luck!