需求:运用IP形象和客户对话下单
步骤
注意：文档写的很通俗理解，但是文档有缺陷，有好几处都是错误的下面会说到碰到的错误
主要逻辑
import VMS from "@/utils/kdxf/sdk/vms-2d-web-sdk-2.0.0.esm.min";
import { encode } from "js-base64";
const remote_streamRef = ref(null);
// 形象列表
const avatarList = ref({
110017006: {
name: "马可",
actionList: [
{
name: "身体微侧，左手有请",
id: "A_LH_please_O",
},
{
name: "右手手掌强调",
id: "A_RH_emphasize2_O",
},
{
name: "右手指竖起强调",
id: "A_RH_emphasize_O",
},
{
name: "右手握拳加油",
id: "A_RH_encourage_O",
},
{
name: "右手点赞夸奖",
id: "A_RH_good_O",
},
{
name: "右手欢迎",
id: "A_RH_hello_O",
},
{
name: "右手有请",
id: "A_RH_please1_O",
},
{
name: "右手向右",
id: "A_RH_please_O",
},
{
name: "双手强调",
id: "A_RLH_emphasize_O",
},
],
},
110023004: {
name: "小雅",
actionList: [
{
name: "打招呼",
id: "a1_nihao_R",
},
{
name: "向右看",
id: "a1_hudong_R",
},
{
name: "向左看",
id: "a1_hudong_L",
},
{
name: "双手加油",
id: "a1_jiayou_RL",
},
{
name: "双手比心",
id: "a1_bixin_RL",
},
{
name: "手指向前点点",
id: "a2_dianzan_R",
},
{
name: "手指向上指",
id: "a1_guanzhu_R",
},
{
name: "手指向下指",
id: "a1_gouwuche_R",
},
{
name: "左手向前",
id: "a1_youqing_L",
},
{
name: "左手向左",
id: "a1_jieshao_L",
},
{
name: "右手向右",
id: "a1_jieshao_R",
},
{
name: "右手向前",
id: "a1_youqing_R",
},
{
name: "单手握拳加油",
id: "a1_jiayou_R",
},
{
name: "比心",
id: "a1_bixin_R",
},
{
name: "右手大拇指点赞",
id: "a1_dianzan_R",
},
],
},
});
// 服务参数
// 是否开启透明通道
const transparent = ref(0); //0 不开启使用默认 1开启
// 虚拟人要说的话
const speakContent = ref();
// 动作指令
const textActionObj = ref({
type: "action",
value: "A_RH_hello_O",
wb: "3",
we: "20",
});
const textAction = ref([
{ type: "action", value: "A_LH_please_O", wb: 3, we: 5 },
]); // we,wb必须是number
// 停止服务
const stopVms = () => {
VMS.stop()
.then(() => {
console.log("结束虚拟人成功");
})
.catch(() => {
console.log("结束虚拟人失败");
});
};
// 开启服务
const startVms = () => {
VMS.start({
appId: import.meta.env.VITE_APPID,
apiKey: import.meta.env.VITE_API_KEY,
apiSecret: import.meta.env.VITE_API_SECRET,
width: 1920, //宽度，可取 1920、1280、720
height: 1080, // 高度，可取1080、720、405
avatarId: "110022010", //形象ID
streamDomId: "remote_stream", //虚拟人视频流要渲染的Dom Id
resId: '1767754688098189312', //1767440464783093760 全屏 1767436272198758400 三分之一平 第二个图片 600px 1767494691165319168 整图 1767754688098189312
moveH: -600,
// moveV: 0,
// scale: 0.5, //虚拟人缩放
// maskRegion: '[0,0,1080,1320]', //逆时针
isSsl: true,
transparent: transparent.value
})
.then(() => {
console.log("开启成功", remote_streamRef.value.children);
// 解决虚拟人画面出现 避免背景从中间位移到左边出现的视觉(默认虚拟人在背景中间)
remote_streamRef.value.children[0].querySelectorAll(
"video"
)[0].style.objectPosition = 0;
})
.catch((err) => {
console.log(err, "error");
});
};
// 文本驱动 输入文本开始说话及动作
const textDrive = (speak) => {
if (!speak) {
return;
}
console.log(speak, 'speak')
VMS.textDriver({
parameter: {
tts: {
vcn: "x4_lingxiaolu_assist", //发音人
},
},
payload: {
text: {
encoding: "utf8",
compress: "raw",
format: "json",
text: encode(speak),
},
// 动作控制指令
ctrl_w: {
encoding: "utf8",
compress: "raw",
format: "json",
text: encode(JSON.stringify({ avatar: textAction.value })),
},
},
});
};
export {textDrive,startVms,stopVms, remote_streamRef}
问题小结
1.vms引入的文件 demo里会有关于虚拟人的压缩文件,只需放到utils/其他文件夹下，进而引入即可
2.虚拟人永远都在背景的最中间部分，如何让虚拟人在左侧；答:maskRegion可以调试虚拟人的位置顺序逆时针
3.如何实现下面图片的效果 (解决办法在图片下面)
