Xamarin.Essentials: La Cámara y Galería de Fotos - Xamarin Forms

En este artículo, desarrollaremos una aplicación que permita a los usuarios capturar fotos con la cámara y seleccionar imágenes desde la galería en dispositivos Android utilizando Xamarin.Essentials. A lo largo del artículo, nos enfocaremos en la correcta configuración de permisos, captura de imágenes, y manejo de fotos desde la galería, con ejemplos detallados y bien comentados.

Introducción a Xamarin.Essentials para la Cámara y Galería

Xamarin.Essentials ofrece una forma sencilla de acceder a las funcionalidades de la cámara y galería en una aplicación de Xamarin Forms. Con esta herramienta, puedes capturar fotos con la cámara del dispositivo o seleccionar imágenes desde la galería. La API proporciona una interfaz unificada para acceder a estas funcionalidades tanto en Android como en iOS, aunque en este artículo nos enfocaremos en Android.

Beneficios de usar Xamarin.Essentials

• Facilidad de uso: Proporciona una API sencilla y bien documentada.
• Compatibilidad cruzada: Soporta tanto Android como iOS.
• Abstracción de complejidad: Maneja los permisos y las configuraciones necesarias por ti.

 

Requisitos previos

Antes de comenzar, asegúrate de tener lo siguiente:

• Visual Studio con soporte para Xamarin.
• Un proyecto Xamarin Forms ya creado.
• Xamarin.Essentials instalado mediante NuGet en tu proyecto.

Instalación de Xamarin.Essentials

Para instalar Xamarin.Essentials, sigue estos pasos:

1. Haz clic derecho sobre tu proyecto compartido (Shared Project) en Visual Studio.
2. Selecciona Manage NuGet Packages.
3. Busca e instala Xamarin.Essentials en los proyectos compartidos y Android.

 

Configuración de permisos en Android

Para acceder a la cámara y la galería en Android, es necesario configurar los permisos adecuados en el archivo AndroidManifest.xml. Esto incluye los permisos para acceder a la cámara y al almacenamiento del dispositivo.

Permisos requeridos en Android

• CAMERA: Para acceder a la cámara.
• READ_EXTERNAL_STORAGE: Para leer imágenes desde la galería.
• WRITE_EXTERNAL_STORAGE: Para guardar imágenes capturadas.

Edita el archivo AndroidManifest.xml y añade las siguientes líneas dentro del elemento <manifest>:

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

Habilitar el uso de la cámara en dispositivos Android

Debes especificar en el AndroidManifest.xml que tu aplicación utilizará la cámara del dispositivo:

<uses-feature android:name="android.hardware.camera" android:required="true" />

 

Captura de imágenes con la cámara

La API MediaPicker en Xamarin.Essentials nos permite capturar imágenes directamente desde la cámara. Vamos a implementar una funcionalidad que permita al usuario tomar una foto y mostrarla en la interfaz.

Interfaz de usuario en XAML

En el archivo MainPage.xaml, crearemos una simple interfaz de usuario con un botón para capturar la imagen y un Image para mostrar la foto capturada.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CameraApp.MainPage"
             Title="Captura de Imágenes">
    <StackLayout Padding="20">
        <Button Text="Capturar Foto" Clicked="OnCapturePhotoClicked"/>
        <Image x:Name="capturedImage" HeightRequest="200"/>
    </StackLayout>
</ContentPage>

Código C# para capturar la imagen

Ahora implementemos la lógica para capturar la foto en MainPage.xaml.cs utilizando Xamarin.Essentials.

using Xamarin.Essentials;
using Xamarin.Forms;
using System;
using System.IO;

namespace CameraApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void OnCapturePhotoClicked(object sender, EventArgs e)
        {
            try
            {
                // Solicitar captura de foto
                var photo = await MediaPicker.CapturePhotoAsync();
                if (photo != null)
                {
                    // Guardar la foto en una ubicación temporal y mostrarla
                    var stream = await photo.OpenReadAsync();
                    capturedImage.Source = ImageSource.FromStream(() => stream);

                    // Guardar la imagen en el almacenamiento local si lo deseas
                    var filePath = Path.Combine(FileSystem.CacheDirectory, photo.FileName);
                    using (var fileStream = File.OpenWrite(filePath))
                    {
                        await stream.CopyToAsync(fileStream);
                    }
                }
            }
            catch (FeatureNotSupportedException)
            {
                // La cámara no está soportada en el dispositivo
                await DisplayAlert("Error", "La cámara no es soportada en este dispositivo.", "OK");
            }
            catch (PermissionException)
            {
                // Permisos no otorgados
                await DisplayAlert("Error", "Permisos no otorgados para la cámara.", "OK");
            }
            catch (Exception ex)
            {
                // Otro error ocurrió
                await DisplayAlert("Error", $"Ocurrió un error: {ex.Message}", "OK");
            }
        }
    }
}

• MediaPicker.CapturePhotoAsync(): Inicia la cámara del dispositivo y permite al usuario capturar una foto.
• ImageSource.FromStream(): Convierte el archivo de la foto en una imagen que se puede mostrar en la interfaz de usuario.
• FileSystem.CacheDirectory: Almacenamos temporalmente la foto en el directorio de caché del dispositivo.

 

Selección de fotos desde la galería

La API MediaPicker también permite seleccionar imágenes desde la galería del dispositivo. A continuación, implementaremos la funcionalidad para que el usuario pueda elegir una imagen de su galería.

Actualización de la interfaz de usuario en XAML

Añadiremos otro botón para seleccionar una imagen desde la galería en MainPage.xaml.

<Button Text="Seleccionar Foto de la Galería" Clicked="OnPickPhotoClicked"/>

Código C# para seleccionar la imagen

Implementamos la lógica para seleccionar una foto desde la galería en MainPage.xaml.cs.

private async void OnPickPhotoClicked(object sender, EventArgs e)
{
    try
    {
        // Solicitar selección de foto desde la galería
        var photo = await MediaPicker.PickPhotoAsync();
        if (photo != null)
        {
            // Mostrar la foto seleccionada
            var stream = await photo.OpenReadAsync();
            capturedImage.Source = ImageSource.FromStream(() => stream);
        }
    }
    catch (FeatureNotSupportedException)
    {
        // La selección de fotos no está soportada en el dispositivo
        await DisplayAlert("Error", "No se puede acceder a la galería en este dispositivo.", "OK");
    }
    catch (PermissionException)
    {
        // Permisos no otorgados
        await DisplayAlert("Error", "Permisos no otorgados para acceder a la galería.", "OK");
    }
    catch (Exception ex)
    {
        // Otro error ocurrió
        await DisplayAlert("Error", $"Ocurrió un error: {ex.Message}", "OK");
    }
}

• MediaPicker.PickPhotoAsync(): Permite al usuario seleccionar una foto desde la galería.
• ImageSource.FromStream(): Similar a la captura de fotos, mostramos la imagen seleccionada en la interfaz de usuario.

 

Manejo de errores y casos especiales

Es importante manejar los errores que pueden ocurrir al intentar acceder a la cámara o galería, tales como:

• FeatureNotSupportedException: Ocurre si el dispositivo no soporta la funcionalidad requerida (cámara o galería).
• PermissionException: Ocurre cuando los permisos no han sido otorgados por el usuario.

Ya hemos manejado estos errores en el código anterior mediante bloques try-catch que informan al usuario de manera adecuada.

 

Pruebas en dispositivos Android

Para probar la funcionalidad de cámara y galería:

1. Conecta un dispositivo Android real a tu computadora, ya que los emuladores generalmente no soportan la cámara.
2. Verifica los permisos en el dispositivo Android. Si los permisos no se solicitan correctamente, puedes ir a la configuración de la aplicación y habilitarlos manualmente.
3. Captura imágenes y selecciona fotos desde la galería, y verifica que las imágenes se muestren correctamente en la aplicación.

 

Conclusión

Hemos desarrollado una aplicación funcional que permite capturar fotos con la cámara y seleccionar imágenes desde la galería utilizando Xamarin.Essentials en Xamarin Forms para Android. Además, hemos visto cómo procesar y manejar estas imágenes, incluyendo la gestión de permisos y el manejo de errores. Este enfoque simplifica la integración de funcionalidades nativas en las aplicaciones, aprovechando las potentes APIs de Xamarin.Essentials.