Working With Camera in Windows Phone 7

Introduction

In this article we are going to see how to use the Camera options in developing applications with Windows Phone 7. In order to access the camera features we are going to use the Launchers and Choosers which has the inbuilt API's to perform each task based on the requirement. In order to manipulate the camera photos and storage with the device, we are going to use the CameraCaptureTask. This task is used to launch the default camera application to take some snap shot for any third party application which is trying to use the camera to save images locally or to an isolated storage.

Here in this article we will see how to take picture using the camera and save it locally. We need to have some understanding on the Launchers and Choosers task since we need to select the task based on our requirement. Let us use the CameraCaptureTask and complete the process step by step using Visual Studio for Windows Phone.

Steps:

First let us Open Visual Studio 2010 and create a new Silverlight for Windows Phone project with a valid project name as shown in the screen below.

Now to invoke the cameracapture task and save the image locally we can add 2 controls a button and a image viewer control. Button control is to invoke the cameracapture task and get the camera image and the image viewer control is to display the image which we took using the camera application. Drag and drop the images from the toolbox or write the XAML code as shown below.

XAML Code

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

 <Button Content="Invoke Camera" Height="72" HorizontalAlignment="Left" Margin="36,30,0,0" Name="btnCamera" VerticalAlignment="Top" Width="389" Click="btnCamera_Click" />

 <Image Height="377" HorizontalAlignment="Left" Margin="36,187,0,0" Name="imgCaptured" Stretch="Fill" VerticalAlignment="Top" Width="389" />

 <TextBlock Height="39" HorizontalAlignment="Left" Margin="36,129,0,0" Name="txtResult" Text="" VerticalAlignment="Top" Width="389" />

</Grid>

 

 

Now we are done with our design, our task is to invoke the camera application and capture an image. Once captured we are going to assign the image to the Image Viewer control. To invoke the CameraCaptureTask we need to include the below 2 namespaces.

C# Code

using Microsoft.Phone.Tasks;

using Microsoft.Phone;

Now let us add the code bind with the required code. First we add class level variables which are used to invoke the camera task. Add the below class level variables with in the class scope. We are just creating an object of the CameraCaptureTask using the below code.

C# Code

private CameraCaptureTask ccTask;

Now we need to invoke the Camera on the button click event, to do that first let us complete the object creating in the MainPage constructor and in the Button Event handler invoke the camera as shown in the code below.

C# Code

public MainPage()

{

  InitializeComponent();

  ccTask = new CameraCaptureTask();

}

private void btnCamera_Click(object sender, RoutedEventArgs e)

{

 ccTask.Show();

}

Now practically the camera application is invoked and with the inbuilt options we can capture the picture, now to save the picture we need to have a mechanism which can be done with the help of CameraCaptureTask Completed args. To do that first let us write some code to get the captured image and assign it to the image viewer control and then we will see on when to trigger this option. Write the below code in a separate method which normally gets the Photoresult and decode it to a byte array to show in on the image viewer control.

C# Code

private void ccTaskCompleted(object sender, PhotoResult pr)

{

 byte[] imgLocal;

 if (pr.ChosenPhoto != null)

   {

     imgLocal = new byte[(int)pr.ChosenPhoto.Length];

     pr.ChosenPhoto.Read(imgLocal, 0, imgLocal.Length);

     pr.ChosenPhoto.Seek(0, System.IO.SeekOrigin.Begin);

     var bitmapImage = PictureDecoder.DecodeJpeg(pr.ChosenPhoto);

     this.imgCaptured.Source = bitmapImage;

    }

}

Now we are done with our code to show the captured image to the imageviewer control (imgCaptured). Now when to trigger this code so that the image captured can be retrieved. We need to do this at the CameraCapturedTask completed event to do that we need to go back to the MainPage constructor at the top and add the below code.

C# Code

public MainPage()

{

 InitializeComponent();

 ccTask = new CameraCaptureTask();

 ccTask.Completed += ccTaskCompleted;

}

 

So the CameraCaptureTask completed will trigger the method to do the necessary to show the image in the image control. Now we are ready to build and check the output of the application. To do that Press F5 directly from the keyboard or by pressing build and execute option from the Visual Studio Tool Bar. Once the application is build and executed successfully we can see the output in the Windows Phone 7 Emulator as shown in the screen below.

 

 

Now to invoke the camera click on the InvokeCamera button and we can see the Camera Application is invoked. We will see an empty screen with the camera in built buttons as shown in the screen below.

 

 

Now click on the button at the top right corner so that the we can capture some image using the windows phone 7 emulator. Since we are using the emulator we will see a white screen with a rectangle to it. We can click on the Accept button at the bottom to capture the image as shown in the screen below. If we want to take a new image we can click on the Retake to capture again.

 

 

Now click on the Accept and we can see the image captured is assigned to the image viewer control on the main page as shown in the screen below. We can see a dull image since we are using the Windows Phone 7 Emulator, if we deploy the application on to the real device we can get a very good resolution of the picture.

Conclusion

So in this article we have seen how to use the Camera Application to capture the images and use in the development of our application as per the requirements. Also we have seen the Launchers and Choosers CameraCaptureTask to build the application to capture the picture.

Thanks for reading my article. If you like my blog and if you are interested in getting the latest updates on new articles, kindly follow me through one of these options.