Curso Básico de Xamarin: Utilizando la cámara en Xamarin.Forms
En este tutorial aprenderás a integrar el uso de la cámara en tus apps móviles con Xamarin para tomar fotos y videos, así como poderlos seleccionar desde la galería.
NOTA: El código fuente de este proyecto está disponible en mi repositorio de GitHub
Paso 1. Abre Visual Studio 2019 y selecciona Crear un nuevo proyecto.
Paso 2. Busca el tipo de proyecto Mobile App (Xamarin.Forms), selecciónala y da clic en Siguiente:
Paso 3. En el nombre de proyecto escribe DemoCamara, asegúrate de seleccionar una ruta corta para la ubicación de tu solución y da clic en Crear:
Paso 4. Selecciona la plantilla Blank (proyecto vacío), selecciona las plataformas que deseas probar y da clic en OK:
Paso 5. Espera a que se genere la solución con los proyectos .NET Standard y el de cada plataforma. Ahora, da clic derecho en el nombre de la solución y selecciona Administrar paquetes Nuget para la solución:
Paso 6. En la sección Actualizaciones, elige todos los paquetes disponibles y da clic en el botón Actualizar a fin de tener la última versión (en especial, de Xamarin.Forms y los paquetes de Xamarin.Android.Support):
Paso 7. Busca e instala el paquete Xam.Plugin.Media, el cual ya tiene implementada la funcionalidad para tomar fotos y video por medio de la cámara; también permite seleccionar estos elementos desde la galería o carpeta pública de Imágenes del dispositivo.
Paso 8. Una vez instalado el plugin, observarás que se muestra un archivo README, el cual contiene instrucciones específicas que debes realizar en cada proyecto de plataforma que desees implementar. Lee detenidamente el archivo, en los siguientes pasos realizaremos lo indicado.
Paso 9. En primer lugar, abre el archivo MainActivity.cs localizado en el proyecto DemoCamara.Android. En el método OnCreate agrega la siguiente instrucción para inicializar el plugin:
Paso 10. En el mismo archivo, en el método OnRequestPermissionsResult agrega el código indicado en la imagen:
Paso 11. Ahora abre las Propieades del proyecto DemoCamara.Android dando doble clic sobre dicho elemento:
Paso 12. En la sección Android.Manifest agrega los permisos READ_EXTERNAL_STORAGE y WRITE_EXTERNAL_STORAGE.
Paso 13. También agrega el permiso de la cámara:
Paso 14. Ahora expande Properties para acceder al archivo AndroidManifest.xml y da doble clic sobre este elemento:
Paso 15. Dentro de la sección <application>, escribe el código mostrado a continuación. TIP: puedes copiarlo desde el archivo README.md del paso 8
Paso 16. Ahora, dentro de la carpeta Resources del proyecto DemoCamara.Android crea la carpeta xml:
Paso 17. En esta carpeta, agrega un nuevo archivo llamado file_paths.xml con el contenido mostrado en la imagen. TIP: Este código está disponible en el archivo README del Paso 8:
Paso 18. En la raiz del proyecto DemoCamara.Android agrega una nueva clase llamada MainApplication.cs
Paso 19. El código de dicha clase se muestra a continuación:
Paso 20. Si deseas implementar la parte de iOS, en el proyecto DemoCamara.iOS modifica el archivo Info.plist para agregar las entradas mostradas en la imagen. TIP: Puedes obtenerlas en el archivo README del Paso 8:
Paso 21. Para el caso del proyecto DemoCamara.UWP, solo basta con agregar la capacidad de Webcam. Para ello, primero localiza las Properties del proyecto y da doble clic.
Paso 22. Da clic en Package Manifest:
Paso 23. En la sección Capabilities, marca Webcam y guarda los cambios.
Paso 24. Después de toda esta configuración, estamos listos para escribir código. Agrega 3 carpetas al proyecto DemoCamara: Services, ViewModels y Views:
Paso 25. En la carpeta Services, crea la clase CameraService con el código mostrado a continuación; se incluyen métodos para tomar una foto con la cámara, seleccionar una imagen de la galería, grabar un video con la cámara y seleccionar uno de la galería; además, se considera el uso de permisos para validar que el usuario autorice el uso de este dispositivo en la app:
Paso 26. Ahora, en la carpeta ViewModels crea la clase BaseViewModel, la cual contiene el código mostrado a continuación:
Paso 27. En la misma carpeta, crea la clase PhotoViewModel, cuyo código hace uso del servicio creado anteriormente en cuanto al uso de la cámara y galería para mostrar fotografías, y se muestra a continuación:
Paso 28. De manera similar, en la misma carpeta agregamos una nueva clase llamada VideoViewModel que llama a los métodos del servicio para mostrar video a partir de la cámara o de uno ya existente:
Paso 29. El último ViewModel simplemente se ocupará para navegar a las vistas respectivas a los ViewModels anteriores; su nombre es MenuViewModel y contiene el siguiente código:
Paso 30. Para mostrar el video seleccionado de la galería o capturado con la cámara, podemos ayudarnos de dos paquetes Nuget llamados Plugin.MediaManager y Plugin.MediaManager.Forms. Instálalos en todos los proyectos:
Paso 31. Así como lo hicimos para el Xam.Media.Plugin, tenemos que configurar este nuevo plugin en nuestros proyectos. Descuida, la implementación es más sencilla. Inicializa el plugin tal como se indica en las imágenes siguientes:
NOTA MUY IMPORTANTE. En el repositorio del plugin se indican algunas consideraciones muy importantes que debes tomar en cuenta. Entre otras, que la aplicación debe compilarse contra Android SDK v28 o superior, establecer la herramienta Dex en D8 y activar las herramientas de compilación Aapt2. Tómalo en cuenta en caso de que tengas un error al momento de compilar y ejecutar la aplicación (sobre todo si la estás probando en un dispositivo físico).
Por ejemplo, a continuación se muestra cómo establecer el compilador Dex en D8 dentro del manifiesto de Android en caso de que al compilar recibas un error extraño tipo “java/lang/Object;I)V: defining a default interface method requires –min-sdk-version >= 24 (currently 13) for interface methods: com.google.android.exoplayer2.Player$EventListener.onTimelineChanged : (Lcom/google/android/exoplayer2/Timeline;Ljava/lang/Object;I)V ”
Paso 32. Pasemos al código de interfaz de usuario. En la carpeta Views agrega una ContentPage llamada PhotoView.
Paso 33. El código de la vista se muestra a continuación. Es una interfaz muy sencilla que contiene un Image (para mostrar la foto capturada o seleccionada) y dos botones para las acciones; por supuesto, se enlaza el BindingContext a PhotoViewModel.
Paso 34. De manera similar, agrega otra ContentPage llamada VideoView, la cual contiene el código necesario para mostrar un reproductor de video junto con los botones para las acciones, enlazando el BindingContext a VideoViewModel.
Paso 35. La última ContentPage a implementar se llama MenuView y únicamente tiene dos botones para navegar a las vistas anteriores. El código es el siguiente:
Paso 36. A diferencia de las dos vistas anteriores, para MenuView si hay code-behind, aunque es muy sencillo, pues solo se establece el BindingContext pasando de parámetro el objeto Navigation a MenuViewModel:
Paso 37. El último código es en App.xaml.cs y simplemente es para indicar que MenuView es la página inicial de navegación de nuestra app:
Paso 38. Compila y ejecuta la aplicación, verificando su correcto funcionamiento:
En esta sesión aprendiste a integrar la cámara en una app móvil para capturar una fotografía o video y mostrarlos en la aplicación. De manera alternativa, el usuario puede seleccionar un elemento multimedia de la carpeta pública y mostrarlo en caso de que no desee utilizar la cámara del dispositivo.
Para más información sobre la funcionalidad de los paquetes Nuget que agregaste, visita el repositorio respectivo:
