Capturing Image Using Camera And Saving Image In Windows 10 Universal App

In this article we will see how to capture and save an image using camera in Windows 10 universal application.

In this article, you will learn how to use camera API in Windows Universal Platform to capture an image using camera and save it local storage.
 
Let’s see the steps

Create a Universal App using Visual Studio 2015.
 
First of all, we need to enable the following capabilities: “Pictures Library” and “Webcam" in the Package.appxmanifest file as in the following image. By enabling these capabilities allows our apps to browse photos and camera resources on a machine.

click enable

Next, we need to add a button to capture Image and an Image control to show the captured image. Then we will save the image in the location of the current system.

Now go to MainPage.xaml and design your UI according to your wish.
 
Here, I have created an application bar with two buttons: one is for capturing the image and another is for saving the image. Create one image control to preview the captured image.

XAML Code
  1. <Page.BottomAppBar>  
  2.     <AppBar IsOpen="True" IsSticky="True">  
  3.         <StackPanel Orientation="Horizontal">  
  4.             <AppBarButton x:Name="captureBtn" Label="Capture" Icon="Camera" Click="captureBtn_Click"></AppBarButton>  
  5.             <AppBarButton x:Name="saveBtn" Label="Save" Icon="Save" Click="saveBtn_Click"></AppBarButton>  
  6.         </StackPanel>  
  7.      </AppBar>  
  8. </Page.BottomAppBar>  
  9. <Grid Background="{ThemeResourceApplicationPageBackgroundThemeBrush}">  
  10.     <Image Name="captureImage" HorizontalAlignment="Left" Height="503" VerticalAlignment="Top" Width="360" />   
  11. </Grid>  
Now go to code behind page and add the following code on capture button click event to capture the image using camera.
  1. private StorageFilestoreFile;  
  2. private IRandomAccessStream stream;  
  3. private asyncvoidcaptureBtn_Click(object sender, RoutedEventArgs e)  
  4. {  
  5.     CameraCaptureUI capture = newCameraCaptureUI();  
  6.     capture.PhotoSettings.Format = CameraCaptureUIPhotoFormat.Jpeg;  
  7.     capture.PhotoSettings.CroppedAspectRatio = newSize(3, 5);  
  8.     capture.PhotoSettings.MaxResolution = CameraCaptureUIMaxPhotoResolution.HighestAvailable;  
  9.     storeFile = awaitcapture.CaptureFileAsync(CameraCaptureUIMode.Photo);  
  10.     if (storeFile != null)  
  11.     {  
  12.         BitmapImageb image = new BitmapImage();  
  13.         stream = awaitstoreFile.OpenAsync(FileAccessMode.Read);;  
  14.         bimage.SetSource(stream);  
  15.         captureImage.Source = bimage;  
  16.     }  
  17. }  
Next go to save button click event and write the following code to save the captured image.
  1. private async void saveBtn_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     try  
  4.     {  
  5.         FileSavePickerfs = newFileSavePicker();  
  6.         fs.FileTypeChoices.Add("Image", newList < string > ()  
  7.         {  
  8.             ".jpeg"  
  9.         });  
  10.         fs.DefaultFileExtension = ".jpeg";  
  11.         fs.SuggestedFileName = "Image" + DateTime.Today.ToString();  
  12.         fs.SuggestedStartLocation = PickerLocationId.PicturesLibrary;  
  13.         fs.SuggestedSaveFile = storeFile;  
  14.         // Saving the file  
  15.         var s = awaitfs.PickSaveFileAsync();  
  16.         if (s != null)  
  17.         {  
  18.             using(vardataReader = new DataReader(stream.GetInputStreamAt(0)))  
  19.             {  
  20.                 awaitdataReader.LoadAsync((uint) stream.Size);  
  21.                 byte[] buffer = new byte[(int) stream.Size];  
  22.                 dataReader.ReadBytes(buffer);  
  23.                 awaitFileIO.WriteBytesAsync(s, buffer);  
  24.             }  
  25.         }  
  26.     }  
  27.     catch (Exception ex)  
  28.     {  
  29.         varmessageDialog = newMessageDialog("Unable to save now.");  
  30.         awaitmessageDialog.ShowAsync();  
  31.     }  
  32. }  
Now run the app and output can be seen like the following screen:

Demo

output

Source Code.