次の方法で共有


CameraView

CameraView は、カメラに接続し、カメラからのプレビューを表示し、写真を撮る機能を提供します。 CameraView には、写真の撮影、フラッシュの制御、取り込んだメディアのファイルへの保存、イベント用のさまざまなフックの提供をサポートする機能も用意されています。

次のセクションでは、.NET MAUI アプリケーションで CameraView を使用する方法について段階的に説明します。 これらは、CameraViewModel の使用に依存しています。 これは例 CameraViewPageBindingContext として設定されます。

プラットフォーム固有の初期化

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 プロパティは、現在選ばれているカメラにアクセスする機能を提供します。

次の例は、CameraViewSelectedCamera プロパティを同じ名前 (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 プロパティは、MinimumZoomFactorMaximumZoomFactor の両方のプロパティを提供します。これらは読み取り専用で、現在のカメラに適用できるズームをプログラムで決定する方法を開発者に提供します。 現在のカメラのズームを変更するために、CameraView には ZoomFactor プロパティが用意されています。

Note

値が MinimumZoomFactorMaximumZoomFactor の外部に指定された場合、CameraView は値を範囲内に保持するようにクランプします。

次の例は、アプリケーションに Slider を追加し、次のバインドを設定する方法を示しています。

  • SliderMaximum プロパティを SelectedCamera プロパティの MaximumZoomFactor にバインドします。
  • SliderMinimum プロパティを SelectedCamera プロパティの MinimumZoomFactor にバインドします。
  • SliderValue プロパティを CameraViewModel クラスの CurrentZoom プロパティにバインドします。

最後の変更には、CameraViewZoomFactor プロパティを 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 を追加し、次のバインドを設定する方法を示しています。

  • PickerIsVisible プロパティを SelectedCamera プロパティの IsFlashSupported にバインドします。
  • PickerItemsSource プロパティを、CameraViewModel クラスの FlashModes プロパティ (CameraFlashMode 列挙型の使用可能な値の単純なリスト) にバインドします。
  • PickerSelectedItem プロパティを CameraViewModel クラスの FlashMode プロパティにバインドします。

最後の変更には、CameraViewCameraFlashMode プロパティを 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 を追加し、次のバインドを設定する方法を示しています。

  • PickerItemsSource プロパティを SelectedCamera プロパティの SupportedResolutions にバインドします。
  • PickerSelectedItem プロパティを CameraViewModel クラスの SelectedResolution プロパティにバインドします。

最後の変更には、CameraViewImageCaptureResolution プロパティを 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 を追加し、次のバインドを設定する方法を示しています。

  • ButtonCommand プロパティを CameraViewCaptureImageCommand プロパティにバインドします。
<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 を追加し、次のバインドを設定する方法を示しています。

  • ButtonCommand プロパティを CameraViewStartCameraPreviewCommand プロパティにバインドします。
<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 を追加し、次のバインドを設定する方法を示しています。

  • ButtonCommand プロパティを CameraViewStopCameraPreviewCommand プロパティにバインドします。
<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 リポジトリにあります。