|
| 1 | +--- |
| 2 | +title: Capture photos and video in a desktop app with the Windows built-in camera UI |
| 3 | +description: Learn how to capture photos and video using the camera UI built into Windows. |
| 4 | +ms.topic: article |
| 5 | +ms.date: 07/23/2024 |
| 6 | +ms.author: drewbat |
| 7 | +author: drewbatgit |
| 8 | +ms.localizationpriority: medium |
| 9 | +#customer intent: As a developer, I want to access the camera in a Windows app using WinUI 3. |
| 10 | +--- |
| 11 | + |
| 12 | +# Capture photos and video in a desktop app with the Windows built-in camera UI |
| 13 | + |
| 14 | +This article describes how to use the [CameraCaptureUI](/windows/windows-app-sdk/api/winrt/microsoft.windows.media.capture) class to capture photos or videos by using the camera UI built into Windows. This feature allows your app to get a user-captured photo or video with just a few lines of code. |
| 15 | + |
| 16 | +If you want to provide your own camera UI, or if your scenario requires more robust, low-level control of the capture operation, then you should use the [MediaCapture](/uwp/api/windows.media.capture.mediacapture) class, and implement your own capture experience. For more information, see [Basic photo, video, and audio capture with MediaCapture](basic-photo-capture.md). |
| 17 | + |
| 18 | +Note that the **CameraCaptureUI** class in the [Microsoft.Windows.Media.Capture](/windows/windows-app-sdk/api/winrt/microsoft.windows.media.capture) namespace is not supported for UWP apps. For information on using the UWP version of this feature, see [Capture photos and video in a UWP app with the Windows built-in camera UI](/windows/uwp/audio-video-camera/capture-photos-and-video-with-cameracaptureui) |
| 19 | + |
| 20 | +## Use the CameraCaptureUI class to capture photos |
| 21 | + |
| 22 | +Create a new instance of **CameraCaptureUI**, passing in the [AppWindow.Id](/windows/windows-app-sdk/api/winrt/microsoft.ui.windowing.appwindow.id) property of your app window. The [PhotoSettings](/windows/windows-app-sdk/api/winrt/microsoft.windows.media.capture.cameracaptureui.photosettings) property allows you to specify some constraints on the captured photo, including the file format and maximum resolution and whether UI allows the user to crop the photo after it's captured. The [VideoSettings](/windows/windows-app-sdk/api/winrt/microsoft.windows.media.capture.cameracaptureui.videosettings) property provides similar properties for video capture, such as the maximum resolution and duration and whether the UI allows the user to trim the video after it's captured. |
| 23 | + |
| 24 | +Call [CaptureFileAsync](/windows/windows-app-sdk/api/winrt/microsoft.windows.media.capture.cameracaptureui.capturefileasync) to launch the camera capture UI asynchronously. Use one of the values from the [CameraCaptureUIMode](/windows/windows-app-sdk/api/winrt/microsoft.windows.media.capture.cameracaptureuimode) to specify whether the UI should allow photo capture, video capture, or both. When **CaptureFileAsync** completes, it will return a [StorageFile](/uwp/api/windows.storage.storagefile) file object containing the captured photo or video. If the returned object is null it means that either the user cancelled the capture operation or an error occurred. |
| 25 | + |
| 26 | +The following example demonstrates launching the **CameraCaptureUI** for photo capture, specifying the image format as PNG and disabling cropping. In this example the captured photo is set as the source for an [Image](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.image) control. |
| 27 | + |
| 28 | +### [C#](#tab/csharp) |
| 29 | + |
| 30 | +```csharp |
| 31 | +var cameraCaptureUI = new CameraCaptureUI(this.AppWindow.Id); |
| 32 | +cameraCaptureUI.PhotoSettings.Format = CameraCaptureUIPhotoFormat.Png; |
| 33 | +cameraCaptureUI.PhotoSettings.AllowCropping = false; |
| 34 | + |
| 35 | +// Capture a photo asynchronously |
| 36 | +StorageFile photo = await cameraCaptureUI.CaptureFileAsync(CameraCaptureUIMode.Photo); |
| 37 | + |
| 38 | +if (photo != null) |
| 39 | +{ |
| 40 | + // Photo capture was successful |
| 41 | +
|
| 42 | + // Show the captured photo in a XAML Image control |
| 43 | + using (IRandomAccessStream fileStream = await photo.OpenAsync(Windows.Storage.FileAccessMode.Read)) |
| 44 | + { |
| 45 | + // Set the image source to the selected bitmap |
| 46 | + BitmapImage bitmapImage = new BitmapImage(); |
| 47 | + await bitmapImage.SetSourceAsync(fileStream); |
| 48 | + iCapturedImage.Source = bitmapImage; |
| 49 | + } |
| 50 | +} else |
| 51 | +{ |
| 52 | + // Photo capture failed or was cancelled |
| 53 | +} |
| 54 | + |
| 55 | +``` |
| 56 | + |
| 57 | +### [C++/WinRT](#tab/cpp) |
| 58 | + |
| 59 | +```cpp |
| 60 | +// Get the WindowId for the window |
| 61 | +Microsoft::UI::WindowId windowId = this->AppWindow().Id(); |
| 62 | + |
| 63 | +// Initialize CameraCaptureUI with a window handle |
| 64 | +winrt::Microsoft::Windows::Media::Capture::CameraCaptureUI cameraUI(windowId); |
| 65 | + |
| 66 | +// Configure Photo Settings |
| 67 | +cameraUI.PhotoSettings().Format(CameraCaptureUIPhotoFormat::Png); |
| 68 | +cameraUI.PhotoSettings().AllowCropping(false); |
| 69 | + |
| 70 | +// Capture a photo asynchronously |
| 71 | +auto photo = co_await cameraUI.CaptureFileAsync(CameraCaptureUIMode::Photo); |
| 72 | + |
| 73 | + |
| 74 | +if (photo != nullptr) |
| 75 | +{ |
| 76 | + // Photo capture was successful |
| 77 | + |
| 78 | + // Show the captured photo in a XAML Image control |
| 79 | + IRandomAccessStream fileStream = co_await photo.OpenAsync(Windows::Storage::FileAccessMode::Read); |
| 80 | + BitmapImage bitmapImage = BitmapImage(); |
| 81 | + co_await bitmapImage.SetSourceAsync(fileStream); |
| 82 | + iCapturedImage().Source(bitmapImage); |
| 83 | + |
| 84 | +} |
| 85 | +else |
| 86 | +{ |
| 87 | + // Photo capture failed or was cancelled |
| 88 | +} |
| 89 | +``` |
| 90 | +
|
| 91 | +--- |
| 92 | +
|
| 93 | +## Use the CameraCaptureUI class to capture videos |
| 94 | +
|
| 95 | +The following example demonstrates launching the **CameraCaptureUI** for video capture, specifying the maximum video as standard definition and disabling trimming. In this example the captured photo is set as the source for an [MediaPlayerElement](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.mediaplayerelement) control. |
| 96 | +
|
| 97 | +### [C#](#tab/csharp) |
| 98 | +
|
| 99 | +```csharp |
| 100 | +var cameraCaptureUI = new CameraCaptureUI(this.AppWindow.Id); |
| 101 | +cameraCaptureUI.VideoSettings.MaxResolution = CameraCaptureUIMaxVideoResolution.StandardDefinition; |
| 102 | +cameraCaptureUI.VideoSettings.AllowTrimming = true; |
| 103 | +StorageFile videoFile = await cameraCaptureUI.CaptureFileAsync(CameraCaptureUIMode.Video); |
| 104 | +
|
| 105 | +if (videoFile != null) |
| 106 | +{ |
| 107 | + // Video capture was successful |
| 108 | +
|
| 109 | + // Show the captured video in a MediaPlayerElement control |
| 110 | + mediaPlayerElement.Source = MediaSource.CreateFromStorageFile(videoFile); |
| 111 | + mediaPlayerElement.MediaPlayer.Play(); |
| 112 | +} |
| 113 | +else |
| 114 | +{ |
| 115 | + // Video capture failed or was cancelled |
| 116 | +} |
| 117 | +``` |
| 118 | + |
| 119 | +### [C++/WinRT](#tab/cpp) |
| 120 | + |
| 121 | +```cpp |
| 122 | +Microsoft::UI::WindowId windowId = this->AppWindow().Id(); |
| 123 | + |
| 124 | +winrt::Microsoft::Windows::Media::Capture::CameraCaptureUI cameraUI(windowId); |
| 125 | + |
| 126 | +cameraUI.VideoSettings().MaxResolution(CameraCaptureUIMaxVideoResolution::StandardDefinition); |
| 127 | +cameraUI.VideoSettings().AllowTrimming(true); |
| 128 | +StorageFile videoFile = co_await cameraUI.CaptureFileAsync(CameraCaptureUIMode::Video); |
| 129 | + |
| 130 | +if (videoFile != nullptr) |
| 131 | +{ |
| 132 | + // Video capture was successful |
| 133 | + |
| 134 | + // Show the captured video in a MediaPlayerElement control |
| 135 | + auto source = winrt::Windows::Media::Core::MediaSource::CreateFromStorageFile(videoFile); |
| 136 | + mediaPlayerElement().Source(MediaSource::CreateFromStorageFile(videoFile)); |
| 137 | + |
| 138 | +} |
| 139 | +else |
| 140 | +{ |
| 141 | + // Photo capture failed or was cancelled |
| 142 | +} |
| 143 | +``` |
| 144 | +
|
| 145 | +--- |
| 146 | +
|
| 147 | +## Move and rename captured media files |
| 148 | +
|
| 149 | +The **CameraCaptureUI** creates randomized names for captured media files, so you may want to rename and move captured files to keep them organized. The following example moves and renames a captured file. |
| 150 | +
|
| 151 | +
|
| 152 | +### [C#](#tab/csharp) |
| 153 | +
|
| 154 | +```csharp |
| 155 | +StorageFile photo = await cameraCaptureUI.CaptureFileAsync(CameraCaptureUIMode.Photo); |
| 156 | +
|
| 157 | +if (photo != null) |
| 158 | +{ |
| 159 | + // Move and rename captured photo |
| 160 | + StorageFolder destinationFolder = |
| 161 | + await ApplicationData.Current.LocalFolder.CreateFolderAsync("ProfilePhotoFolder", |
| 162 | + CreationCollisionOption.OpenIfExists); |
| 163 | +
|
| 164 | + await photo.CopyAsync(destinationFolder, "ProfilePhoto.jpg", NameCollisionOption.ReplaceExisting); |
| 165 | + await photo.DeleteAsync(); |
| 166 | +} |
| 167 | +``` |
| 168 | + |
| 169 | +### [C++/WinRT](#tab/cpp) |
| 170 | + |
| 171 | +```cpp |
| 172 | +auto photo = co_await cameraUI.CaptureFileAsync(CameraCaptureUIMode::Photo); |
| 173 | + |
| 174 | + |
| 175 | +if (photo != nullptr) |
| 176 | +{ |
| 177 | + // Move and rename captured photo |
| 178 | + StorageFolder destinationFolder = co_await ApplicationData::Current().LocalFolder() |
| 179 | + .CreateFolderAsync(L"ProfilePhotoFolder", CreationCollisionOption::OpenIfExists); |
| 180 | + |
| 181 | + co_await photo.CopyAsync(destinationFolder, L"ProfilePhoto.jpg", NameCollisionOption::ReplaceExisting); |
| 182 | + co_await photo.DeleteAsync(); |
| 183 | +} |
| 184 | +``` |
| 185 | + |
| 186 | +--- |
0 commit comments