I have recently been coding a Windows 8 Metro Style App using the new Windows 8 Release Preview bits and Visual Studio Express 2012 RC. The app is going to be a retro shooter that takes advantage of HTML5 Canvas for the main game engine and then several Windows 8 Metro Style App Features.
One of the things I wanted to do in the game was to keep Player Profiles. These profiles track player high scores, player names and a player avatar. Eventually these high scores could be used in a leaderboard running in the cloud.
I thought it would be neat to let players take a picture of themselves for their Avatar by accessing the webcam. Fortunately for us WinRT makes this super easy to use. We can even pull up prebuilt camera capture UI by using the built-in Windows.Media.Capture API’s. If you are an existing Windows Phone Developer this may remind you a lot of Windows Phone Development Tasks – something I absolutely loved.
Features like camera timer, settings, and even picture cropping are all done for us via the Windows.Media.Capture.CameraCaptureUI. For those looking for more control you also have the ability to call into Windows.Media.Capture.MediaCapture. You won’t get a default UI with MediaCapture but you do get full control of the streams. MediaCapture is also a way to record Audio streams in your app.
Here is what the default Capture Capture UI looks like when using the cropping tool:
After cropping the photo to my liking and tapping the OK button my new Avatar is automatically set. The new Avatar Image is automatically scaled correctly thanks to the predefined CSS styling we have created.
Declaration and Initialization
I then defined a CSS Style for the Avatar Picture using it’s imgPlayer id.
That’s it! We now have a working Game Header and AppBar for our game. When a player clicks on the Camera Button we will invoke a call to the capturePhoto function.
Opening the Camera Capture UI
capturePhoto is where the magic happens. The first thing we do is make a call to WinRT using the Windows.Media.Capture namespace. This gives us a reference to CameraCaptureUI where we can set default properties. For my game I am telling the camera to use a 16x9 aspect ratio and lock to the photo mode. If I wanted the user to capture video I could easily do this as well by using Windows.Media.Capture.CameraCaptureUIMode.video.
Hopefully you have seen how easy it is to access the WebCam on Windows 8 now thanks to WinRT and the Windows.Media.Capture API’s. As Always - if you are currently working on a Windows 8 app I would love to hear about it!
You may also want to check out my previous Windows 8 Metro Style Development Tips:
- Using KnockoutJS in Windows 8 Metro Style Apps
- Illegal characters in path when deploying a Metro Style App
- Connecting to WCF RIA Services in a Windows 8 Metro Style App using Upshot.js and Knockout.js
- Help! Visual Studio 11 Beta Dark Theme incorrectly using White Background
- “The application could not be started.” error when debugging a Windows 8 Metro Style App