经常有人问我我们公司前台那个超好用的3D数字人是怎么弄的之前总部要接待很多教育行业的前辈和同行做行业交流。为了撑住场面、做出好的展示效果我专门花时间扒遍了市面上的数字人产品挨个做了实测对比。说实话市面上做数字人的公司真的一大堆看着都差不多。但我们搞技术的不看噱头只看实测效果。我当时挨个对比了核心细节声音自不自然、实时交互卡不卡、人物表情僵不僵硬、手势动作是否流畅还有整体画面和背景的融合度全部逐一筛了一遍。当我调研到魔珐星云的时候突然觉得挺有意思的作为 AI 终端时代全域具身交互底层基础设施魔珐星云平台以自研 LAM 文生 3D 多模态大模型为核心底座依托自研参数流架构 AI 端渲和解算技术打造拟人化语音、微表情、全身肢体联动的完整 3D 交互形象交互质感远超同类产品。 今天呢整理一篇文章把如何将数字人实现到自己的业务中写一个demo分享给大家。 在这篇文章里面呢我提供了html版本的,在文章底部呢我也引入了一个官方Vue的事例大家可以根据自己的项目去选择。我先带大家看一下魔珐星云官方的示例里面有个超可爱的土拨鼠数字人形象音色特别灵动自然。可选择技术方案备选方案优点缺点GIF动态图方案成本极低、上线极快效果非常生硬廉价人物姿势、动态全程固定循环没有实时口型匹配仅为固定循环的静态动画素材无任何实时交互能力质感差、完全撑不起正式接待、对外展示场景第三方成熟数字人厂商产品功能成熟数字人质感、交互效果整体有保障适配各类常规场景很多厂商不成熟/形象过少在我们没有正式对接之前呢其实我还挺忐忑的就是我们的这个项目要得很急就是我害怕对接第三方的很难在第一时间去更新到公司总部,当我看了一下他们的技术文档之后呢我就放心了因为他们这个SDK真的很完善我做的是一个H5网站直接调用他们的API。然后他们的示例就很快很轻松地就引入了数字人的形象。因为现在AI很火嘛就是很多公司都在用这种数字人的形象就比如说我们这个教育行业今天呢教大家如何五分钟去搭建自己的数字人。官网注册与体验入口官网:点击查看官网地址支持手机号验证码登录、微信扫码登录两种方式新用户可直接完成注册后同步登录具身交互智能体的核心优势及技术能力魔珐星云官网密钥配置应用管理-创建数字人应用管理-驱动应用配置驱动应用名称、备注人物配置-形象配置(我们可以选择符合自己喜欢的数字人形象)人物配置-音色配置人物配置-场景配置人物配置-场景配置选择完人设后进行调试获取APPIDAPP Secret根据文档关联到我们项目当中https://xingyun3d.com/developers/52-183官方已经给我们提供了一个本地交互示例DemoGitHub仓库地址https://github.com/publicize0828/XmovLiteAvatarJSDemoGitee仓库地址https://gitee.com/xmovmaster/XmovLiteAvatarJSDemo我们可以git clone 到我们的本地Vscode或者Qoder 打开示例安装依赖安装项目依赖包下面两种方式都可以pnpm i 或者 npm inpm run dev就可以成功运行示例同时我们将刚才拿到的数字人 APPIDAPP Secret 配置到我们Demo的虚拟人SDK配置区域点击连接即可显示连接成功可以看到我们的数字人已经完美展现了完整HTML Demo 示例!DOCTYPE html html langzh head meta charsetUTF-8 title魔珐星云 Avatar SDK Demo/title style body { display: flex; flex-direction: column; align-items: center; background: #f4f4f4; font-family: Arial, sans-serif; } #sdk-container { width: 400px; height: 600px; background: #000; margin-top: 20px; } button { margin-top: 20px; padding: 10px 20px; font-size: 16px; } /style /head body h2魔珐星云接入最小示例/h2 !-- 数字人渲染容器 -- div idsdk-container div idsdk stylewidth:100%; height:100%/div /div button idmainBtn让数字人说话/button !-- 引入官方 SDK -- script srchttps://media.xingyun3d.com/xingyun3d/general/litesdk/xmovAvatarlatest.js/script script // 1. 创建实例 const avatar new XmovAvatar({ containerId: #sdk, appId: , // ⬅️ 获取到的 appSecret: , // ⬅️ 获取到的 gatewayServer: https://nebula-agent.xingyun3d.com/user/v1/ttsa/session, onStateChange: (state) { console.log(State:, state); }, onStatusChange: (status) { console.log(Status:, status); }, onError: (err) { console.error(SDK 错误, err); } }); // 2. 初始化加载资源 avatar.init({ onDownloadProgress: (progress) { console.log(下载进度${progress}%); }, onError: (error) { console.error(初始化失败, error); } }).then(() { console.log(初始化完成数字人模型加载成功); }); // 3. 点击按钮让数字人说话 document.getElementById(btn).onclick () { avatar.speak(你好我是你的智能导购助手, true, true); }; /script /body /html在这里我提供了最小实例大家可以直接复制到html中const avatar new XmovAvatar({})avatar.init();// 初始化连接avatar.speak(你好我是你的智能导购助手, true, true);speak控制虚拟人说话。我们只需要修改appId,appSecret再执行serve -p 3000浏览器运行http://localhost:3000很完美也很精简就完成了我们数字人SDK的引用。 我花了一些时间去测试发现SDK和业务交互真的很流畅呀500ms就完成了与数字人的交互真的是太秀了。 对于我们技术角度来讲对接成本低需要的技术栈少不需要考虑WebScoket等通讯测评总结核心优势与应用价值魔珐星云数字人平台整体表现可总结为 “好上手、能调、不用学太久”核心优势如下接入门槛低引入 SDK、填写 App ID 和角色参数即可快速集成无需搭建复杂环境从开发到上线可大幅节省时间成本。高度可定制SDK 支持多种数字人形象超写实、卡通、二次元等、音色及表演风格选择还可自定义字幕、图片挂载等个性化功能交互性强。学习成本低SDK 文档详细包含完整参数说明、示例代码及常见问题解答平台 “应用中心” 提供客服对话、知识讲解等现成模板可直接修改使用。部署灵活且硬件要求低支持本地部署与云端调用两种模式对硬件配置要求不高降低项目落地门槛。核心能力强劲具备低延迟、高并发特性交互体验流畅数字人质量高支持多终端适配支持信创落地成本可控。大家直接复制这个html文件到Vscode编辑器然后去加上自己的密钥就可以去运行了。数字人适配场景就拿我之前兼职跑外卖来说经常陌生商场分不清楼层店铺。想找人问路但不少路人也是第一次过来一样不熟悉路线根本问不到准确答案如果现在有一个数字人的一个形象摆在我面前我真的会觉得他的形象非常的伟岸有时经常会给领导做汇报忽然一不小心嘴瓢了就想尴尬的想找个缝钻进去所以我们如果说用数字人的话也会避免这种问题。我们去给领导上级去提供一个数字人的一个形象比如说特别我们做一些数据汇报的时候我们把一些数据导入到数字人那领导的话他可以24小时地去跟数字人去对话