Aprende a utilizar la cámara para tomar Fotos en Xamarin Forms

Tomar fotografías desde un dispositivo móvil, es una tarea esencial para cualquier desarrollador Xamarin. Y es que, una gran mayoría de aplicaciones utilizan esta característica hoy en día, ya sea para crear aplicaciones sociales, o bien aplicaciones basadas en tickets, códigos QR, etcétera. Vamos a ver a profundidad, cómo trabajar con la cámara desde Xamarin Forms. Empecemos.

¡Adquiere el Máster en Xamarin Forms!

Antes de iniciar, te invito a visitar la página de la Membresía de mi academia, donde podrás encontrar:

– Cursos y talleres de Xamarin
– Cursos y talleres en C#
– Cursos y talleres de Blazor
– Cursos y talleres de ASP.NET
– Cursos y talleres en muchas otras tecnologías

¡Todo al precio más bajo posible por tiempo limitado!

¡Mira el Máster en Xamarin Forms!

Configurando el proyecto de Xamarin Forms para utilizar la cámara

Llevar a cabo la implementación de una solución, que nos permita tomar fotos desde el dispositivo móvil, implicaría escribir el código nativo para cada plataforma. Afortunadamente, existe hoy en día, un plugin que nos va a permitir implementar dicha solución, de forma rápida y sencilla, se trata del plugin  MediaPlugin.

Lo primero que hay que hacer, es instalar el paquete, en cada uno de los proyectos específicos por plataforma, y en el proyecto .NET Standard.

Recién instalado el paquete, nos saltará un archivo txt, con la configuración a llevar a cabo en cada una de las plataformas. Vamos a ello.

Configurando el proyecto Android para tomar fotografías con la cámara

Este es el proyecto que más configuración conlleva. Lo primero, es ir al archivo MainActivity.cs, para agregar una línea de configuración. Con el código existente, se verá así:

        public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
        {
            Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);
            Plugin.Permissions.PermissionsImplementation.Current.OnRequestPermissionsResult(requestCode, permissions, grantResults);
            base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        } 

De igual forma, en el mismo archivo, en el método OnCreate, deberemos agregar la línea:

CrossCurrentActivity.Current.Init(this, savedInstanceState); 

Una vez configurada la clase MainActivity.cs, debemos agregar, en nuestro archivo AndroidManifest.xml, entre la etiqueta <application>, lo siguiente:

    <application ...>
      <provider android:name="android.support.v4.content.FileProvider"
                android:authorities="${applicationId}.fileprovider"
                android:exported="false"
                android:grantUriPermissions="true">
        <meta-data android:name="android.support.FILE_PROVIDER_PATHS"
                   android:resource="@xml/file_paths"></meta-data>
      </provider>
    </application> 

Por último, vamos a crear una carpeta nueva dentro de la carpeta “Resources”, llamada xml, y dentro de la nueva carpeta, crearemos un archivo tipo xml, llamado file_paths.xml.

El contenido del nuevo archivo, será el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
    <external-files-path name="my_images" path="Pictures" />
    <external-files-path name="my_movies" path="Movies" />
</paths> 

Configurando el proyecto iOS para tomar fotografías con la cámara​

En el caso de iOS, vamos a abrir el archivo info.plist, con el editor xml. Para hacer esto, daremos click derecho sobre el archivo

Seleccionamos la opción “Open With”, y elegimos el editor XML.

Una vez abierto el archivo, vamos a agregar la siguiente información, antes del cierre de la etiqueta </dict>

    <key>NSCameraUsageDescription</key>
    <string>This app needs access to the camera to take photos.</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>This app needs access to photos.</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>This app needs access to microphone.</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>This app needs access to the photo gallery.</string>
</dict> 

Configurando el proyecto iOS para tomar fotografías con la cámara​

El caso de UWP, es el más sencillo, ya que únicamente deberemos habilitar el permiso “Webcam”, como parte del manifiesto de la aplicación.

¿Cómo tomar fotos con el dispositivo móvil con Xamarin Forms?

Ya hemos hecho lo difícil. Ahora, toca el turno de tomar fotografías con el dispositivo móvil. La verdad, esto es muy sencillo. Iniciemos por crear una ContentPage que defina un elemento Image para mostrar la foto tomada, y un botón:

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Image x:Name="Photo" />
        <Button
            x:Name="TakePhoto"
            Grid.Row="1"
            Text="Take Photo" />
    </Grid> 

Ahora, vamos a crear el manejador de eventos del botón, y dentro, bastará con invocar el método “TakePhotoAsync”, para lanzar la cámara, y que nos retorne el resultado. Después de tomar la foto, podremos validar si hemos o no tomado una, y si es así, vamos a asignarle a la propiedad Source el contenido del Stream.

        private async void TakePhoto_Clicked(object sender, EventArgs e)
        {
            var photo =
                await Plugin.Media.CrossMedia.Current
                    .TakePhotoAsync(new StoreCameraMediaOptions());
            if (photo != null)
            {
                Photo.Source = ImageSource.FromStream(() =>
                {
                    return photo.GetStream();
                });
            }
        } 

Este código nos permite tomar una fotografía, y desplegarla en el control Image.

¿Cómo configurar las opciones para la toma de fotografías con Xamarin Forms?

Tal vez te haya llamado la atención, que cuando invocamos el método TakePhotoAsync, nos pide un elemento tipo StoreCameraMediaOptions. Esta clase, contiene una serie de propiedades y métodos, que nos permiten llevar a cabo acciones comunes con el manejo de imágenes.

Podemos ver las mismas, creando una nueva instancia y asignándola a una variable local.

Esto nos abre un abanico de posibilidades en nuestra aplicación. Por ejemplo, supón que tu aplicación, necesita tomar fotografías en baja calidad, para ahorrar espacio en el dispositivo. En este caso, podríamos configurar un PhotoSize = Small, con lo que la diferencia de la imagen original, es bastante visible:

            cameraOptions.PhotoSize = PhotoSize.Small; 

            cameraOptions.PhotoSize = PhotoSize.Full; 

Video demostrativo sobre la toma de fotografías con la Cámara en Xamarin Forms

Aquí te dejo un video sobre todo lo que hemos visto en el artículo.

¡Saludos!