Building Camera App and Gallery in Windows 10

Moving down the button click handler, the first function is the function to capture the images for the users. Well, since the Windows Runtime has us covered, we don't actually need to do anything, we just specify the following two things:

1. The location where to store the file
   StorageFile is created, you can specify other settings for the file too, such as name collision cases.
2. Image encoding format, JPEG, PNG, etc.
   These are required to convert the bytes stream from the capture element to your file system. They are then rendered as a valid image in your machine.
3. Whether to capture a photo when a recording video

The preceding code has two paths, one to be executed if the user is recording a video and the other if the user isn't. One path shows an error message and the other one that interests us creates a new file at the application data folder named "Photo.jpg" and also notices the CreationCollisionOption.GenerateUniqueName being applied, this enables us to handle what happens if a file already exists. In such cases, the file is given a unique name, such as appending an integer to it.

Recording a video

That explained, now the next topic to be covered is the recording of a video. The procedure is similar, all is done by the Windows Runtime in itself is, we don't actually need to write anything at all, just call the function and you're done. But, there are still a few things that we need to consider before actually starting the recording. We still need to pass a few parameters.

1. The storage file where we will store the recording.
   The same as in the preceding, nothing is different. Oh yeah, the format extension only.
2. The encoding in which the video must be recorded.
   You see in the previous section we did the same, we created the image based on a format! The same thing is done in this module too, we create a video encoding to be used, MP4 or WMV. We also pass the quality for the video, 1080p, 720p, etc. These are then used to configure the settings for storing the contents on the file system. The Windows Runtime has us covered, do not worry!
   
   1. private async void alterRecording() {
   2. if (isRecording) {
   3. // Stop recording
   4. await capture.StopRecordAsync();
   5. videoIcon.Foreground = new SolidColorBrush(new Windows.UI.Color() {
   6. A = 255, R = 0, G = 0, B = 0
   7. }); // Black
   8. isRecording = false; // Not recording any more
   9. } else {
   10. encoding = getVideoEncoding(); // Get the current encoding selection.
   12. // Start recording
   13. var file = await(await ApplicationData.Current.LocalFolder.CreateFolderAsync("Videos",
   14. CreationCollisionOption.OpenIfExists)).CreateFileAsync(
   15. string.Format("Recording_{0}-{1}.{2}",
   16. myEncoding,
   17. myQuality, (myEncoding == "MP4") ? "mp4" : "wav"),
   18. CreationCollisionOption.GenerateUniqueName);
   20. await capture.StartRecordToStorageFileAsync(encoding, file);
   22. videoIcon.Foreground = new SolidColorBrush(new Windows.UI.Color() {
   23. A = 255, R = 255, G = 0, B = 0
   24. }); // Red
   25. isRecording = true; // Capturing the video stream.
   26. }
   27. }

This function is executed each time the settings are changed in the UI, please see the command bar and find theComboBox controls that are provided. They are used to change the video encoding and video quality being saved on the machine. Each time the settings are changed, this function is executed to select the current settings for video encodings and quality for the video file being stored. Also, note that these are not all of the settings. I have only provided a few of the quality types and encoding types provided. Others were audio encodings, that I have not discussed in this code, but they are present and they can be used to create profiles for storing the content on the file system. The quality settings also range down to VGA quality, but in most cases, you will require the Auto setting provided only. That can fit for your video controller and other devices so that you do not stumble upon an error.

Preview mirroring

Usually, when you are building the applications for sharing the view on the network, you will need to share the content in a mirror view, usually, users do not like to view themselves in a way that seems opposite to them, inverted in other words. Adding a mirror effect is the same as rotating the image horizontally to 180° that then previews the content as if you were viewing yourself in a mirror. Windows Runtime although provides you with a function to set preview mirroring usingSetPreviewMirroring(true) but that is always recommended, not to be used. Instead, you must always use the FlowDirection property and set it to the RightToLeft value. This would invert the image as required.

Mute/Unmute the microphone

Finally, for this guide, I would like to show the code to mute/unmute the microphone when you are recording the video also. The MediaCapture object provides you with read-only members for controllers of audio and video. You can use them to alter the state of these devices, you can mute/unmute the audio controller and similarly you get to work around with the video controller also.

1. AudioDeviceController
   This member controls the audio controller. In this section, I will be using this member to control the functions of muting and/or unmuting the device.
2. CameraStreamState
   Gets the current stream state for the camera stream.
3. MediaCaptureSettings
   The settings for your capture object.
4. ThermalStatus
   Already discussed previously, it provides you information about the thermal status of your device.
5. VideoDeviceController
   The object that controls the settings for the video controller. I won't explain it here.

For their documentation and other information, please refer to the MediaCapture properties section in the MSDN. In this section, I will use AudioDeviceController to change the state of the muting or unmuting of the microphone.

The preceding XAML code is simply the template that I was talking about previously. This will be filled in with the data that we provide. The ItemTemplate allows us to template the items being added to it. It responds to theItemsSource (or Items; that is often not recommended to be used) property and uses their attributes or properties to fill in the data. Notice the properties, Source="{Binding Path=Path}" or the Text="{Binding Path=Name}". They are the binding properties that I am using, the properties Path or Name will be used in these placeholders and the UI will be built. These are simply the variables holding a reference to the data in that item in the collection.

Twisted words: Why the Source is set in the XAML now?

Previously in the article, I said that we should not consider adding the Source property to the MediaElement in XAML, and now I am adding the Source property right in the XAML. Such a shameful act, isn't it? Well not actually, have a look at the preceding. The Source property is bound to the Binding property, not to a resource. That means that although the chances are that the data will be null. if we bind it successfully the source won't be null and the application will be built. Have a look, the XAML is still complaining, but in template-mode, it doesn't matter! Just go ahead.

1. await keyword will continue the previous function from where we came and will apply a null list to the photos and video control. That is not what we want, but that is exactly what awaits does.
2. If we ignore the await keyword then we are left with IAsyncResult objects, working with which is again a headache.

This would now render the images in a grid rather than stacking every image in a list, vertically.
Usually, for creating the image galleries you would use the grid rather than using the lists. GridViews are actually designed in a way to stack the objects horizontally, rather than stacking them vertically like ListView.

Preview of the application sample

The application's camera page looks as in the following, notice the application's bottom bar, it contains the controls for camera functions and also a new control for the library. The library holds the media that was captured.

Image library

The image library holds the button that can trigger the change in library UI to show the videos or photos. Notice the Red rectangle, I just wanted to point out that the Back button still exists. If the user clicks the button, the button is checked and can be used to change the UI of the application.

Videos library

It displays the videos present in the application's data folders. Good one, the app's button, and the back buttons are clearly visible now. You can add the function to display the videos in a separate video with other media transport controls that allow users to change the state of media, such as to pause the media or to play it.

Points of Interests

The Windows Runtime provides you with the libraries and tools that you require to build applications that use the device's resources, such as webcams, microphones and other similar media content. Windows 10 applications use the Windows Runtime as the framework for programming. The Windows.Media.Capture namespace provides you with the libraries and objects that you can use to capture the photos and recording the videos in your device. For user privacy and security, the Windows Runtime provides you with capabilities that you must have before accessing those resources. This article and the sample associated with it provides you with a basic example of such a program. The application is capable of capturing the images, storing videos and also provides other options, such as muting or unmuting the microphone when capturing the recordings. The application's source code also provides a sample for building the library for representing the stored media such as images and videos. Download the application's source code provided with this article, test it out for other purposes and do comment on what you find in it, vote and share! I would like to hear your feedback to make it even a better guide and sample!

What's next?

I will continue to add more features to the camera app, by actually using it as a consumer for applications. I am sure I will find a few more bugs and I will update the article and source code for the solutions.

Summary