Teravision - Desarrollo de la TeraApp

En estos días se está llevando a cabo en el Centro de Experimentación del Teatro Colón la obra Teravisión, ideada y dirigida por Edgardo Mercado y Augusto Zanela. Esta especie de "instalación teatral" plantea un recorrido en completa oscuridad, donde los espectadores ven en sus celulares (mediante una aplicación) video en vivo de las distintas salas, captados por una red de cámaras infrarrojas. Moldeo Interactive estuvo a cargo del desarrollo tanto del sistema de cámaras infrarrojas y del servidor, como así también del desarrollo de una App para dispositivos Android y iOS que sea capas de recibir el Streaming, reproducir audios, video e imágenes. En esta ocasión, vengo a hablar de esta segunda instancia, sobre cómo desarrollamos la aplicación.

El desarrollo comenzó con Angular, nos interesaba tener una App híbrida (es decir, que funcione en Android y en iOS al mismo tiempo, sin tener que programar dos aplicaciones) ya que sólo contábamos con un mes para el desarrollo, las pruebas y el ensayo. De ese modo, la integración Angular con Cordova se convierte en una opción excelente, sin perder gran rendimiento (el webview de ambos sistemas permite un desarrollo ágil y con resultados satisfactorios). Cerca de los últimos ensayos, este desarrollo tomó una nueva dimensión ya que las Apps se ejecutan (actualmente) en el navegador de cada teléfono. Con esto pudimos cubrir una cuota baja pero existente de teléfonos Windows Phone, y se democratizó un poco más la instalación en todas las plataformas.

En Cordova se emplearon diversos plugins dedicados parar llevar la App a otro nivel, como device-motion para obtener datos del acelerómetro, o WifiWizard para datos de la Red (el cual, a pesar de estar discontinuado, funciona mejor que su proyecto sucesor WifiWizard2). Naturalmente que para la versión que ejecuta en el navegador estos plugins no funcionan, pero el device-motion puede reemplazarse con el listener ondevicemotion, nativo de JavaScript. En el caso del WifiWizard realmente no nos preocupó demasiado, ya que la única red disponible en el espacio eran las de TERAVISION. También implementamos un plugin para detectar los iBeacons, pero eso es material para otro artículo.

En el caso del APK, la compatibilidad con Android anteriores a la versión 5 fue un verdadero desafío. Como muchos saben, la versión 5 utiliza un WebView que internamente es un Chrome, actualizable. Pero en versiones anteriores el WebView es un navegador Webkit que se quedó estancado en el tiempo. Para todo esto, existe un sistema que vuelve compatible los Android a partir del 4., mediante la inserción de un núcleo de Chrome en la App. Esto suma alrededor de 50 mb a la App, pero permite que un buen número de dispositivos disfruten de la aplicación. Si bien al momento del estreno preferimos utilizar la versión en navegador (más que nada por la agilidad que nos provee) fue interesante la investigación y el desarrollo de la App con el CrossWalker.

¿Cómo captabamos el Streaming? Sencillamente reemplazando la imagen de fondo de un DIV por la imagen del streaming en cuestión a la frecuencia de FPS, la cual controlamos desde el server dependiendo la cantidad de público. Del mismo modo, los contenidos como Audios, Videos e Imágenes se mandan a través del server, haciendo que la aplicación APK pese tan solo 7 mb y en su versión de navegador menos de 500 kb.

Galería de capturas de la App:

Próximamente estaremos escribiendo sobre el desarrollo de la red de cámaras infrarrojas, streaming de video, servidor dedicado, el uso de beacons para instalaciones museológicas y distintas experiencias del uso de tecnología en espacios como el CETC. 

Esta semana serán las últimas 4 funciones de Teravisión, los días 15, 16, 17 y 18 de Marzo, en el CETC.