Camera Capture Task in Windows Phone 8

This article describes a flexible way to capture and save an image to your isolated storage.

Introduction

A camera is one of the needed features of any phone. In our daily life, we use the camera so many times. So the Windows Phone 8 API has rovided us a flexible way to capture and save it your isolated storage.

Well, in this article we will capture our image and then save it to the Media folder.

Agenda

  • First, create a layout
  • Capture the image using the Camera Task
  • Save it to The Isolated Storage of the Windows Phone
Procedures

Step 1

Create a Blank Windows Phone Silverlight App Project and try to make a UI like this.

Layout of Camera Capture

Here, we have an Image Control and two buttons named btnSave and btnCaptute.

And add the following namespaces to your project:
  1. using Microsoft.Phone.Tasks;  
  2. using System.Windows.Media.Imaging;  
  3. using System.IO;  
  4. using Microsoft.Xna.Framework.Media;  
And we need a few global instances further. So, add them as well as in the following:
  1. //Instances  
  2. BitmapImage bitMap;  
  3. Random rand;  
  4. WriteableBitmap saveBitMap; 

And, we need Few Capabilities rights.

So, open WMAppManifest.xml and check few rights


 
 
Step 2

First, we will code the Capture button whose task is to call the Capture Image task and capture the image.
  1. private void btnCapture_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     CameraCaptureTask camera = new CameraCaptureTask();  
  4.     camera.Completed += camera_Completed;  
  5.     camera.Show();  
  6. }  
  7.   
  8. void camera_Completed(object sender, PhotoResult e)  
  9. {  
  10.    if (e.TaskResult == TaskResult.OK)  
  11.    {  
  12.       bitMap = new BitmapImage();  
  13.       bitMap.SetSource(e.ChosenPhoto);  
  14.       // Set to Image Control  
  15.       caputredImage.Stretch = System.Windows.Media.Stretch.UniformToFill;  
  16.       caputredImage.Source = bitMap;  
  17.   
  18.       // Enable The Save Button  
  19.       btnSave.IsEnabled = true;  
  20.    }  
  21. }  
Explanation

First, we are creating an instance of the CameraCaptureTask that activates the physical camera of the phone to capture the image.
Then, we linked an event handler to the Completed event.
Within that event handler, we first check whether the task has completed or not. And saved the image to Bitmap instance.
Since every image is stored in a BitmapImage object, to display the captured image in our Image control, we need a BitmapImage instance where we have called the SetSource() method as the camera instance as the parameter. Finally, we have assigned a bitmap instance to the Source property of our Image control.

Note: capturedImage is the name of my Image control.

CameraCaptureTask

Until now, we have our Image on the Image control. Now, we want to save the captured image in Isolated Storage.

Step 3
  1. private void btnSave_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.    //Random Name  
  4.    rand = new Random();  
  5.    saveBitMap = new WriteableBitmap(bitMap);  
  6.   
  7.    // Now, save the Capyuted Image  
  8.    using(MemoryStream stream=new MemoryStream())  
  9.    {  
  10.       saveBitMap.SaveJpeg(stream, saveBitMap.PixelWidth, saveBitMap.PixelHeight, 0,100);  
  11.       stream.Seek(0, SeekOrigin.Begin);  
  12.   
  13.       using (MediaLibrary media = new MediaLibrary())  
  14.       {  
  15.          media.SavePicture("MyDemo_"+rand.Next(0,1000)+".jpg",stream);  
  16.   
  17.          // PopUp Message  
  18.          MessageBox.Show("Saved Succcessfully","Saved !!",MessageBoxButton.OK);  
  19.       }  
  20.    }  
  21. }  
Explanation

We have a randon() instance to create a random-unique name while saving. A SaveBitmapImage() instance is needed to save a Bitmap Image to isolated storage. Since file manipulation needs a stream, here we need a MemoryStream(). The SaveImage() method needs a stream instance along with pixel height and width, position and quality as parameters.

And then, we need a MediaLibrary() instance that saves in Isolated Storage and it is under a Microsoft.Xna.Framework.Media namespace.

save a Bitmap Image to isolated storage

Conclusion

We have designed a prototype that saves the captured image to a Media Folder of Windows Phone. And you can put this in your something as you need to in your App.

If you encounter any issue in the code, then you can refer to the Solution File that has been enclosed in this article.