Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android

Crea un Visor de Video 360 Android Cardboard

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Mientras que la realidad aumentada y virtual son aún relativamente nuevas, se han vuelto populares rápidamente para apps, incluyendo videojuegos y educación. Previamente, te mostré cómo instalar Cardboard usando el SDK de Android y cómo crear un visor panorámico de imagen. Este artículo te mostrará cómo usar video de 360 grados en tus aplicaciones.

Image of beach scene with Google Cardboard

Configuración

Antes de que comiences a construir tu aplicación visor de video, necesitar clonar el SDK Cardboard de Android en tu computadora vía Git. Puedes encontrar instrucciones para esto en el artículo anterior de esta serie.

Para nuestro ejemplo, crea un nuevo proyecto Android con un SDK mínimo de API 19 (KitKat) y usa la plantilla Actividad Vacía.

Una vez que tu proyecto base está creado, necesitarás copiar las carpetas common, commonwidget y videowidget del SDK Cardboard a la raíz de tu proyecto. Una vez que esos directorios son movidos, necesitarás incluirlos como módulos en tu proyecto editando tu archivo settings.gradle para lucir como el siguiente bloque de código.

Finalmente, incluye estas y otras librerías requeridas en tu proyecto agregando las siguientes líneas al módulo build.gradle de tu aplicación bajo el nodo de dependencias.

Notarás que agregamos la librería Protocol Buffers de Google, la cuál ayuda a administrar recursos de tiempo de ejecución en el dispositivo, y ExoPlayer, que es una librería de reproductor de video creada por Google sobre la cuál está construido el componente VrVideoView. Ambas librerías son requeridas por el SDK de Android para funcionar, y habrás notado que la versión de ExoPlayer usada es de la primera liberación, no la segunda, así que podría causar conflictos si usas ExoPlayer v2 en tus propios proyectos.

Después, vamos a querer actualizar nuestro archivo activity_main.xml para nuestro proyecto de ejemplo para incluir un VrVideoView, un SeekBar y un Button con los que trabajaremos después.

Una vez que has terminado de configurar las librerías Cardboard y hemos creado el diseño que usaremos, es tiempo de brincar al código Java.

Trabajando Con Cardboard y Video VR

Antes de que podamos comenzar a escribir todo el código que controla el estado de reproducción y carga de tu archivo de video 360, necesitaremos determinar la fuente de nuestro video. Para este tutorial simplemente vamos a crear una carpeta assets bajo el directorio principal, y colocar un video 360 ahí. Mientras que hay unas cuantas fuentes de videos 360 en línea, he incluido un video corto de dominio público de Sea World regresando a una tortuga de mar al océano en el proyecto GitHub de acompañamiento para este tutorial.

Inicializando y Estructura

Ahora que tienes un archivo de video para reproducir, abre tu clase MainActivity.

Primero necesitarás declarar e inicializar los elementos View que están definidos para el archivo de diseño, así como dos valores booleanos para dar seguimiento a estados silenciados y de reproducción/pausa. Adicionalmente, colocaremos un OnClickListener en nuestro objeto Button de volumen.

Después, crea una nueva clase interna que extienda a VrVideoEventListener. Esta clase tendrá cinco métodos que podemos implementar para nuestro visor de video simple.

También necesitarás implementar SeekBar.OnSeekBarChangeListener en tu clase y crear los trozos de métodos para esa interface.

Una vez que has creado esta nueva clase interna e implementación de SeekBar, asoscialos con tus VrVideoView y SeekBar, respectivamente, al final del método initViews() que fue definido arriba.

Hay una pieza más de configuración que necesita ser tomada en cuenta. Necesitarás manejar el ciclo de vida de la actividad de Android soportando los métodos onPause(), onResume() y onDestroy() para pausar o reanudar la generación de VrVideoView o apagarlo por completo. También necesitarás llevar seguimiento del estado de pausa en estos métodos.

Ahora que la configuración inicial de nuestra clase está completa, podemos continuar a un tema más interesante: cargar un video, controlar la reproducción y personalizar la experiencia de usuario.

Comenzando y Controlando VrVideoView

Debido a que la carga de video 360 puede tomar dese una fracción de segundo hasta varios segundos, querrás manejar la carga de tu video a través de una tarea en el fondo. Comencemos creando una nueva AsyncTask que creará un nuevo objeto VrVideoView.Options, establece el tipo de entrada para empatar con el formato de nuestro video (en el caso de este tutorial, TYPE_MONO), y después cargar nuestro video del directorio assets.

Después, ve a tu método onCreate() y crea una nueva instancia de esta tarea, y después llama a execute() para iniciarla. Mientras hay más que debería hacerse para mantener apropiadamente esta tarea, solo la usaremos de manera local en este método para simplicidad y no nos preocuparemos por consideraciones del ciclo de vida AsyncTask.

En este punto, deberías poder ejecutar tu aplicación y ver el video 360 reproducirse en el visor de video Cardboard. Ahora que está funcionando, agreguemos algo de utilidad para el usuario. Regresa al objeto ActivityEventListener que creaste anteriormente en este tutorial, mientras queremos completar algunos de los métodos. Cuando el video se ha cargado satisfactoriamente, necesitamos establecer el valor máximo para nuestra SeekBar, así como mantener el seguimiento del estado reproducir/pausar de nuestro video.

Mientras el video se reproduce, actualizaremos esa SeekBar a través de onNewFrame(), y reiniciaremos el video a la posición inicial en onCompletion(). Por último, en onClick(), dispararemos nuestro método play/pause.

Mientras que es importante actualizar nuestra Seekbar basado en la reproducción, también vamos a querer permitir al usuario cambiar en donde están en el video interactuando con la SeekBar. Podemos hacer esto usando la interface SeekBar.OnSeekBarChangeListener que hemos implementado anteriormente.

Para completar nuestros controles VrVideoView, necesitaremos implementar los métodos play/pause y de volumen.

En este punto, deberías tener un video interactivo 360 completamente funcional trabajando en tu aplicación.

360 video player shown in app

Sin embargo, si rotas tu dispositivo, notarás el comportamiento indeseado del video reiniciando completamente. Podemos arreglar esto trabajando con onSaveInstanceState() y onRestoreInstanceState() de Android para guardar y reiniciar el estado de nuestro VrVideoView.

Ahora, cuando el dispositivo es rotado, tu video debería regresar a su posición original y tu usuario puede continuar con su experiencia ininterrumpida.

Conclusión

Mientras que hay unos cuantos detalles pequeños que necesitan ser manejados para usar el VrVideoView del SDK de Cardboard, las partes difíciles, como la reproducción actual y optimización, son manejadas por ti por un componente que es fácil de implementar.

Ahora deberías poder agregar videos 360 a tus aplicaciones de medios, proporcionando a tus usuarios con una característica interesante que enriquezca su experiencia. En el siguiente tutorial de esta serie, vamos a enfocarnos en la nueva experiencia VR de Google llamada Daydream, y cómo usar el control eparejado con tus aplicaciones.

Mientras tanto, ¡revisa algunos de nuestros otros tutoriales sobre realidad virtual y aumentada en Android!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.