Compartir a través de

CameraView

  • Artículo

El CameraView proporciona la capacidad de conectarse a una cámara, mostrar una vista previa de la cámara y hacer fotos. El CameraView también ofrece características para admitir la toma de fotos, controlar el flash, guardar medios capturados en un archivo y ofrecer diferentes enlaces para eventos.

Las secciones siguientes se basarán incrementalmente en cómo usar CameraView en una aplicación .NET MAUI. Se basan en el uso de un CameraViewModel. que se establecerá como el BindingContext del ejemplo CameraViewPage.

Inicialización específica de la plataforma

CameraView forma parte del paquete nuget CommunityToolkit.Maui.Camera. Para usar primero el CameraView , consulte la sección Introducción. Se requiere la siguiente configuración específica de la plataforma.

Los permisos siguientes deben agregarse al archivo Platforms/Android/AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />

Esto se debe agregar dentro del elemento <manifest>. A continuación se muestra un ejemplo más completo:

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

Uso básico

El CameraView se puede agregar a una aplicación .NET MAUI de la siguiente manera.

Incluir el espacio de nombres XAML

Para usar el kit de herramientas en XAML, es necesario agregar el siguiente xmlns a la página o vista:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Por lo tanto, el siguiente:

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

Se modificaría para incluir el xmlns de la siguiente manera:

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

El resultado será una superficie que representa la salida de la cámara predeterminada conectada al dispositivo.

Acceso a la cámara actual

La propiedad SelectedCamera proporciona la capacidad de acceder a la cámara seleccionada actualmente.

En el ejemplo siguiente se muestra cómo enlazar la propiedad SelectedCamera del CameraView a una propiedad del CameraViewModel con el mismo nombre (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>

Control Zoom

La propiedad SelectedCamera proporciona un MinimumZoomFactor y una propiedad MaximumZoomFactor, son de solo lectura y proporcionan a los desarrolladores una manera programática de determinar qué zoom se puede aplicar a la cámara actual. Para cambiar el zoom en la cámara actual, el CameraView proporciona la propiedad ZoomFactor.

Nota:

Si se proporciona un valor fuera del MinimumZoomFactor y MaximumZoomFactor el CameraView limitará el valor para mantenerlo dentro de los límites.

En el ejemplo siguiente se muestra cómo agregar un Slider a la aplicación y configurar los siguientes enlaces:

  • Enlace la propiedad Maximum del Slider a la MaximumZoomFactor de la propiedad SelectedCamera.
  • Enlace la propiedad Minimum del Slider a la MinimumZoomFactor de la propiedad SelectedCamera.
  • Enlace la propiedad Value del Slider a la propiedad CurrentZoom en la clase CameraViewModel.

El cambio final implica enlazar la propiedad ZoomFactor del CameraView a la propiedad CurrentZoom de la clase 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>

Modo flash de cámara

El CameraView proporciona la capacidad de cambiar mediante programación el modo flash en el dispositivo, las posibles opciones son:

  • Off: el flash está desactivado y no se usará.
  • On: el flash está encendido y siempre se usará.
  • Auto: el flash se usará automáticamente en función de las condiciones de iluminación.

La propiedad SelectedCamera también proporciona el IsFlashSupported que permite determinar si la cámara seleccionada actualmente tiene un flash que se puede controlar.

En el ejemplo siguiente se muestra cómo agregar un Picker a la aplicación y configurar los siguientes enlaces:

  • Enlace la propiedad IsVisible del Picker a la IsFlashSupported de la propiedad SelectedCamera.
  • Enlace la propiedad ItemsSource del Picker a la propiedad FlashModes de la clase CameraViewModel: una lista sencilla de los posibles valores de la enumeración CameraFlashMode.
  • Enlace la propiedad SelectedItem del Picker a la propiedad FlashMode en la clase CameraViewModel.

El cambio final implica enlazar la propiedad CameraFlashMode del CameraView a la propiedad FlashMode de la clase 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

El CameraView proporciona la capacidad de cambiar mediante programación la resolución de las imágenes capturadas desde la cámara actual.

Nota:

Esto no cambiará la resolución mostrada en la vista previa desde la cámara.

La propiedad SelectedCamera también proporciona SupportedResolutions que permite determinar qué resoluciones admite la cámara actual.

En el ejemplo siguiente se muestra cómo agregar un Picker a la aplicación y configurar los siguientes enlaces:

  • Enlace la propiedad ItemsSource del Picker a la SupportedResolutions de la propiedad SelectedCamera.
  • Enlace la propiedad SelectedItem del Picker a la propiedad SelectedResolution en la clase CameraViewModel.

El cambio final implica enlazar la propiedad ImageCaptureResolution del CameraView a la propiedad SelectedResolution de la clase 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

El CameraView proporciona la capacidad de desencadenar mediante programación una captura de imagen. Esto es posible mediante el método CaptureImage o CaptureImageCommand.

En el ejemplo siguiente se muestra cómo agregar un Button a la aplicación y configurar los siguientes enlaces:

  • Enlace la propiedad Command del Button a la propiedad CaptureImageCommand en el 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>

Nota:

Para usar la imagen capturada, el CameraView proporciona el evento MediaCaptured.

Comenzar previsualización

El CameraView proporciona la capacidad de iniciar mediante programación la vista previa desde la cámara. Esto es posible mediante el método StartCameraPreview o StartCameraPreviewCommand.

En el ejemplo siguiente se muestra cómo agregar un Button a la aplicación y configurar los siguientes enlaces:

  • Enlace la propiedad Command del Button a la propiedad StartCameraPreviewCommand en el 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>

Detener previsualización

La CameraView permite detener mediante programación la vista preliminar de la cámara. Esto es posible mediante el método StopCameraPreview o StopCameraPreviewCommand.

En el ejemplo siguiente se muestra cómo agregar un Button a la aplicación y configurar los siguientes enlaces:

  • Enlace la propiedad Command del Button a la propiedad StopCameraPreviewCommand en el 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>

Ejemplos

Puede encontrar un ejemplo de esta característica en acción en la Aplicación de muestra del kit de herramientas de la comunidad de .NET MAUI.

API

Puede encontrar el código fuente de CameraView en el repositorio de GitHub del Kit de herramientas de la comunidad de .NET MAUI.