LivePhotosKit JS

Adolfo
Adolfo
Jul 24, 2017 · 4 min read

El pasado 20 de abril Apple presentó a la comunidad de desarrolladores la versión JavaScript del API de Live Photos. Desde ese momento podemos integrar las “fotos animadas” en páginas web.

Pero qué es una LivePhoto

En realidad son dos cosas, una imagen y un vídeo. Ni más ni menos.

Lo que hace la cámara del dispositivo iOS es guardar un pequeño vídeo del momento en el que has hecho la foto, concretamente 3 segundos.

Para poder usar el kit javascript necesitaremos una Live Photo, así que vamos a ver qué tenemos que hacer para obtenerla.

Lo primero es hacerla, eso está claro. Lo segundo es pasar la Live Photo de tu iPhone a Fotos en tu Mac. Una vez que la tenemos en la aplicación Fotos tenemos que exportarla desde el menú Archivo / Exportar / Exportar original sin modificar para 1 foto…

Seleccionaremos una carpeta de destino y tras aceptar podemos ver que se han generado dos archivos, una imagen JPEG y un archivo MOV. Con esto ya podemos empezar a probar LivePhotosKit JS.

Vale. Ahora enséñame un ejemplo.

Para desarrollar con este nuevo API tenemos que estar familiarizados con HTML y JavaScript y disponer de un servidor HTTP.

Hay que decir que la configuración de la Live Photo en la página web la podemos hacer bien mediante atributos HTML o con JavaScript. Para este ejemplo he empleado la segunda opción.

La Live Photo irá situado dentro de una etiqueta DIV a la que tenemos que darle un ancho y un alto, aunque con establecer la altura sería suficiente.

Tras definir la capa tenemos que embeber el nuevo API. Esto lo podemos hacer usando el gestor de paquetes npm o declarando una etiqueta <script> que apunte cl CDN de Apple donde se encuentra alojado el archivo JavaScript.

Lo más importante que hay en este API es el objeto LivePhotosKit.Player, con él podremos configurar y controlar la reproducción de la Live Photo,

Con las propiedades photoSrc y videoSrc indicamos la ruta a los archivos JPEG y MOV respectivamente que hemos extraído de la Live Photo.

La propiedad showNativeControls acepta un valor boleano que mostrará o no el botón de reproducción que se situa en la esquina superior derecha de la imagen.

Cuando el usuario se sitúa sobre él da comienzo la reproducción hasta que esta termine o hasta que el usuario quite el ratón o pulse sobre la imagen, dependiendo de si es un dispositivo móvil o de escritorio.

¿Y qué pasa si no mostramos el control? Pues que tendremos que hacer uso de las funciones que el objeto proporciona para controlar la reproducción del vídeo (play, pause, toggle y stop)

Otra cosa que podemos elegir es la forma en la que queremos que se hagan las transiciones entre la foto y el vídeo, que también influye en la duración.

La encargada esto es la propiedad playbackStyle que puede tener dos valores, LivePhotosKit.PlaybackStyle.FULL si queremos la reproducción completa o LivePhotosKit.PlaybackStyle.HINT para la versión recortada

Entorno de Pruebas

Si intentas probar sin un servidor HTTP de por medio verás que tu Live Photo no aparece por ningún lado, así que no queda otra que usar un servidor web para nuestras pruebas, pero no temas, que abriendo Terminal y escribiendo una línea ya tendrás listo tu servidor.

Error al abrir la página web desde la carpeta. Safari Technology Preview.

Vamos a usar python para arrancar una instancia de SimpleHTTPServer y ponerlo a escuchar en el puerto 9090.

Toca abrir Terminal, situarnos en la carpeta que contiene el código del ejemplo y ejecutar esta comando.

python -m SimpleHTTPServer 9090

Ya podemos abrir el navegador web y apuntar a http://locahost:9090/index.html para ver como, ahora sí, la Live Photo hace acto de presencia.

Una cosa curiosa

Durante el desarrollo del ejemplo he podido ver que Apple lleva una especie de registro de las veces que se instancia su API.

La información que envía es la versión del API de LivePhotosKit JS y el host desde el que se está probando.

Código

Podéis encontrar todo el código usando en el árticulo en este repositorio de GitHub

Adolfo

Written by

Adolfo

Me gustan las camisetas y las zapatillas de deporte // Desarrollo y Diseño para sistemas Apple // Creador de @GetPomodoroApp · @GetAtentoApp · @MADatBUS y más.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade