How to use Camera in UWP App

Pre-requisite Knowledge

Before we start with the understanding of Hands-On Camera in UWP App, we should know-

1. Introduction to UWP
2. Hands-On on UWP Application
3. Layout Panels

Introduction of Hands-On Camera in UWP App

Hello reader, welcome back to this blog post, hope you’ll find this one helpful and interesting.

Let’s start right with building a basic UI for our Camera Component

1. Same old steps, Open Visual Studio (I’ll use VS 2019, Community Edition for this demo- It’s free)
   
   
   
2. Now let’s give our project a name, then click on the create button
   Note: keep the windows version as default, don’t change anything (recommended)
   
3. Now let’s open the MainPage.xaml file right from the Solutions explorer for the front end UI.
   Place the below code inside of the MainPage.xaml
   Code:
   

   <Grid>
   
     <Grid.RowDefinitions>
       <RowDefinition Height="10*"/>
       <RowDefinition Height="1*"/>
     </Grid.RowDefinitions>
     <Image Grid.Row="0" x:Name="CapturedImage"
            Source="/Assets/SplashScreen.scale-200.png" Stretch="Uniform" />
     <Button Grid.Column="0" Grid.Row="1" Height="50"
             VerticalAlignment="Bottom" HorizontalAlignment="Center"
             Background="{ThemeResource SystemListAccentHighColor}"
             Content="CAPTURE" x:Name="captureBtn" Click="CaptureBtn_Click" />
   
   </Grid>​

   
   

4. Now open the MainPage.xaml.cs file for the backend Code:
   Add the below given using statements in the top of the file:
   

   using Windows.Media.Capture;
   using Windows.Storage;
   using Windows.Storage.Streams;
   using Windows.UI.Xaml.Media.Imaging;​

   
   
   
   Now add the word “async” before the “void” word in the definition of the CaptureBtn_Click Method. Then place the below code inside it.

   Code:

   CameraCaptureUI captureUI = new CameraCaptureUI();
   captureUI.PhotoSettings.Format = CameraCaptureUIPhotoFormat.Jpeg;
   captureUI.PhotoSettings.CroppedSizeInPixels = new Size(200, 200);
   // Open the Camera to capture the Image
   StorageFile photo = await captureUI.CaptureFileAsync(CameraCaptureUIMode.Photo);
   // If the capture gets cancelled by user, do nothing
   if (photo == null)
   {
     // User cancelled photo capture
     return;
   }
   // Else, display the captured Image in the Placeholder
   else
   {
     BitmapImage bitmapImage = new BitmapImage();
     using (IRandomAccessStream photoStream = await photo.OpenAsync(FileAccessMode.Read))
     {
       bitmapImage.SetSource(photoStream);
     }
     CapturedImage.Source = bitmapImage;
   }
   

   
   
5. Now let’s run the App and see what happens. Press F5 to run the App.
   
   
   

In this post, we didn’t learn to store that Captured image to the device, as it would way beyond the current scope.
Hope you liked this article stay tuned for further posts like this

Note: If you’re having some camera permissions issue, then open the Package.appxmanifest file, then go to the Capabilities tab, scroll down to end and enable Webcam
<IMG>

Conclusion - In this article, we have learned about:

1. 1. Hands-On Camera in UWP App
   2. Integrate the Camera permissions in the app