Skip to content

Commit 064a347

Browse files
Copilotjfversluis
Copilot
and
jfversluis
authored
Improve CameraView documentation: fix sample code bugs and add API reference tables (#633)
* Initial plan * Improve CameraView documentation: fix button texts, code bugs, and add API reference tables Co-authored-by: jfversluis <939291+jfversluis@users.noreply.github.com> * Apply suggestion from @jfversluis --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: jfversluis <939291+jfversluis@users.noreply.github.com> Co-authored-by: Gerald Versluis <gerald.versluis@microsoft.com>
1 parent 0413b46 commit 064a347

1 file changed

Lines changed: 85 additions & 9 deletions

File tree

‎docs/maui/views/camera-view.md‎

Lines changed: 85 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
22
title: CameraView - .NET MAUI Community Toolkit
33
author: bijington
4-
description: "The CameraView provides the ability to connect to a camera, display a preview from the camera and take photos."
5-
ms.date: 05/23/2024
4+
description: "The CameraView provides the ability to connect to a camera, display a preview from the camera, take photos, and record videos."
5+
ms.date: 03/17/2026
66
---
77

88
# CameraView
99

10-
The `CameraView` provides the ability to connect to a camera, display a preview from the camera and take photos. The `CameraView` also offers features to support taking photos, controlling the flash, saving captured media to a file, and offering different hooks for events.
10+
The `CameraView` provides the ability to connect to a camera, display a preview from the camera, take photos, and record videos. The `CameraView` also offers features to support controlling the flash and torch, adjusting zoom, saving captured media to a file, and offering different hooks for events.
1111

1212
The following sections will incrementally build on how to use the `CameraView` in a .NET MAUI application. They rely on the use of a [`CameraViewModel`](https://github.com/CommunityToolkit/Maui/blob/main/samples/CommunityToolkit.Maui.Sample/ViewModels/Views/CameraView/CameraViewViewModel.cs). that will be set as the `BindingContext` of the example [`CameraViewPage`](https://github.com/CommunityToolkit/Maui/blob/main/samples/CommunityToolkit.Maui.Sample/Pages/Views/CameraView/CameraViewPage.xaml).
1313

@@ -355,7 +355,8 @@ The final change involves binding the `ImageCaptureResolution` property of the `
355355
Grid.Row="0"
356356
SelectedCamera="{Binding SelectedCamera}"
357357
ZoomFactor="{Binding CurrentZoom}"
358-
CameraFlashMode="{Binding FlashMode}" />
358+
CameraFlashMode="{Binding FlashMode}"
359+
ImageCaptureResolution="{Binding SelectedResolution}" />
359360

360361
<Slider
361362
Grid.Column="0"
@@ -537,8 +538,8 @@ The following example demonstrates how to use the `StartVideoRecording` method:
537538
```cs
538539
async void StartCameraRecordingWithCustomStream(object? sender, EventArgs e)
539540
{
540-
using var threeSecondVideoRecordingStream = new FileStream("recording.mp4");
541-
await Camera.StartVideoRecording(stream, CancellationToken.None);
541+
using var threeSecondVideoRecordingStream = new FileStream("recording.mp4", FileMode.Create);
542+
await Camera.StartVideoRecording(threeSecondVideoRecordingStream, CancellationToken.None);
542543

543544
await Task.Delay(TimeSpan.FromSeconds(3));
544545

@@ -617,7 +618,7 @@ The following example shows how to add a `Button` into the application and setup
617618
Grid.Column="1"
618619
Grid.Row="2"
619620
Command="{Binding StartCameraPreviewCommand, Source={x:Reference Camera}}"
620-
Text="Capture Image" />
621+
Text="Start Preview" />
621622
</Grid>
622623

623624
</ContentPage>
@@ -703,13 +704,13 @@ The following example shows how to add a `Button` into the application and setup
703704
Grid.Column="1"
704705
Grid.Row="2"
705706
Command="{Binding StartCameraPreviewCommand, Source={x:Reference Camera}}"
706-
Text="Capture Image" />
707+
Text="Start Preview" />
707708

708709
<Button
709710
Grid.Column="2"
710711
Grid.Row="2"
711712
Command="{Binding StopCameraPreviewCommand, Source={x:Reference Camera}}"
712-
Text="Capture Image" />
713+
Text="Stop Preview" />
713714
</Grid>
714715

715716
</ContentPage>
@@ -737,6 +738,81 @@ void HandleStopCameraPreviewButtonTapped(object? sender, EventArgs e)
737738
}
738739
```
739740

741+
## Properties
742+
743+
| Property | Type | Description | Default Value |
744+
|---------|---------|---------|---------|
745+
| `CameraFlashMode` | `CameraFlashMode` | Gets or sets the flash mode for the camera. This is a bindable property. | `CameraFlashMode.Off` |
746+
| `ImageCaptureResolution` | `Size` | Gets or sets the resolution for image capture. Does not affect the preview resolution. This is a bindable property. | `Size.Zero` |
747+
| `IsAvailable` | `bool` | Gets whether the camera is available on the device. This is a read-only bindable property. | `false` |
748+
| `IsBusy` | `bool` | Gets whether the camera is currently busy (e.g. capturing an image or recording). This is a read-only bindable property. | `false` |
749+
| `IsTorchOn` | `bool` | Gets or sets whether the camera torch (flashlight) is enabled. This is a bindable property. | `false` |
750+
| `SelectedCamera` | `CameraInfo?` | Gets or sets the currently selected camera device. This is a bindable property with two-way binding. | `null` |
751+
| `ZoomFactor` | `float` | Gets or sets the camera zoom factor. The value is automatically clamped to the selected camera's `MinimumZoomFactor` and `MaximumZoomFactor`. This is a bindable property. | `1f` |
752+
753+
## Commands
754+
755+
| Command | Command Parameter | Description |
756+
|---------|---------|---------|
757+
| `CaptureImageCommand` | — | Triggers an image capture. The captured image is returned via the `MediaCaptured` event. |
758+
| `StartCameraPreviewCommand` | — | Starts the camera preview display. |
759+
| `StartVideoRecordingCommand` | `Stream` (optional) | Starts video recording. Optionally pass a `Stream` to record into. |
760+
| `StopCameraPreviewCommand` | — | Stops the camera preview display. |
761+
| `StopVideoRecordingCommand` | — | Stops video recording and returns the recorded stream. |
762+
763+
## Events
764+
765+
| Event | Type | Description |
766+
|---------|---------|---------|
767+
| `MediaCaptured` | `EventHandler<MediaCapturedEventArgs>` | Raised when an image is successfully captured. The `MediaCapturedEventArgs` contains a `Media` property of type `Stream` with the captured image data. |
768+
| `MediaCaptureFailed` | `EventHandler<MediaCaptureFailedEventArgs>` | Raised when an image capture fails. The `MediaCaptureFailedEventArgs` contains a `FailureReason` property with the error message. |
769+
770+
## Methods
771+
772+
| Method | Return Type | Description |
773+
|---------|---------|---------|
774+
| `CaptureImage(CancellationToken)` | `Task` | Captures a single image from the camera. The result is delivered via the `MediaCaptured` event. |
775+
| `GetAvailableCameras(CancellationToken)` | `ValueTask<IReadOnlyList<CameraInfo>>` | Retrieves a list of available camera devices on the device. |
776+
| `StartCameraPreview(CancellationToken)` | `Task` | Starts displaying the camera preview. |
777+
| `StartVideoRecording(CancellationToken)` | `Task` | Starts recording video to an internal `MemoryStream`. |
778+
| `StartVideoRecording(Stream, CancellationToken)` | `Task` | Starts recording video to the provided `Stream`. |
779+
| `StopCameraPreview()` | `void` | Stops displaying the camera preview. |
780+
| `StopVideoRecording(CancellationToken)` | `Task<Stream>` | Stops video recording and returns the recorded `Stream`. |
781+
782+
## CameraInfo
783+
784+
The `CameraInfo` class represents information about a camera device available on the system.
785+
786+
| Property | Type | Description |
787+
|---------|---------|---------|
788+
| `DeviceId` | `string` | The unique identifier of the camera device. |
789+
| `IsFlashSupported` | `bool` | Whether the camera supports flash. |
790+
| `MaximumZoomFactor` | `float` | The maximum supported zoom factor. |
791+
| `MinimumZoomFactor` | `float` | The minimum supported zoom factor. |
792+
| `Name` | `string` | The name of the camera device. |
793+
| `Position` | `CameraPosition` | The physical position of the camera on the device (`Front`, `Rear`, or `Unknown`). |
794+
| `SupportedResolutions` | `IReadOnlyList<Size>` | The list of resolutions supported by the camera for image capture. |
795+
796+
## CameraFlashMode
797+
798+
The `CameraFlashMode` enum defines the available flash modes.
799+
800+
| Value | Description |
801+
|---------|---------|
802+
| `Off` | The flash is off and will not be used. |
803+
| `On` | The flash is on and will always be used. |
804+
| `Auto` | The flash will automatically be used based on the lighting conditions. |
805+
806+
## CameraPosition
807+
808+
The `CameraPosition` enum defines the possible physical positions of a camera on a device.
809+
810+
| Value | Description |
811+
|---------|---------|
812+
| `Unknown` | The camera position is unknown. |
813+
| `Front` | The camera is at the front of the device (facing the user). |
814+
| `Rear` | The camera is at the rear of the device (facing away from the user). |
815+
740816
## Examples
741817

742818
You can find an example of this feature in action in the [.NET MAUI Community Toolkit Sample Application](https://github.com/CommunityToolkit/Maui/blob/main/samples/CommunityToolkit.Maui.Sample/Pages/Views/CameraView/CameraViewPage.xaml.cs).

0 commit comments

Comments
 (0)