3D 摄像头互动版:使用与验证说明
打开同目录「课程AI助手(双课教学版-v6.8-3D摄像头交互版).html」,进入数字人模块,选择林老师或陈老师。
操作
- 鼠标拖动:旋转人物;滚轮:缩放;触屏支持旋转和双指缩放。
- 点击「开启摄像头」并允许浏览器权限后,才开始视频捕捉。
- 单手拇指、食指捏合后移动:旋转人物;松开:停止控制。
- 双手分别捏合,拉开或靠拢:放大或缩小人物。
- 双手张开保持约 1.2 秒:恢复默认视角。也可使用界面复位按钮。
- 开启表情跟随后,数字人跟随可见的眨眼、微笑、张嘴等面部动作;朗读时口型优先跟随语音。
- 离开数字人面板、页面进入后台或关闭摄像头,会释放摄像头并停止相关活动。
如直接打开文件无法取得摄像头权限,运行同目录「启动3D摄像头课堂.cmd」,在 Edge/Chrome 打开窗口显示的本机地址。启动器需要 Node.js,关闭命令窗口即可停止服务。
真实能力与限制
男女角色均为带骨骼、贴图和表情变形的完整三维模型,可观察侧面和背面。模型来自 Microsoft Rocketbox,并非之前生成照片的三维重建;当前面貌与照片不同,尚未实现高度仿真的东方教师审美要求。照片不能直接转换成保持真人一致性的完整可动画模型;进一步达到该效果,需要匹配的高质量人物模型及表情绑定资产。 朗读采用设备可用的系统语音,口型按语音事件和时间估计同步,不是逐音素精确对齐。表情跟随只映射面部动作,不判断人的真实情绪。 识别引擎、模型和材质内嵌在 HTML 中,无需运行时下载。摄像头交互代码在浏览器本地处理画面,不上传画面、不录制视频、不采集麦克风音频;原课程助手的其他联网服务仍遵循原有配置。
已执行验证
- 浏览器 11 项检查通过:三维网格、表情通道、拖动、滚轮、角色切换相关流程、模拟摄像头与真实识别引擎运行、停止释放、取消启动、移动端布局、页面错误与 HTTP 请求检查。
- 真实 MediaPipe 引擎对生成的人像测试图片识别到 2 只手及 52 项面部系数。
- 手势算法测试通过:捏合旋转、双手缩放、边界限制、释放、重新捕捉、复位保持和冷却、无效关键点。
- 生命周期 8 项检查通过:默认关闭、权限拒绝、延迟授权清理、离开面板取消准备及跨句朗读等。
- 代码审查复核通过,包括位图释放、初始化超时清理、后台朗读和贴图回退。
以上使用自动化浏览器、模拟摄像头与测试图片;未使用你的实体摄像头,真实环境的手势距离、光照和表情跟随效果需点击授权后体验。原始日志、截图和脚本位于 work/avatar-camera。
写操作清单
本轮新增 v6.8 HTML、启动3D摄像头课堂.cmd、本说明,以及 work/avatar-camera 下实现脚本、模型贴图、识别资源、依赖、测试脚本、截图和日志。详细文件列表见 work/avatar-camera/write-manifest.json。原 v6.4—v6.7 文件保留,未删除文件、未修改身份认证或系统配置。
来源
- Microsoft Rocketbox(MIT):https://github.com/microsoft/Microsoft-Rocketbox
- MediaPipe 手部关键点:https://developers.google.com/edge/mediapipe/solutions/vision/hand_landmarker/web_js
- MediaPipe 面部关键点:https://developers.google.com/edge/mediapipe/solutions/vision/face_landmarker/web_js