【数字人开发】结合nextHuman平台进行数字人网页端开发
零、实现效果
结合nextHuman进行数字人网页端开发
一、实现过程
1、创建应用获取AccessKey和AccessSecret
官方网址：https://nexthuman.cn/developer/#/app-list
2、环境准备
（1）新建项目
（2）安装依赖的库
安装nextHuman WebGL端的SDK
npm i @nextcas/sdk@latest -s
安装鉴权方法所依赖的库
npm install jose
3、鉴权方法
官方鉴权方法（基于JAVA）：
public String createAccessToken(String accessKey,String accessSecret,String visitId,String visitName){SecretKey secretKey = Keys.hmacShaKeyFor(accessSecret.getBytes(StandardCharsets.UTF_8));JwtBuilder builder = Jwts.builder();builder.claim("role","role.visit");builder.claim("visitId",StringUtil.trimToEmpty(visitId));//业务方userId(不同用户切记不可重复,否则会话记忆可能穿插)builder.claim("visitName",StringUtil.trimToEmpty(visitName));builder.claim("timestamp",System.currentTimeMillis());//务必传系统当前时间，会用于系统时间钟校验builder.claim("noncestr",MD5Helper.getRandomMD5());//建议加上随机字符串，用于控制Token结果的随机性builder.setExpiration(new Date(System.currentTimeMillis() + 24 * 60 * 60 * 1000));//建议设置为24小时以内的有效期return accessKey + "@" + builder.signWith(secretKey).compact();
}
修改完善后（基于JavaScript）：
/*** 生成一个随机的十六进制字符串（替代 MD5）*/
function getRandomHex(len = 16) {const bytes = new Uint8Array(len);crypto.getRandomValues(bytes);return Array.from(bytes).map(b => b.toString(16).padStart(2, '0')).join('');
}
/*** 创建 JWT Token（浏览器版本）*/
async function getToken(accessKey, accessSecret, visitId, visitName) {const encoder = new TextEncoder();const secretKey = encoder.encode(accessSecret);const payload = {role: 'role.visit',visitId: (visitId || '').trim(),visitName: (visitName || '').trim(),timestamp: Date.now(),noncestr: getRandomHex(16),};const token = await new SignJWT(payload).setProtectedHeader({ alg: 'HS256' }).setExpirationTime('24h').sign(secretKey);return `${accessKey}@${token}`;
}
4、相关方法使用
（1）初始化项目，并使用官方样例
const token = await getToken("AccessKey","AccessSecret","userId01","username");console.log("token:", token);cas = new NextCas(container, {avatarId: "avatar_592456",actorId: "641811add41a3f2f91247af5",token,templateName: "introduce"});
（2）主要方法
//切换模型方法
cas.setAvatar("模型对应id");
//切换问答智能体
cas.setActor（“智能体对应id”）
//语音播报
cas.speak("播报的内容");
//获取当前装扮信息
cas.getBundles();
//切换装扮
cas.addBundle("具体装扮信息")
二、完整代码
main.js
import './style.css'
import NextCas from "@nextcas/sdk";
import { SignJWT } from 'jose';let cas = null;const container = document.getElementById("container");
const statusText = document.getElementById("status");
const initBtn = document.getElementById("initBtn");/*** 生成一个随机的十六进制字符串（替代 MD5）*/
function getRandomHex(len = 16) {const bytes = new Uint8Array(len);crypto.getRandomValues(bytes);return Array.from(bytes).map(b => b.toString(16).padStart(2, '0')).join('');
}
/*** 创建 JWT Token（浏览器版本）*/
async function getToken(accessKey, accessSecret, visitId, visitName) {const encoder = new TextEncoder();const secretKey = encoder.encode(accessSecret);const payload = {role: 'role.visit',visitId: (visitId || '').trim(),visitName: (visitName || '').trim(),timestamp: Date.now(),noncestr: getRandomHex(16),};const token = await new SignJWT(payload).setProtectedHeader({ alg: 'HS256' }).setExpirationTime('24h').sign(secretKey);return `${accessKey}@${token}`;
}initBtn.onclick = async () => {const token = await getToken("next685e15c1959a9c02aca4b577","Y_PCViGvZJM27wXa29x2jejyfgqfQcCEvjwRYgyqMI","userId01","username");console.log("token:", token);cas = new NextCas(container, {avatarId: "avatar_257",actorId: "641811add41a3f2f91247af5",token,templateName: "introduce"});cas.setBackground("");cas.on("initProgress", (cent) => {statusText.textContent = `加载中 ${cent}%`;});cas.on("ready", () => {statusText.textContent = "初始化完成";});
};document.getElementById("switchGirl").onclick = async () => {if (cas) {await cas.setAvatar("avatar_257");await cas.setActor("641811add41a3f2f91247af5");}
};document.getElementById("switchBoy").onclick = async () => {if (cas) {await cas.setAvatar("avatar_1078");await cas.setActor("actor_100230");}
}const inputText = document.getElementById("inputText");
const speakBtn = document.getElementById("speakBtn");speakBtn.onclick = () => {if (cas && inputText.value.trim() !== "") {cas.speak(inputText.value.trim());}
};document.getElementById("changeHairBtn").onclick = async () => {if (cas) {await cas.addBundle("hair_1001"); // 这里的 bundle 名称根据你具体资源填写console.log("头发换装成功");}
};document.getElementById("changeShoesBtn").onclick = async () => {if (cas) {await cas.addBundle("shoes_1002"); // 换鞋子的bundle名称，假设是 shoes_1001console.log("鞋子换装成功");}
};document.getElementById("changeClothesBtn").onclick = async () => {if (cas) {await cas.addBundle("clothes_1001"); // 换套装的bundle名称，假设是 clothes_1001console.log("套装换装成功");}
};const showBundleBtn = document.getElementById("showBundleBtn");
const bundleInfo = document.getElementById("bundleInfo");showBundleBtn.onclick = async () => {if (!cas) return;const bundles = await cas.getBundles();console.log("已加载的bundle列表：", bundles);
};
index.html
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><title>NextHuman 控制面板</title><style>body {display: flex;margin: 0;font-family: sans-serif;}#container {width: 375px;height: 800px;border: 1px solid red;flex-shrink: 0;;}.panel {padding: 20px;max-width: 500px;}button {margin: 8px;}</style></head><body><div id="container" style="background-color: black;"></div><div class="panel"><div><strong>初始化状态：</strong><span id="status">未初始化</span></div><div style="margin-top: 10px"><button id="initBtn">初始化数字人</button></div><!-- ✅ 你需要添加的代码是这一段 --><div style="margin-top: 20px;"><strong>角色切换：</strong><br /><button id="switchGirl">切换为女</button><button id="switchBoy">切换为男</button></div><div style="margin-top: 20px;"><strong>朗读文本：</strong><br /><textarea id="inputText" rows="3" cols="40" placeholder="请输入你想让数字人朗读的内容"></textarea><br /><button id="speakBtn">朗读</button></div><div style="margin-top: 20px;"><strong>换装：</strong><br /><button id="changeHairBtn">换头发</button><button id="changeShoesBtn">换鞋子</button><button id="changeClothesBtn">换套装</button> </div><div style="margin-top: 20px;"><button id="showBundleBtn">显示当前装扮信息</button><div id="bundleInfo" style="margin-top: 10px; white-space: pre-wrap; border: 1px solid #ccc; padding: 8px; max-width: 400px; min-height: 40px;"><!-- 装扮信息显示区域 --></div></div></div><script type="module" src="/src/main.js"></script></body>
</html>