Integrating with the Camera in WP7


There has been a small white lie that many people tell when looking at whether or not a WP7 application can directly interact with the camera. The fib looks like this:

You can only access the camera through the CaptureCameraTask. Direct access is not allowed.

It didn’t seem right when I heard that, so I did some digging around, looking for ways to find out what is really contained in the phone. Some information is out there, and if you assemble the parts, you wind up with a better view into what managed code can do on the phone. I wrote a post earlier that showed what you need to do in order to make your development environment work better. As a result of that effort, you are going to be able to use the camera in your Windows Phone 7 applications today.

Adding live support for a phone is actually pretty easy. You just need to add some references to the right assemblies, add a little markup to your page, and then write a few lines of code.

References

Go ahead and create a WP7 XAML app. Once you do that, you need to add references to two assemblies that aren’t standard issue:

* Microsoft.Phone.InteropServices

* Microsoft.Phone.Media.Extended

Why two assemblies? The first one allows you to work with the second one-nothing more.

Add some markup to display the camera

To work with the camera, live, here is what you do:

1. Add a reference to the Microsoft.Phone.Media.Extended to the page you want to display the camera output to. For example, add the following to the PhoneApplicationPage element:

xmlns:media=
"clr-namespace:Microsoft.Phone;assembly=Microsoft.Phone.Media.Extended"

2. With that in place, you can then put a CameraVisualizer on to your page. A CameraVisualizer displays the content of a camera on to a surface.

<media:CameraVisualizer Name="cameraVisualizer" Visibility="Visible" 
    Margin="64,4,99,26" Height="426" Width="593" />

Hook up the Camera to the Page

In your page’s code behind, add a Microsoft.Phone.PhotoCamera and attach it to the CameraVisualizer. You do that by calling SetSource on the visualizer. The code looks like this:

cameraVisualizer.SetSource(_camera);

 

Doing something with the Camera

From there, you can access methods telling you what is going on with the camera:

* ShutterPressed: Fires when someone presses the camera button.

* ImageSavedToDisk: Fires when the image you just took is saved to disk, passing along the path to the file.

* ThumbnailSavedToDisk: Fires when the thumbnail is saved. This one also has the image path.

When the shutter is pressed, you still need to tell the camera to take the picture. To do this, fire the CaptureImage method on the PhotoCamera instance. You can also do some cool things like set the flash setting, zoom level, and auto focus.

There are a few gotchas with the camera that do make it difficult to work with and show why it wasn’t available to all of us when the phone launched. First off, any time you use the control just a little bit ‘incorrectly’, you will see a COM exception. Second, any time that the visualizer goes off screen then back again, you need to detach any events, then hook them back up again or you will have a bad experience for your users. If you do not handle the pictures being taken in quick succession, you will have issues.

I invite you to play with the camera but be warned-it is a nasty beast to work with and you will spend quite a few cycles fixing weird little bugs. Microsoft never made a general release of this code because the code needed more QA before burning any cycles documenting the feature. They’ve already announced it will be in better shape for Mango, but if you want to use it now, I’ve given you enough rope. Have some fun (and don’t hang yourself)!!!

Thanks to Jeff Prosise for encouraging me to talk about this. We were chatting in late April at a conference when I was having some fun with a WP7 camera app I had written and he said he wanted to know how I did that.

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: