CameraView

Статья
06/18/2024

Предоставляет CameraView возможность подключаться к камере, отображать предварительный просмотр с камеры и делать фотографии. Он CameraView также предлагает функции для поддержки создания фотографий, управления вспышкой, сохранения захваченного носителя в файл и предоставления различных перехватчиков для событий.

В следующих разделах показано, как использовать CameraView его в приложении .NET MAUI. Они полагаются на использование CameraViewModel. это будет задано BindingContext в качестве примера CameraViewPage.

Инициализация конкретной платформы

CommunityToolkit.Maui.Camera Часть CameraView пакета 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>

В файл необходимо добавить Platforms/iOS/Info.plist следующие записи:

<key>NSCameraUsageDescription</key>
<string>PROVIDE YOUR REASON HERE</string>

Это должно быть добавлено внутри <dict> элемента. Ниже показан более полный пример:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>UIDeviceFamily</key>
    <array>
        <integer>1</integer>
        <integer>2</integer>
    </array>
    <key>UIRequiredDeviceCapabilities</key>
    <array>
        <string>arm64</string>
    </array>
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>UISupportedInterfaceOrientations~ipad</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationPortraitUpsideDown</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>XSAppIconAssets</key>
    <string>Assets.xcassets/appicon.appiconset</string>

    <key>NSCameraUsageDescription</key>
    <string>PROVIDE YOUR REASON HERE</string>
</dict>
</plist>

В файл необходимо добавить Platforms/MacCatalyst/Info.plist следующие записи:

<key>NSCameraUsageDescription</key>
<string>PROVIDE YOUR REASON HERE</string>

Это должно быть добавлено внутри <dict> элемента. Ниже показан более полный пример:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>UIDeviceFamily</key>
    <array>
        <integer>1</integer>
        <integer>2</integer>
    </array>
    <key>UIRequiredDeviceCapabilities</key>
    <array>
        <string>arm64</string>
    </array>
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>UISupportedInterfaceOrientations~ipad</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationPortraitUpsideDown</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>XSAppIconAssets</key>
    <string>Assets.xcassets/appicon.appiconset</string>

    <key>NSCameraUsageDescription</key>
    <string>PROVIDE YOUR REASON HERE</string>
</dict>
</plist>

Базовое использование

Его 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 предоставляет возможность доступа к выбранной в данный момент камере.

В следующем примере показано, как привязать SelectedCamera свойство из CameraView свойства к CameraViewModel свойству с тем же именем (SelectedCamera).

<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 свойство.

Примечание.

Если значение предоставляется за пределами MinimumZoomFactor и MaximumZoomFactor CameraView будет зажато значение, чтобы сохранить его в пределах границ.

В следующем примере показано, как добавить в Slider приложение и настроить следующие привязки:

Maximum Привязывает свойство свойства Slider к MaximumZoomFactor свойствуSelectedCamera.
Minimum Привязывает свойство свойства Slider к MinimumZoomFactor свойствуSelectedCamera.
Привязка Value Slider свойства свойства к CurrentZoom свойству класса CameraViewModel .

Окончательное изменение включает привязку ZoomFactor свойства свойства CameraView к CurrentZoom свойству 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}"
            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 приложение и настроить следующие привязки:

IsVisible Привязывает свойство свойства Picker к IsFlashSupported свойствуSelectedCamera.
ItemsSource Привязать свойство свойства к свойству FlashModes Picker CameraViewModel класса — простой список возможных значений перечисленияCameraFlashMode.
Привязка SelectedItem Picker свойства свойства к FlashMode свойству класса CameraViewModel .

Окончательное изменение включает привязку CameraFlashMode свойства свойства CameraView к FlashMode свойству 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}"
            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 возможность программно изменять разрешение для изображений, захваченных с текущей камеры.

Примечание.

Это не изменит разрешение, отображаемое в предварительном просмотре с камеры.

Это SelectedCamera свойство также предоставляет SupportedResolutions возможность определить, какие разрешения поддерживают текущую камеру.

В следующем примере показано, как добавить в Picker приложение и настроить следующие привязки:

ItemsSource Привязывает свойство свойства Picker к SupportedResolutions свойствуSelectedCamera.
Привязка SelectedItem Picker свойства свойства к SelectedResolution свойству класса CameraViewModel .

Окончательное изменение включает привязку ImageCaptureResolution свойства свойства CameraView к SelectedResolution свойству 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}"
            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 приложение и настроить следующие привязки:

Привязка Command Button свойства свойства к свойству CaptureImageCommand в объекте CameraView.

<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>

Примечание.

Чтобы использовать изображение, которое было записано, CameraView предоставляет MediaCaptured событие.

Запуск предварительной версии

Предоставляет CameraView возможность программного запуска предварительного просмотра с камеры. Это возможно как с помощью метода, так StartCameraPreview и для StartCameraPreviewCommandметода.

В следующем примере показано, как добавить в Button приложение и настроить следующие привязки:

Привязка Command Button свойства свойства к свойству StartCameraPreviewCommand в объекте CameraView.

<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 приложение и настроить следующие привязки:

Привязка Command Button свойства свойства к свойству StopCameraPreviewCommand в объекте CameraView.

<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.

Поделиться через

CameraView

Инициализация конкретной платформы

Базовое использование

Включение пространства имен XAML

Доступ к текущей камере

Управление масштабированием

Режим вспышки камеры

ImageCaptureResolution

CaptureImage

Запуск предварительной версии

Остановка предварительного просмотра

Примеры

API

Дополнительные ресурсы