
LivePhotosKit JS
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.

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
