LivLiv Player：轻量级网页虚拟形象，支持口型同步与面部追踪
LivLiv Player 将 2.5D、VRM 和 PNGTuber 角色带入浏览器，支持口型同步和可选的摄像头追踪，核心精简且无需依赖。
为网站或直播添加一个响应灵敏的角色，往往意味着要在笨重的运行时、平台专用工具或一堆自定义动画代码之间做选择。LivLiv Player 采用了更精简的方案：它可在浏览器中渲染 2.5D 角色，并将口型同步和摄像头驱动的面部追踪作为可选功能提供。
核心使用 WebGL2、没有依赖，压缩后约为 30 KB。同一套 API 可以加载 LivLiv 模型、VRM 虚拟形象和简单的 PNGTuber 素材，因此适用于交互式网站、桌面风格的 Web 应用以及直播叠加层。
将角色显示在屏幕上
安装 npm 包，并将 Player 绑定到画布：
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 // 数值范围为 0 到 1
LivLiv 角色可以从包含 model.json 和 textures/ 的目录加载，也可以从 .livliv 包加载。玩家对象提供表情和动作 ID，因此应用可以将它们显示为按钮、绑定到对话状态，或由自身的动画逻辑触发。
项目仓库中包含 21 个精选角色，可直接加载。npm 包仅包含播放器，不包含角色文件；请将要使用的角色复制到自己的项目中，并遵循每项素材的许可证。
按需添加语音和摄像头追踪
语音和追踪功能通过独立模块导入，因此不需要这些功能的应用可以不在初始播放器设置中加载它们。要播放语音并实现口型同步：
import { createSpeech } from '@livliv-dev/player/voice'
const speech = createSpeech(player)
button.onclick = () => {
speech.unlock() // 在用户手势触发时调用，以满足浏览器音频策略要求
speech.say('/reply.mp3')
}
播放器支持根据麦克风输入、音频和视频实现口型同步。摄像头面部追踪使用 MediaPipe，通过单独的模块导入；该功能需要 @mediapipe/tasks-vision：
import { startFaceTracking } from '@livliv-dev/player/tracking'
await startFaceTracking(player)
这种模块分离既有利于性能，也有助于征得用户同意。摄像头访问是一项明确启用的功能，而非隐藏要求；README 还说明追踪在浏览器中运行，摄像头图像会保留在设备上。播放器本身不会调用 AI 服务，只负责渲染传入的文件。与任何摄像头功能一样，应用应清楚说明申请访问权限的原因，并提供停止追踪的方式。
一套 API，支持 2D 风格和 3D 虚拟形象
LivLiv Player 还通过 body-player 接口支持 PNGTuber 图像和 VRM 模型。这些格式的渲染需求各不相同，但仍可融入同一套应用流程：
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')
VRM 支持需要 three 和 @pixiv/three-vrm；PNGTuber 支持使用图像素材，通常需要一张闭嘴图和一张张嘴图，也可以选择添加闭眼版本。这样一来，产品可以先使用简单的图像虚拟形象，之后再提供绑定更完善的模型，而无需重写所有面向角色的代码。
选择嵌入或自行托管
若要快速制作演示或 OBS 叠加层，LivLiv 提供了背景透明的 iframe 端点：
<iframe
src="https://livliv.ai/live/k01"
width="480"
height="640"
allow="camera; microphone"
style="border: 0; background: transparent"
></iframe>
如需更多控制权，可以自行托管播放器和角色素材。示例项目可通过 npm install 和 npm run build 在本地构建，然后由任意静态服务器提供服务。演示页面接受 ?model= 参数以选择其他角色，另外的示例则展示了 PNGTuber 和 VRM 的加载方式。
精选角色包含尺寸为 512 × 768、每张约 50 KB 的 cover.webp 海报。调用 player.load(source, { poster }) 传入海报，可在角色首帧加载时显示它。若想在 JavaScript 运行前立即呈现画面，可以像仓库中的加载示例那样，将海报放在画布下方，并在角色加载后淡入。
格式、兼容性与项目边界
播放器支持 LivLiv 包格式（.livliv 和 model.json v4）；v4 之前导出的包另有文档说明，仍可播放。格式文档和 JSON Schema 均包含在仓库中。该播放器并非 Live2D 运行时：它不使用 Live2D 软件或 Cubism SDK，也无法读取 .moc3 或 .cmo3 文件。
浏览器要求为 WebGL2 和 ES2023。列出的最低版本为 Chrome 和 Edge 97+、Firefox 104+ 以及 Safari 15.4+。项目表示已在当前桌面浏览器中进行测试，但尚未在手机上测试，因此正式发布前应验证移动设备上的性能和兼容性。
将角色授权纳入集成流程
代码采用 Apache-2.0 许可证，但精选角色各有自己的条款，不受该许可证覆盖。大多数角色可用于个人非商业项目，使用时需标注“Characters: LivLiv (livliv.ai)”；仓库中的角色许可证禁止出售、商业使用和 AI 训练。Kujira、Kujira Q 和 Pen 基于其他创作者的作品，拥有独立的署名要求和使用条款。请保留 meta.author 和 meta.license 等包元数据，并在发布虚拟形象前核实适用的许可证。
LivLiv 的角色创建服务使用 AI；对于公开展示使用 LivLiv 制作的角色，项目要求用户披露作品使用了 AI，而不要将其说成是手绘或手工绑定。这些区别不仅在选择渲染器时很重要，在打造面向公众的产品时也同样重要。
在自己的技术栈中试用
仓库包含 TypeScript 源码、API 和格式文档、示例以及测试。典型的本地工作流程如下：
git clone https://github.com/livliv-dev/player
cd player
npm install
npm run check
npm run build
npm test
单元测试和模糊测试可在 Node 22.18 或更高版本上运行，无需浏览器。浏览器测试会在无头 Chromium 中渲染精选角色；也提供 Firefox 和 WebKit 引擎测试，README 中说明了浏览器安装方式和 WebGL 要求。
如果应用需要轻量级网页虚拟形象、可选的交互功能，以及多种角色格式可供选择，LivLiv Player 就是不错的选择。精简的核心让基础渲染器易于上手，而独立的语音和追踪模块则让开发者只在体验需要时添加更丰富的行为。