Displaying Webcam Preview in a Metro App Using WinRT and XAML

I was looking at the controls available in WinRT () and I’ve stumbled upon this control called – CaptureElement. What it does is it “Represents a media capture from a capture device, for example recorded video content.” I thought I’d give it a go and see if I can display the output from the webcam on screen – which could be useful for AR (Augmented Reality) applications or even just for fun. This is how you do a preview then…

Start by creating a new “Windows Metro style/Application”.

Then enable access to webcam and microphone in Package.appxmanifest.

If you skip this step – you will do all the coding only to get a black screen instead of your mug when you are done and start your app. Then you might start wondering – is my webcam dead? Problems with WinRT preview? Well, no – it is just how Windows 8 handles these missing capability declarations – no error, just no output.

If you declare these capabilities – you will still get this dialog from the OS the first time you try to capture video:

Now how do you access that webcam…

The CameraCaptureUI Way

If all you want to do is record the output from the camera or see what it can see – you can use the built in CameraCaptureUI dialog. It allows you to capture an image or a video and it has built in controls for camera settings (resolution, device, stabilization, brightness, contrast, flicker compensation, focus and exposure). It will even allow you to crop the image when you take it.

To just see the output – you need two lines:

var dialog = new CameraCaptureUI(); 
await dialog.CaptureFileAsync(CameraCaptureUIMode.PhotoOrVideo); 

If you are like me – you will see this:

If you want to do more – like capture a video, or play back the video that was captured you can declare a MediaElement to display the video:

<MediaElement x:Name="mediaElement" />

Then capture to file like this:

private async void StartCameraCaptureUI() 
{ 
    var dialog = new CameraCaptureUI(); 
    dialog.VideoSettings.Format = CameraCaptureUIVideoFormat.Wmv; 
    var file = await dialog.CaptureFileAsync(CameraCaptureUIMode.PhotoOrVideo); 

    if (file != null) 
    { 
        var fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read); 
        mediaElement.SetSource(fileStream, file.FileType); 
    } 
} 

This method is great if you just want to see the webcam input or capture it to a file with no hassle. If you want to process the video in real time or overlay some other UI components – enter…

The CaptureElement & MediaCapture Way

You can use the CaptureElement in conjunction with MediaCapture to embed the video preview inside of your application and get more control of the video stream.

<CaptureElement x:Name="captureElement" />

var mediaCapture = new MediaCapture(); 
await mediaCapture.InitializeAsync(); 
this.captureElement.Source = mediaCapture; 
await mediaCapture.StartPreviewAsync(); 

Using the VideoDeviceController property of MediaCapture you can control all the basic video settings of the CameraCaptureUI. You can also flip or rotate the image, add image stabilization or any other effect (assuming you know how to implement IMediaPlugin).

The one thing I could not figure out was how to release the webcam input, so after I used the MediaCapture once – I could not do it again or use the CameraCaptureUI. Maybe a problem with the API or just a problem with documentation.

Full Source

Available on dropbox.

References

• Capturing personal photos, video, and audio in Metro style apps
  http://channel9.msdn.com/Events/BUILD/BUILD2011/PLAT-777T