LivLiv Player: un avatar web ligero con sincronización labial y seguimiento facial
LivLiv Player lleva personajes 2.5D, VRM y PNGTuber al navegador con sincronización labial y seguimiento opcional con cámara web, todo mediante un núcleo pequeño y sin dependencias.
Añadir un personaje adaptable a un sitio web o una transmisión suele implicar elegir entre un entorno de ejecución pesado, una herramienta específica para una plataforma o un conjunto de código de animación personalizado. LivLiv Player adopta un enfoque más compacto: renderiza personajes 2.5D en el navegador y ofrece sincronización labial y seguimiento facial mediante cámara web como funciones opcionales.
El núcleo usa WebGL2, no tiene dependencias y ocupa aproximadamente 30 KB comprimido con gzip. Una sola API puede cargar modelos de LivLiv, avatares VRM y recursos PNGTuber sencillos, lo que hace que el proyecto resulte útil para sitios interactivos, aplicaciones web con estilo de escritorio y superposiciones para transmisiones.
Muestra un personaje en pantalla
Instala el paquete npm y asocia un Player a un lienzo:
npm install @livliv-dev/player
import { Player } from '@livliv-dev/player'
const canvas = document.querySelector('canvas')
const player = new Player(canvas)
await player.load('/characters/k01/')
player.setExpression('smile')
player.act('nod')
player.params.mouthOpen = 0.6 // valor de 0 a 1
Un personaje de LivLiv se puede cargar desde un directorio que contenga model.json y su carpeta textures/, o desde un paquete .livliv. El reproductor ofrece expresiones e identificadores de acciones, así que una aplicación puede presentarlos como botones, vincularlos al estado de una conversación o activarlos desde su propia lógica de animación.
El repositorio del proyecto incluye 21 personajes destacados listos para cargar. El paquete npm contiene el reproductor, no los archivos de los personajes; copia en tu proyecto los personajes que quieras usar y respeta la licencia de cada recurso.
Añade voz y seguimiento con cámara web cuando lo necesites
La voz y el seguimiento se importan por separado, así que las aplicaciones que no los necesiten pueden mantenerlos fuera de la configuración inicial del reproductor. Para reproducir voz con sincronización labial:
import { createSpeech } from '@livliv-dev/player/voice'
const speech = createSpeech(player)
button.onclick = () => {
speech.unlock() // llámalo desde una interacción del usuario para cumplir las políticas de audio del navegador
speech.say('/reply.mp3')
}
El reproductor admite sincronización labial a partir de la entrada del micrófono, audio y vídeo. El seguimiento facial con cámara web usa MediaPipe y se importa por separado; requiere @mediapipe/tasks-vision:
import { startFaceTracking } from '@livliv-dev/player/tracking'
await startFaceTracking(player)
Esta separación es práctica tanto para el rendimiento como para el consentimiento. El acceso a la cámara es una función explícita, no un requisito oculto, y el README indica que el seguimiento se ejecuta en el navegador y que las imágenes de la cámara permanecen en el dispositivo. El reproductor no llama a ningún servicio de IA: renderiza los archivos que se le proporcionan. Como con cualquier función que use la cámara, una aplicación debe explicar claramente por qué solicita acceso y ofrecer una forma de detener el seguimiento.
Una API para avatares 2D y 3D
LivLiv Player también admite imágenes PNGTuber y modelos VRM mediante una interfaz común de reproductor de personajes. Estos formatos tienen distintas necesidades de renderizado, pero pueden integrarse en un flujo común de la aplicación:
import { BodyPlayer } from '@livliv-dev/player/body'
import { PngBody } from '@livliv-dev/player/png'
import { VrmBody } from '@livliv-dev/player/vrm'
const png = new BodyPlayer(canvasA, new PngBody())
await png.load({ closed: '/me-closed.png', open: '/me-open.png' })
const vrm = new BodyPlayer(canvasB, new VrmBody())
await vrm.load('/avatars/me.vrm')
La compatibilidad con VRM requiere three y @pixiv/three-vrm; PNGTuber usa recursos de imagen, normalmente una imagen con la boca cerrada y otra con la boca abierta, además de variantes opcionales con los ojos cerrados. Así, un producto puede empezar con un avatar de imagen sencillo y ofrecer más adelante un modelo con rig completo sin tener que sustituir todo el código que gestiona los personajes.
Elige entre insertar el reproductor o alojarlo por tu cuenta
Para una demostración rápida o una superposición de OBS, LivLiv ofrece un endpoint para iframe con fondo transparente:
<iframe
src="https://livliv.ai/live/k01"
width="480"
height="640"
allow="camera; microphone"
style="border: 0; background: transparent"
></iframe>
Para tener más control, aloja por tu cuenta el reproductor y los recursos de los personajes. Puedes compilar los ejemplos localmente con npm install y npm run build y servirlos desde cualquier servidor estático. La demostración acepta el parámetro ?model= para seleccionar otro personaje, mientras que otros ejemplos muestran cómo cargar PNGTuber y VRM.
Los personajes destacados incluyen imágenes de portada cover.webp de 512 × 768, de unos 50 KB cada una. Pasa una portada con player.load(source, { poster }) para mostrarla mientras se carga el primer fotograma del personaje. Para mostrar algo de inmediato, antes de que se ejecute JavaScript, coloca la portada detrás del lienzo y aplica una transición de aparición al personaje, como hace el ejemplo de carga del repositorio.
Formatos, compatibilidad y límites del proyecto
El reproductor admite el formato de paquetes de LivLiv (.livliv y model.json v4); la documentación describe por separado los paquetes exportados antes de la versión 4, que siguen siendo compatibles. El repositorio incluye la documentación del formato y el esquema JSON. El reproductor no es un entorno de ejecución de Live2D: no usa el software Live2D ni el SDK de Cubism, y no puede leer archivos .moc3 ni .cmo3.
Los requisitos del navegador son WebGL2 y ES2023. Las versiones mínimas indicadas son Chrome y Edge 97+, Firefox 104+ y Safari 15.4+. El proyecto informa de pruebas en navegadores de escritorio actuales, pero todavía no en teléfonos, por lo que conviene validar el rendimiento y la compatibilidad móviles antes del lanzamiento.
Considera las licencias de los personajes como parte de la integración
El código utiliza la licencia Apache-2.0, pero los personajes destacados tienen sus propias condiciones y no están cubiertos por esa licencia. La mayoría están disponibles para proyectos personales y no comerciales con el crédito «Characters: LivLiv (livliv.ai)»; la licencia de los personajes del repositorio prohíbe venderlos, utilizarlos con fines comerciales y emplearlos para entrenar IA. Kujira, Kujira Q y Pen se basan en el trabajo de otras personas y tienen créditos y condiciones independientes. Conserva metadatos del paquete como meta.author y meta.license, y consulta la licencia correspondiente antes de publicar un avatar.
El servicio de creación de personajes de LivLiv usa IA, y el proyecto pide a quienes muestren públicamente personajes creados con LivLiv que indiquen que se usó IA, en lugar de presentar el trabajo como dibujado o riggeado a mano. Estas distinciones importan al crear un producto de cara al público, no solo al elegir un renderizador.
Pruébalo en tu propio entorno
El repositorio incluye código fuente TypeScript, documentación de la API y los formatos, ejemplos y pruebas. Un flujo de trabajo local habitual es:
git clone https://github.com/livliv-dev/player
cd player
npm install
npm run check
npm run build
npm test
Las pruebas unitarias y de fuzz se ejecutan en Node 22.18 o posterior sin necesidad de un navegador. Las pruebas de navegador renderizan los personajes destacados en Chromium sin interfaz; también hay pruebas para los motores Firefox y WebKit, cuyos requisitos de instalación de navegadores y WebGL se documentan en el README.
LivLiv Player encaja bien en aplicaciones que necesitan un avatar web ligero, funciones de interacción opcionales y distintas opciones de formato para los personajes. Su núcleo reducido facilita el uso del renderizador básico, mientras que los módulos independientes de voz y seguimiento permiten añadir funciones más avanzadas solo cuando la experiencia lo requiera.