34KB的网页角色播放器，连摄像头追踪都塞进浏览器

LivLiv Player 开源了。一个跑在浏览器里的 2.5D 角色播放器，核心约 30 KB gzipped，整包约 34 KB。支持口型同步和摄像头面部追踪，能嵌进网页、直播叠加层或 app。作者是 yeko @LivLiv，GitHub 仓库和示例都已放出。

先看演示。

这个项目解决的事很具体：你想在网页上放一个会眨眼、呼吸、转头、说话的角色，过去要么接 Live2D/Cubism，要么自己处理渲染和资源格式。LivLiv Player 走 WebGL2，无依赖，提供统一 API，能加载 LivLiv 自己的模型，也能加载 VRM 0.x / 1.0 和 PNGTuber。口型同步和面部追踪按需导入，核心不背这些模块。

技术读者会关心几个点。口型同步支持麦克风、音频、视频三种输入；面部追踪用 Google 的 MediaPipe 在浏览器里跑，摄像头图像留在设备上。追踪模块和语音模块只在调用时才加载。代码 Apache-2.0，核心无依赖，npm 上还没有，当前要从仓库构建后导入 dist/index.js。浏览器支持 WebGL2 和 ES2023，桌面 Chrome/Edge 97+、Firefox 104+、Safari 15.4+，手机还没测试。

对普通用户来说，这是一个网页虚拟形象播放器。几行代码能把角色放进页面，加载 21 个内置角色，或者换成自己的 PNGTuber 图片、VRM 模型。也可以用 iframe 直接嵌 /live/

许可这块分得清楚。代码是 Apache-2.0，商用播放器没问题。内置 21 个角色不跟代码走同一个许可。大部分由 LivLiv 制作，个人非商业项目可免费使用，需要署名，不能售卖、商用或用这些角色训练 AI 模型。Kujira、Kujira Q、Pen 来自其他人的作品，授权和署名另算。有网友问能不能商用，作者回复播放器随便用，角色需要发邮件到 admin@livliv.ai 或私信沟通。

社区反馈里有几个实际摩擦点。有网友问 Blender 导出的 VRM 能不能加载，作者说 VRM 0.x 和 1.0 都支持，Blender 导出应该可以，但还没测试，遇到问题可以反馈。有网友担心摄像头权限，作者解释播放器加载时不会请求摄像头，只有页面调用 startFaceTracking 才启动，通常由按钮触发；拒绝授权后角色仍然会眨眼、呼吸、跟随指针，所以拒绝的成本不高。预提示 UI 目前没有内置。有人问物理晃动效果，作者说在做。也有人问 Face ID，帖子下暂时没有作者答复。

值得留意的是体积。34 KB 很轻，适合嵌入和 OBS，但真正决定它能不能落地的，是摄像头权限、角色许可和移动端支持。作者把权限触发交给页面控制，把代码和角色许可拆开，这两点比压缩到 34 KB 更影响使用。演示地址和仓库都在下面，Blender 导出的 VRM 还缺一次公开测试，手里有模型的人可以试。

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

import { Player } from '@livliv/player'

const player = new Player(document.querySelector('canvas'))
await player.load('characters/k01/')

player.setExpression('smile')
player.act('nod')
player.params.mouthOpen = 0.6

仓库：https://github.com/livliv-dev/player

在线示例：https://livliv-dev.github.io/player/example/gallery.html?demo=1