CameraView
CameraView
は、カメラに接続し、カメラからのプレビューを表示し、写真を撮る機能を提供します。 CameraView
には、写真の撮影、フラッシュの制御、取り込んだメディアのファイルへの保存、イベント用のさまざまなフックの提供をサポートする機能も用意されています。
次のセクションでは、.NET MAUI アプリケーションで CameraView
を使用する方法について段階的に説明します。 これらは、CameraViewModel
の使用に依存しています。 これは例 CameraViewPage
の BindingContext
として設定されます。
プラットフォーム固有の初期化
CameraView
は、CommunityToolkit.Maui.Camera
NuGet パッケージの一部です。 CameraView
を初めて使用するには、「はじめに」セクションを参照してください。 次のプラットフォーム固有の設定が必要です。
次のアクセス許可を Platforms/Android/AndroidManifest.xml
ファイルに追加する必要があります。
<uses-permission android:name="android.permission.CAMERA" />
これは、<manifest>
要素内に追加する必要があります。 以下に、より完全な例を示します。
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true" />
<uses-permission android:name="android.permission.CAMERA" />
</manifest>
基本的な使用方法
CameraView
は、次の方法で .NET MAUI アプリケーションに追加できます。
XAML 名前空間を含める
XAML でこのツールキットを使用するには、次の xmlns
をページまたはビューに追加する必要があります。
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
したがって、以下のコードは、
<ContentPage
x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
</ContentPage>
次のように、xmlns
を含むように変更されます。
<ContentPage
x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
</ContentPage>
<ContentPage
x:Class="CommunityToolkit.Maui.Sample.Pages.CameraViewPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
<Grid ColumnDefinitions="*,*,*" RowDefinitions="*,30">
<toolkit:CameraView
Grid.ColumnSpan="3"
Grid.Row="0" />
</Grid>
</ContentPage>
結果は、デバイスに接続されている既定のカメラの出力をレンダリングする画面になります。
現在のカメラにアクセスする
SelectedCamera
プロパティは、現在選ばれているカメラにアクセスする機能を提供します。
次の例は、CameraView
の SelectedCamera
プロパティを同じ名前 (SelectedCamera
) の CameraViewModel
のプロパティにバインドする方法を示しています。
<ContentPage
x:Class="CommunityToolkit.Maui.Sample.Pages.CameraViewPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
<Grid ColumnDefinitions="*,*,*" RowDefinitions="*,30,30">
<toolkit:CameraView
Grid.ColumnSpan="3"
Grid.Row="0"
SelectedCamera="{Binding SelectedCamera}" />
</Grid>
</ContentPage>
ズームの制御
SelectedCamera
プロパティは、MinimumZoomFactor
と MaximumZoomFactor
の両方のプロパティを提供します。これらは読み取り専用で、現在のカメラに適用できるズームをプログラムで決定する方法を開発者に提供します。 現在のカメラのズームを変更するために、CameraView
には ZoomFactor
プロパティが用意されています。
Note
値が MinimumZoomFactor
と MaximumZoomFactor
の外部に指定された場合、CameraView
は値を範囲内に保持するようにクランプします。
次の例は、アプリケーションに Slider
を追加し、次のバインドを設定する方法を示しています。
Slider
のMaximum
プロパティをSelectedCamera
プロパティのMaximumZoomFactor
にバインドします。Slider
のMinimum
プロパティをSelectedCamera
プロパティのMinimumZoomFactor
にバインドします。Slider
のValue
プロパティをCameraViewModel
クラスのCurrentZoom
プロパティにバインドします。
最後の変更には、CameraView
の ZoomFactor
プロパティを CameraViewModel
クラスの CurrentZoom
プロパティにバインドすることが含まれます。
<ContentPage
x:Class="CommunityToolkit.Maui.Sample.Pages.CameraViewPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
<Grid ColumnDefinitions="*,*,*" RowDefinitions="*,30,30">
<toolkit:CameraView
Grid.ColumnSpan="3"
Grid.Row="0"
SelectedCamera="{Binding SelectedCamera}"
ZoomFactor="{Binding CurrentZoom}" />
<Slider
Grid.Column="0"
Grid.Row="1"
Value="{Binding CurrentZoom}"
Maximum="{Binding SelectedCamera.MaximumZoomFactor, FallbackValue=1}"
Minimum="{Binding SelectedCamera.MinimumZoomFactor, FallbackValue=1}"/>
</Grid>
</ContentPage>
カメラのフラッシュ モード
CameraView
には、デバイスのフラッシュ モードをプログラムで変更する機能が用意されています。使用可能なオプションは次のとおりです。
Off
- フラッシュはオフで、使用されません。On
- フラッシュはオンで、常に使用されます。Auto
- 照明の状態に基づいてフラッシュが自動的に使用されます。
SelectedCamera
プロパティには、現在選ばれているカメラに制御可能なフラッシュがあるかどうかを判断できる IsFlashSupported
も用意されています。
次の例は、アプリケーションに Picker
を追加し、次のバインドを設定する方法を示しています。
Picker
のIsVisible
プロパティをSelectedCamera
プロパティのIsFlashSupported
にバインドします。Picker
のItemsSource
プロパティを、CameraViewModel
クラスのFlashModes
プロパティ (CameraFlashMode
列挙型の使用可能な値の単純なリスト) にバインドします。Picker
のSelectedItem
プロパティをCameraViewModel
クラスのFlashMode
プロパティにバインドします。
最後の変更には、CameraView
の CameraFlashMode
プロパティを CameraViewModel
クラスの FlashMode
プロパティにバインドすることが含まれます。
<ContentPage
x:Class="CommunityToolkit.Maui.Sample.Pages.CameraViewPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
<Grid ColumnDefinitions="*,*,*" RowDefinitions="*,30,30">
<toolkit:CameraView
Grid.ColumnSpan="3"
Grid.Row="0"
SelectedCamera="{Binding SelectedCamera}"
ZoomFactor="{Binding CurrentZoom}"
CameraFlashMode="{Binding FlashMode}" />
<Slider
Grid.Column="0"
Grid.Row="1"
Value="{Binding CurrentZoom}"
Maximum="{Binding SelectedCamera.MaximumZoomFactor, FallbackValue=1}"
Minimum="{Binding SelectedCamera.MinimumZoomFactor, FallbackValue=1}"/>
<Picker
Grid.Column="1"
Grid.Row="1"
Title="Flash"
IsVisible="{Binding Path=SelectedCamera.IsFlashSupported, FallbackValue=false}"
ItemsSource="{Binding FlashModes}"
SelectedItem="{Binding FlashMode}" />
</Grid>
</ContentPage>
ImageCaptureResolution
CameraView
は、現在のカメラからキャプチャされた画像の解像度をプログラムで変更する機能を提供します。
Note
これにより、カメラからのプレビューに表示される解像度は変更されません。
SelectedCamera
プロパティには、現在のカメラがサポートする解像度を決定できるようにする SupportedResolutions
も用意されています。
次の例は、アプリケーションに Picker
を追加し、次のバインドを設定する方法を示しています。
Picker
のItemsSource
プロパティをSelectedCamera
プロパティのSupportedResolutions
にバインドします。Picker
のSelectedItem
プロパティをCameraViewModel
クラスのSelectedResolution
プロパティにバインドします。
最後の変更には、CameraView
の ImageCaptureResolution
プロパティを CameraViewModel
クラスの SelectedResolution
プロパティにバインドすることが含まれます。
<ContentPage
x:Class="CommunityToolkit.Maui.Sample.Pages.CameraViewPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
<Grid ColumnDefinitions="*,*,*" RowDefinitions="*,30,30">
<toolkit:CameraView
Grid.ColumnSpan="3"
Grid.Row="0"
SelectedCamera="{Binding SelectedCamera}"
ZoomFactor="{Binding CurrentZoom}"
CameraFlashMode="{Binding FlashMode}" />
<Slider
Grid.Column="0"
Grid.Row="1"
Value="{Binding CurrentZoom}"
Maximum="{Binding SelectedCamera.MaximumZoomFactor, FallbackValue=1}"
Minimum="{Binding SelectedCamera.MinimumZoomFactor, FallbackValue=1}"/>
<Picker
Grid.Column="1"
Grid.Row="1"
Title="Flash"
IsVisible="{Binding Path=SelectedCamera.IsFlashSupported, FallbackValue=false}"
ItemsSource="{Binding FlashModes}"
SelectedItem="{Binding FlashMode}" />
<Picker
Grid.Column="2"
Grid.Row="1"
Title="Available Resolutions"
ItemsSource="{Binding SelectedCamera.SupportedResolutions}"
SelectedItem="{Binding SelectedResolution}" />
</Grid>
</ContentPage>
CaptureImage
CameraView
は、プログラムで画像キャプチャをトリガーする機能を提供します。 これは、CaptureImage
メソッドまたは CaptureImageCommand
の両方を通じて可能です。
次の例は、アプリケーションに Button
を追加し、次のバインドを設定する方法を示しています。
Button
のCommand
プロパティをCameraView
のCaptureImageCommand
プロパティにバインドします。
<ContentPage
x:Class="CommunityToolkit.Maui.Sample.Pages.CameraViewPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
<Grid ColumnDefinitions="*,*,*" RowDefinitions="*,30,30">
<toolkit:CameraView
x:Name="Camera"
Grid.ColumnSpan="3"
Grid.Row="0"
SelectedCamera="{Binding SelectedCamera}"
ZoomFactor="{Binding CurrentZoom}"
CameraFlashMode="{Binding FlashMode}" />
<Slider
Grid.Column="0"
Grid.Row="1"
Value="{Binding CurrentZoom}"
Maximum="{Binding SelectedCamera.MaximumZoomFactor, FallbackValue=1}"
Minimum="{Binding SelectedCamera.MinimumZoomFactor, FallbackValue=1}"/>
<Picker
Grid.Column="1"
Grid.Row="1"
Title="Flash"
IsVisible="{Binding Path=SelectedCamera.IsFlashSupported, FallbackValue=false}"
ItemsSource="{Binding FlashModes}"
SelectedItem="{Binding FlashMode}" />
<Picker
Grid.Column="2"
Grid.Row="1"
Title="Available Resolutions"
ItemsSource="{Binding SelectedCamera.SupportedResolutions}"
SelectedItem="{Binding SelectedResolution}" />
<Button
Grid.Column="0"
Grid.Row="2"
Command="{Binding CaptureImageCommand, Source={x:Reference Camera}}"
Text="Capture Image" />
</Grid>
</ContentPage>
Note
キャプチャされた画像を使用するために、CameraView
には MediaCaptured
イベントが用意されています。
プレビューの開始
CameraView
は、カメラからプログラムでプレビューを開始する機能を提供します。 これは、StartCameraPreview
メソッドまたは StartCameraPreviewCommand
の両方を通じて可能です。
次の例は、アプリケーションに Button
を追加し、次のバインドを設定する方法を示しています。
Button
のCommand
プロパティをCameraView
のStartCameraPreviewCommand
プロパティにバインドします。
<ContentPage
x:Class="CommunityToolkit.Maui.Sample.Pages.CameraViewPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
<Grid ColumnDefinitions="*,*,*" RowDefinitions="*,30,30">
<toolkit:CameraView
x:Name="Camera"
Grid.ColumnSpan="3"
Grid.Row="0"
SelectedCamera="{Binding SelectedCamera}"
ZoomFactor="{Binding CurrentZoom}"
CameraFlashMode="{Binding FlashMode}" />
<Slider
Grid.Column="0"
Grid.Row="1"
Value="{Binding CurrentZoom}"
Maximum="{Binding SelectedCamera.MaximumZoomFactor, FallbackValue=1}"
Minimum="{Binding SelectedCamera.MinimumZoomFactor, FallbackValue=1}"/>
<Picker
Grid.Column="1"
Grid.Row="1"
Title="Flash"
IsVisible="{Binding Path=SelectedCamera.IsFlashSupported, FallbackValue=false}"
ItemsSource="{Binding FlashModes}"
SelectedItem="{Binding FlashMode}" />
<Picker
Grid.Column="2"
Grid.Row="1"
Title="Available Resolutions"
ItemsSource="{Binding SelectedCamera.SupportedResolutions}"
SelectedItem="{Binding SelectedResolution}" />
<Button
Grid.Column="0"
Grid.Row="2"
Command="{Binding CaptureImageCommand, Source={x:Reference Camera}}"
Text="Capture Image" />
<Button
Grid.Column="1"
Grid.Row="2"
Command="{Binding StartCameraPreviewCommand, Source={x:Reference Camera}}"
Text="Capture Image" />
</Grid>
</ContentPage>
プレビューの停止
CameraView
は、カメラからプログラムでプレビューを停止する機能を提供します。 これは、StopCameraPreview
メソッドまたは StopCameraPreviewCommand
の両方を通じて可能です。
次の例は、アプリケーションに Button
を追加し、次のバインドを設定する方法を示しています。
Button
のCommand
プロパティをCameraView
のStopCameraPreviewCommand
プロパティにバインドします。
<ContentPage
x:Class="CommunityToolkit.Maui.Sample.Pages.CameraViewPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
<Grid ColumnDefinitions="*,*,*" RowDefinitions="*,30,30">
<toolkit:CameraView
x:Name="Camera"
Grid.ColumnSpan="3"
Grid.Row="0"
SelectedCamera="{Binding SelectedCamera}"
ZoomFactor="{Binding CurrentZoom}"
CameraFlashMode="{Binding FlashMode}" />
<Slider
Grid.Column="0"
Grid.Row="1"
Value="{Binding CurrentZoom}"
Maximum="{Binding SelectedCamera.MaximumZoomFactor, FallbackValue=1}"
Minimum="{Binding SelectedCamera.MinimumZoomFactor, FallbackValue=1}"/>
<Picker
Grid.Column="1"
Grid.Row="1"
Title="Flash"
IsVisible="{Binding Path=SelectedCamera.IsFlashSupported, FallbackValue=false}"
ItemsSource="{Binding FlashModes}"
SelectedItem="{Binding FlashMode}" />
<Picker
Grid.Column="2"
Grid.Row="1"
Title="Available Resolutions"
ItemsSource="{Binding SelectedCamera.SupportedResolutions}"
SelectedItem="{Binding SelectedResolution}" />
<Button
Grid.Column="0"
Grid.Row="2"
Command="{Binding CaptureImageCommand, Source={x:Reference Camera}}"
Text="Capture Image" />
<Button
Grid.Column="1"
Grid.Row="2"
Command="{Binding StartCameraPreviewCommand, Source={x:Reference Camera}}"
Text="Capture Image" />
<Button
Grid.Column="2"
Grid.Row="2"
Command="{Binding StopCameraPreviewCommand, Source={x:Reference Camera}}"
Text="Capture Image" />
</Grid>
</ContentPage>
例
この機能の動作状態の例は、.「NET MAUI Community Toolkit サンプル アプリケーション」でご覧になれます。
API
CameraView
のソース コードは、.NET MAUI Community Toolkit の GitHub リポジトリにあります。
.NET MAUI Community Toolkit