LivLiv Player : un avatar web léger avec synchronisation labiale et suivi du visage

Ajouter un personnage réactif à un site web ou à un stream implique souvent de choisir entre un moteur lourd, un outil propre à une plateforme ou un ensemble de code d’animation personnalisé. LivLiv Player adopte une approche plus compacte : il affiche des personnages 2.5D dans le navigateur et propose, en option, la synchronisation labiale et le suivi du visage par webcam.

Le cœur du projet utilise WebGL2, ne comporte aucune dépendance et pèse environ 30 Ko après compression gzip. Une seule API permet de charger des modèles LivLiv, des avatars VRM et de simples ressources PNGTuber, ce qui rend le projet utile pour les sites interactifs, les applications web de type bureau et les incrustations de stream.

Afficher un personnage

Installez le package npm et associez un Player à un canvas :

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 // valeur de 0 à 1

Un personnage LivLiv peut être chargé depuis un répertoire contenant model.json et son dossier textures/, ou depuis un package .livliv. Les expressions et les identifiants d’action sont accessibles via le lecteur : une application peut donc les présenter sous forme de boutons, les associer à l’état d’une conversation ou les déclencher avec sa propre logique d’animation.

Le dépôt du projet comprend 21 personnages mis en avant, prêts à être chargés. Le package npm contient le lecteur, mais pas les fichiers des personnages ; copiez dans votre projet ceux que vous comptez utiliser et respectez la licence de chaque ressource.

Ajouter la parole et le suivi par webcam au besoin

La voix et le suivi sont importés séparément. Les applications qui n’en ont pas besoin peuvent donc les exclure de la configuration initiale du lecteur. Pour lire de la parole avec synchronisation labiale :

import { createSpeech } from '@livliv-dev/player/voice'

const speech = createSpeech(player)

button.onclick = () => {
  speech.unlock() // à appeler lors d’une interaction utilisateur pour respecter les règles audio du navigateur
  speech.say('/reply.mp3')
}

Le lecteur prend en charge la synchronisation labiale à partir d’une entrée microphone, d’un fichier audio ou d’une vidéo. Le suivi du visage par webcam utilise MediaPipe et s’importe séparément ; il nécessite @mediapipe/tasks-vision :

import { startFaceTracking } from '@livliv-dev/player/tracking'

await startFaceTracking(player)

Cette séparation est pratique pour les performances comme pour le consentement. L’accès à la caméra est une fonctionnalité explicite, et non une exigence cachée ; le README précise que le suivi s’exécute dans le navigateur et que les images de la caméra restent sur l’appareil. Le lecteur lui-même ne fait appel à aucun service d’IA : il affiche les fichiers qu’on lui fournit. Comme pour toute fonctionnalité utilisant la caméra, une application doit expliquer clairement pourquoi elle demande l’accès et permettre d’arrêter le suivi.

Une API pour les avatars 2D et 3D

LivLiv Player prend également en charge les images PNGTuber et les modèles VRM via une interface de lecteur de personnage. Ces formats nécessitent des techniques de rendu différentes, mais peuvent néanmoins s’intégrer à un même flux applicatif :

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 prise en charge de VRM nécessite three et @pixiv/three-vrm ; celle de PNGTuber utilise des images, généralement une bouche fermée et une bouche ouverte, avec éventuellement des variantes aux yeux fermés. Un produit peut ainsi commencer avec un simple avatar en image, puis proposer un modèle plus complètement articulé sans réécrire tout le code qui gère les personnages.

Choisir entre intégration et hébergement autonome

Pour une démonstration rapide ou une incrustation OBS, LivLiv propose une adresse d’iframe avec un arrière-plan transparent :

<iframe
  src="https://livliv.ai/live/k01"
  width="480"
  height="640"
  allow="camera; microphone"
  style="border: 0; background: transparent"
></iframe>

Pour plus de contrôle, hébergez vous-même le lecteur et les ressources des personnages. Les exemples peuvent être compilés localement avec npm install et npm run build, puis servis depuis n’importe quel serveur statique. La démo accepte un paramètre ?model= pour sélectionner un autre personnage, tandis que des exemples distincts illustrent le chargement de PNGTuber et de VRM.

Les affiches cover.webp des personnages mis en avant mesurent 512 × 768 et pèsent environ 50 Ko chacune. Passez une affiche avec player.load(source, { poster }) pour l’afficher pendant le chargement de la première image du personnage. Pour afficher immédiatement un visuel avant l’exécution de JavaScript, placez l’affiche sous le canvas et faites apparaître le personnage en fondu, comme dans l’exemple de chargement du dépôt.

Formats, compatibilité et limites du projet

Le lecteur prend en charge le format de package LivLiv (.livliv et model.json v4) ; les packages exportés avant la v4 sont documentés séparément et restent lisibles. La documentation du format et son schéma JSON figurent dans le dépôt. Le lecteur n’est pas un moteur Live2D : il n’utilise ni le logiciel Live2D ni le SDK Cubism et ne peut pas lire les fichiers .moc3 ou .cmo3.

Les navigateurs doivent prendre en charge WebGL2 et ES2023. Les versions minimales indiquées sont Chrome et Edge 97+, Firefox 104+ et Safari 15.4+. Le projet indique avoir été testé sur les navigateurs de bureau récents, mais pas encore sur les téléphones : il est donc conseillé de vérifier les performances et la compatibilité sur mobile avant le déploiement.

Tenir compte des licences des personnages lors de l’intégration

Le code est sous licence Apache-2.0, mais les personnages mis en avant possèdent leurs propres conditions d’utilisation et ne sont pas couverts par cette licence. La plupart sont disponibles pour des projets personnels non commerciaux, à condition d’ajouter le crédit « Characters: LivLiv (livliv.ai) » ; la licence des personnages du dépôt interdit leur vente, leur utilisation commerciale et leur emploi pour l’entraînement d’IA. Kujira, Kujira Q et Pen sont basés sur les œuvres d’autres personnes et font l’objet de crédits et de conditions distincts. Conservez les métadonnées du package, comme meta.author et meta.license, et vérifiez la licence applicable avant de publier un avatar.

Le service de création de personnages de LivLiv utilise l’IA. Le projet demande aux utilisateurs qui présentent publiquement des personnages créés avec LivLiv de préciser que l’IA a été utilisée, plutôt que de faire croire que les œuvres ont été dessinées ou riggées à la main. Ces distinctions comptent lors de la création d’un produit destiné au public, et pas seulement au moment de choisir un moteur de rendu.

L’essayer dans votre propre environnement

Le dépôt comprend le code source TypeScript, la documentation de l’API et des formats, des exemples et des tests. Un flux de travail local classique est le suivant :

git clone https://github.com/livliv-dev/player
cd player
npm install
npm run check
npm run build
npm test

Les tests unitaires et les tests fuzz s’exécutent avec Node 22.18 ou une version ultérieure, sans navigateur. Les tests navigateur affichent les personnages mis en avant dans Chromium sans interface graphique ; des tests avec les moteurs Firefox et WebKit sont également disponibles, et le README documente l’installation des navigateurs ainsi que les exigences WebGL.

LivLiv Player convient aux applications qui ont besoin d’un avatar web léger, avec des fonctionnalités interactives facultatives et le choix entre plusieurs formats de personnages. Son cœur réduit rend le moteur de rendu de base accessible, tandis que les modules distincts de voix et de suivi permettent aux développeurs d’ajouter des comportements plus avancés uniquement lorsque l’expérience le nécessite.

Source

livliv-dev/player : un lecteur de personnages 2.5D léger pour le web, avec synchronisation labiale et suivi du visage par webcam.