Custom Camera Dialog For Windows Using UWP

Introduction

Steps

• Create New Project by Selecting New Project à Universal Windows (UWP App) and click “Next”.
  
  
  
  
• Then configure your new project by entering the required details like Project name and click “Create” button to create your UWP project.
  
  
  

• Create a custom content dialog by selecting “Add Item” à “Content Dialog” and named as “Camera Dialog”.
• Then add the Capture Element in designer of the page as like below.
  
  1. <ContentDialog
  2. x:Class="UwpCamSample.CameraDialog"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:local="using:UwpCamSample"
  6. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8. mc:Ignorable="d"
  9. Title="Camera Dialog"
  10. PrimaryButtonText="Capture"
  11. SecondaryButtonText="Close"
  12. PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
  13. SecondaryButtonClick="ContentDialog_SecondaryButtonClick"
  14. Margin="20">
  16. <Grid>
  17. <CaptureElement Name="PreviewControl" Stretch="Uniform"/>
  18. </Grid>
  19. </ContentDialog>

• We will use MediaCapture to capture CaptureElement result.
• We will use DisplayRequest to detect the display interaction to extend battery power.
• Start the preview for the capture element by initializing the media capture elements like in below code.
  
  1. private async Task StartPreviewAsync()
  2. {
  3. try
  4. {
  5. mediaCapture = new MediaCapture();
  6. await mediaCapture.InitializeAsync();
  7. displayRequest.RequestActive();
  8. DisplayInformation.AutoRotationPreferences = DisplayOrientations.Landscape;
  9. }
  10. catch (UnauthorizedAccessException)
  11. {
  12. return;
  13. }
  15. try
  16. {
  17. PreviewControl.Source = mediaCapture;
  18. await mediaCapture.StartPreviewAsync();
  19. isPreviewing = true;
  20. }
  21. catch (System.IO.FileLoadException)
  22. {
  23. mediaCapture.CaptureDeviceExclusiveControlStatusChanged += _mediaCapture_CaptureDeviceExclusiveControlStatusChanged;
  24. }
  25. }

• The app should have camera permission and we can process Camera API permission like below.
  
  1. private async void _mediaCapture_CaptureDeviceExclusiveControlStatusChanged(MediaCapture sender, MediaCaptureDeviceExclusiveControlStatusChangedEventArgs args)
  2. {
  3. if (args.Status == MediaCaptureDeviceExclusiveControlStatus.SharedReadOnlyAvailable)
  4. {
  5. //ShowMessageToUser("The camera preview can't be displayed because another app has exclusive access");
  6. }
  7. else if (args.Status == MediaCaptureDeviceExclusiveControlStatus.ExclusiveControlAvailable && !isPreviewing)
  8. {
  9. await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, async () =>
  10. {
  11. await StartPreviewAsync();
  12. });
  13. }
  14. }

• The camera preview should be reset or disposed when the popup/dialog is closed.
  
  1. if (mediaCapture != null)
  2. {
  3. if (isPreviewing)
  4. {
  5. await mediaCapture.StopPreviewAsync();
  6. }
  8. await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
  9. {
  10. PreviewControl.Source = null;
  11. if (displayRequest != null)
  12. {
  13. displayRequest.RequestRelease();
  14. }
  16. mediaCapture.Dispose();
  18. });
  19. }

• To save the captured image to user defined path, will use StorageLibrary API and save the files to Pictures.
• Use the below code snippet to save the output of the Camera Capture Element.
  
  1. var myPictures = await Windows.Storage.StorageLibrary.GetLibraryAsync(Windows.Storage.KnownLibraryId.Pictures);
  2. StorageFile file = await myPictures.SaveFolder.CreateFileAsync("photo.jpg", CreationCollisionOption.GenerateUniqueName);
  4. using (var captureStream = new InMemoryRandomAccessStream())
  5. {
  6. await mediaCapture.CapturePhotoToStreamAsync(ImageEncodingProperties.CreateJpeg(), captureStream);
  8. using (var fileStream = await file.OpenAsync(FileAccessMode.ReadWrite))
  9. {
  10. var decoder = await BitmapDecoder.CreateAsync(captureStream);
  11. var encoder = await BitmapEncoder.CreateForTranscodingAsync(fileStream, decoder);
  13. var properties = new BitmapPropertySet {
  14. {
  15. "System.Photo.Orientation", new BitmapTypedValue(PhotoOrientation.Normal, PropertyType.UInt16)
  16. }
  17. };
  18. await encoder.BitmapProperties.SetPropertiesAsync(properties);
  19. await encoder.FlushAsync();
  20. }
  21. }

Output