Skip to content

Commit 5bb738e

Browse files
VladislavAntonyukjfversluisTheCodeTraveler
authored
Camera Video Recording (#583)
* Fix Expander docs for 1567 * Camera Video Recording * Update docs/maui/views/camera-view.md Co-authored-by: Brandon Minnick <13558917+TheCodeTraveler@users.noreply.github.com> * Update camera-view.md --------- Co-authored-by: Gerald Versluis <gerald.versluis@microsoft.com> Co-authored-by: Brandon Minnick <13558917+TheCodeTraveler@users.noreply.github.com>
1 parent 1b13d55 commit 5bb738e

1 file changed

Lines changed: 105 additions & 0 deletions

File tree

docs/maui/views/camera-view.md

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,9 @@ This should be added inside the `<dict>` element. Below shows a more complete ex
8080

8181
<key>NSCameraUsageDescription</key>
8282
<string>PROVIDE YOUR REASON HERE</string>
83+
84+
<key>NSMicrophoneUsageDescription</key>
85+
<string>PROVIDE YOUR REASON HERE</string>
8386
</dict>
8487
</plist>
8588
```
@@ -127,10 +130,15 @@ This should be added inside the `<dict>` element. Below shows a more complete ex
127130

128131
<key>NSCameraUsageDescription</key>
129132
<string>PROVIDE YOUR REASON HERE</string>
133+
134+
<key>NSMicrophoneUsageDescription</key>
135+
<string>PROVIDE YOUR REASON HERE</string>
130136
</dict>
131137
</plist>
132138
```
133139

140+
More details can be found here: https://developer.apple.com/documentation/avfoundation/requesting-authorization-to-capture-and-save-media
141+
134142
### [Windows](#tab/windows)
135143

136144
No setup is required.
@@ -422,6 +430,103 @@ async void HandleCaptureButtonTapped(object? sender, EventArgs e)
422430
}
423431
```
424432

433+
434+
## Video Recording
435+
436+
The `CameraView` provides the ability to record videos. This is possible through both the `StartVideoRecording` method or the `StartVideoRecordingCommand`.
437+
438+
The following example shows how to add a `Button` into the application and setup the following bindings:
439+
440+
- Bind the `Command` property of the `Button` to the `StartVideoRecordingCommand` property on the `CameraView`.
441+
442+
```xaml
443+
<ContentPage
444+
x:Class="CommunityToolkit.Maui.Sample.Pages.CameraViewPage"
445+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
446+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
447+
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
448+
449+
<Grid ColumnDefinitions="*,*,*" RowDefinitions="*,30,30">
450+
<toolkit:CameraView
451+
x:Name="Camera"
452+
Grid.ColumnSpan="3"
453+
Grid.Row="0"
454+
SelectedCamera="{Binding SelectedCamera}"
455+
ZoomFactor="{Binding CurrentZoom}"
456+
CameraFlashMode="{Binding FlashMode}" />
457+
458+
<Slider
459+
Grid.Column="0"
460+
Grid.Row="1"
461+
Value="{Binding CurrentZoom}"
462+
Maximum="{Binding SelectedCamera.MaximumZoomFactor, FallbackValue=1}"
463+
Minimum="{Binding SelectedCamera.MinimumZoomFactor, FallbackValue=1}"/>
464+
465+
<Picker
466+
Grid.Column="1"
467+
Grid.Row="1"
468+
Title="Flash"
469+
IsVisible="{Binding Path=SelectedCamera.IsFlashSupported, FallbackValue=false}"
470+
ItemsSource="{Binding FlashModes}"
471+
SelectedItem="{Binding FlashMode}" />
472+
473+
<Picker
474+
Grid.Column="2"
475+
Grid.Row="1"
476+
Title="Available Resolutions"
477+
ItemsSource="{Binding SelectedCamera.SupportedResolutions}"
478+
SelectedItem="{Binding SelectedResolution}" />
479+
480+
<Button Clicked="StartCameraRecording"
481+
Text="StartVideoRecording" />
482+
483+
<Button Command="{Binding StartVideoRecordingCommand, Source={x:Reference Camera}, x:DataType=toolkit:CameraView}"
484+
CommandParameter="{Binding Stream}"
485+
Text="StartVideoRecording" />
486+
487+
<Button Command="{Binding StopVideoRecordingCommand, Source={x:Reference Camera}, x:DataType=toolkit:CameraView}"
488+
CommandParameter="{Binding Token}"
489+
Text="StopVideoRecording" />
490+
</Grid>
491+
492+
</ContentPage>
493+
```
494+
495+
> [!NOTE]
496+
> You must provide a clean stream in order to record the video.
497+
498+
The following example demonstrates how to use the `StartVideoRecording` method:
499+
500+
> [!NOTE]
501+
> The C# code below uses the Camera field defined above in XAML (`<toolkit:CameraView x:Name="Camera" />`)
502+
503+
```cs
504+
async void StartCameraRecordingWithCustomStream(object? sender, EventArgs e)
505+
{
506+
using var threeSecondVideoRecordingStream = new FileStream("recording.mp4");
507+
await Camera.StartVideoRecording(stream, CancellationToken.None);
508+
509+
await Task.Delay(TimeSpan.FromSeconds(3));
510+
511+
await Camera.StopVideoRecording(CancellationToken.None);
512+
await FileSaver.SaveAsync("recording.mp4", threeSecondVideoRecordingStream);
513+
}
514+
```
515+
516+
In case you want to record a short video and record video in `MemoryStream` you can use the next overload of VideoRecording:
517+
518+
```cs
519+
async void StartCameraRecording(object? sender, EventArgs e)
520+
{
521+
await Camera.StartVideoRecording(CancellationToken.None);
522+
523+
await Task.Delay(TimeSpan.FromSeconds(3));
524+
525+
var threeSecondVideoRecordingStream = await Camera.StopVideoRecording(CancellationToken.None);
526+
await FileSaver.SaveAsync("recording.mp4", threeSecondVideoRecordingStream);
527+
}
528+
```
529+
425530
## Start preview
426531

427532
The `CameraView` provides the ability to programmatically start the preview from the camera. This is possible through both the `StartCameraPreview` method or the `StartCameraPreviewCommand`.

0 commit comments

Comments
 (0)