There's CameraCaptureUI and there's MediaCapture. MedialCapture will allow you to control every pixel on the screen and CameraCaptureUI, will build the default camera UI that people will be used to when using Windows. We're going to use CameraCaptureUI. We also have the ability to set both photo and video through the CameraCaptureUIMode. We still need to remember webcams are a capability that needs to be turned on in the app manifest file. This is so that in the Windows Store, our app will declare its intent to use the webcam.
When people download our game, they'll know that webcam is capability of the app. Good new for us is the PC webcam that you have connected will work in the simulator as well. This makes testing very easy. Let's go in and add the camera now. We'll go to default.js, and at the end of our declarations before initialize, we're going to add a new variable for the camera. We'll call this capturedPhoto.
Next, we need to add a new command to our AppBar command, so we'll go into default.html. We'll scroll down to our existing AppBar commands. Underneath command name, we will add cmdCamera. Just like I showed you how easy it is to add buttons for existing commands, we'll do the same here for the camera. We'll call into the WinJS control, for WinJS.UI. AppBar command, we'll call it cmdCamera.
We'll have a label of player photo, we'll use the standard icon for camera, and we'll set the section for global, so it appears on the right. Lastly, we'll have tool tip that says, Change player photo. We need to handle the event for the click, just like our other commands. So let's go into default.js, we'll scroll down to our other AppBar commands, and we will add a new event handler for cmdCamera click.
The function that we're going to call is capture photo. We'll add capture photo at the end before app on activated. Let's take a look at what capture photo does. Just like working with any device, we're going to put this in a try catch loop. For demo purposes, I'm not handling the error at all, so it just falls away down here. If you'd like to catch those errors yourself, feel free to add variables down here.
Remember, imgPlayer is just a standard image tag in our gamesUI, in the top right, we will use URL.createObjectURL. This is an open standard for handling file paths. This will return a temporary file path on our local disk that has stored the photo. Then we'll assign that image to the source. Notice if I wanted to enable video, I could simply come over to CameraCaptureUIMode, do a dot and I have video.
I can also do photo or video. We'll stick with just a photo for our game. Let's go ahead and run this. If I right-click and bring up my AppBar, you'll notice that the camera says, This app needs permission to use your camera. This is part of that app manifest we talked about. Let's go ahead and update that now. We scroll down to package.appmanifest. We're going to double-click. We'll move over to capabilities, and at the bottom here we have webcam.
Let's go ahead and check that off, click Save, and now when we run it, we'll get a new prompt that says, Can Balloons use your webcam? We're going to click allow. I'm going to take a picture, and I showed you how you could set the cropping tool to be 16x9. Notice that the ratio here always stays at 16x9. We'll click OK.
And when I play the game. You'll notice that the image is squished. So what we need to do now, to support our 16x9, is update the imgPlayer. One of the great things about having everything as CSS styles is we can easily change any of those elements on the screen. Let's move down.
We're going to change the width from 70 pixels to a 100 pixels for imgPlayer. We'll hit Save. We'll take a new player photo. Notice also, we have Camera options. This is part of the defaultUI. So if I bring this up, I can change photo resolutions. We'll take a better picture here. I think .9 megapixel, there we go.
I've also got more details down here where I can move the brightness, contrast; all of this is done through the Windows drivers themselves. I didn't have to write any of these as a developer. This is the great part about the CameraCaptureUI. Let's take this picture. We'll get the entire thing, hit OK. Now when we play, we get the nice widescreen 16x9.
If we right-click and drag this over into a snapped mode, notice that all of the icons are aligned and look great. We can also take a photo directly within here as well.
- Setting up your Visual Studio 2012 development environment
- Laying out the interface with Canvas
- Creating a game loop
- Adding a menu
- Supporting snapped, filled, and full-screen modes
- Working with the Touch API
- Playing music
- Creating a scoring and leveling system
- Working with the Application Bar
- Accessing the camera and accelerometer
- Debugging and deploying your application