客户端渲染H5 SDK接口说明

const result = IVH.setPrivatization({
  appKey: '密钥里的appkey',
  accessToken: '密钥里的accesstoken',
  httpOrigin: 'http://www.test.com',
  wsOrigin: 'ws://www.test.com',
});
console.log(result);

// 路径加载方式
IVH.init({
  element: '#model',
  virtualmanKey: 'xxxxxxxxxxxxxxxxxx',
  sign: 'xxxxxxxxxxxxxxxxxx',
  modelPath: `./model/yangxiaoyun/200.glb}`,
  actionPath: [
    `./model/yangxiaoyun/action/hands_drooping.json}`,
  ],
  defaultActionIdx: 0
});

// 数据加载方式
const option = {
  modelPath: `./model/yangxiaoyun/200.glb`,
  actionPath: [
    `./model/yangxiaoyun/action/welcome.json`,
    `./model/yangxiaoyun/action/thinking.json`,
  ],
};
const fetchArr = option.actionPath.map(n => {
  return fetch(n).then(d => d.json());
});
Promise.all([fetch(option.modelPath).then(d => d.arrayBuffer())].concat(fetchArr)).then(data => {
  const opt = {
    element: '#model',
    virtualmanKey: 'xxxxxxxxxxxxxxxxxx',
    sign: 'xxxxxxxxxxxxxxxxxx',
    defaultActionIdx: 0,
  };
  opt.modelData = data[0];
  opt.actionData = [
    {
      name: 'welcome',
      data: data[1],
    },
    {
      name: 'thinking',
      data: data[2],
    }
  ];
  IVH.init(opt);
});

IVH.on('init', e => {
  console.log('init:', e);
  IVH.loadAction({
    actionPath: [
      `./model/yangxiaoyun/action/welcome.json}`,
    ],
  });
});

document.querySelector('#btn').onclick = function (e) {
  IVH.initAudio();
  const txt = document.querySelector('#txt').value.trim();
  if (txt) {
    setTimeout(() => {
      IVH.play(txt);
    }, 1000);
  }
}

document.querySelector('#btn').onclick = function (e) {
  const txt = document.querySelector('#txt').value.trim();
  if (txt) {
    setTimeout(() => {
      IVH.initAudio();
      IVH.play(txt);
    }, 1000);
  }
}

document.querySelector('#btn').onclick = function (e) {
  const txt = document.querySelector('#txt').value.trim();
  if (txt) {
    IVH.initAudio();
    IVH.play(txt, {
      isChat: true,
    });
  }
}

// 模拟流式接口测试用例, 仅供参考
document.querySelector('#btn7').addEventListener('click', e => {
  const arr = [
    '今天天气不错，',
    '风和日丽的，',
    '可以出去玩了。'
  ];
  IVH.initAudio();
  const streamId = crypto.randomUUID().replace(/-/g, '')
  for (let i = 0; i < arr.length; i++) {
    IVH.play(arr[i], {
      isStream: true,
      seqNo: i + 1,
      isFinal: i === arr.length - 1,
      streamId,
    })
  }
})

{
  version: '1.0.0'
}

/**
 * @returns Object
 * * @property {String} version：版本信息，例如：'1.0.0'
 */
IVH.info()

let volume = 1;
document.querySelector('#btn2').onclick = function (e) {
  volume = 1 - volume;
  IVH.setVolume(volume);
}

document.querySelector('#btn3').onclick = function (e) {
  IVH.stop();
}

IVH.init({
  ...
  skinMap: {
    "皮肤名": {
      "data": [
        {
          "name": "纹理名称，具体名称会跟进模型而变化",
          "url": "纹理文件的相对/绝对地址",
        },
        ...
      ]
    },
    "皮肤名2": {
      "data": [
        {
          "name": "纹理名称，具体名称会跟进模型而变化",
          "url": "纹理文件的相对/绝对地址",
        },
        ...
      ]
    },
    ...
  }
})

IVH.reskin('皮肤名');

const result = await IVH.getActionConfig('xxx');
console.log(result);

const result = IVH.getConf();
console.log(result);

IVH.resetPositionInfo();

IVH.destroy();

// 需要保证initUnzip返回true，才可传入zip链接。
(async () => {
  const result = await IVH.initUnzip({
    path: './unzip'
  });
  result && IVH.init({
    element: '#xxxx',
    sign: 'xxxxx',
    virtualmanKey: 'xxxxx',
    modelPath: './model/model.zip',
    // 动作文件的zip，只看数组里一个url链接，后续值会忽略。使用zip时指定静默动作，是把zip包里的”对应动作.json“改名为”default_action_idle.json“，系统会把这个命名的动作当作静默。
    actionPath: [
      './model/action.zip',
    ],
  });
})();

// 需要保证init和initUnzip都已初始化完毕
(async () => {
  const result = await IVH.initUnzip({
	path: './unzip'
  });
  IVH.on('init', e => {
    IVH.loadComponent({
	  zipPath: './model/aiyun/aiyun.zip',
    })
  });
  result && IVH.init({
	element: '#xxxx',
	sign: 'xxxxx',
	virtualmanProjectId: 'xxxxx',
	modelPath: './model/model.zip',
	// 当传入动作文件的zip时，数组里第一个值为url链接即可，其他值会忽略
	actionPath: [
	  './model/action.zip',
	],
  });
})();

IVH.on('init', e => {
  console.log('init:', e);
});

// 1、先初始化, 打开定位模式
IVH.init({
  element: '#model',
  virtualmanKey: 'xxxxxxxxxxxxxxxxxx',
  sign: 'xxxxxxxxxxxxxxxxxx',
  modelPath: `./model/model.glb`,
  actionPath: [
    `./model/action/xxxx.json`,
  ],
  modelOption: {
    mode: ['position']
  }
});

// 2、可以鼠标滚轮放缩模型大小, 鼠标右键拖拽模型位置, 确认好后调用getConf保存为conf.json
getConf.addEventListener('click', e => {
  const blob = new Blob([JSON.stringify(IVH.getConf())], { type: 'application/json' });
  // 下载的文件名
  const filename = 'conf.json';
  // 创建隐藏的可下载链接
  const eleLink = document.createElement('a');
  eleLink.download = filename;
  eleLink.style.display = 'none';
  // 下载内容转变成blob地址
  eleLink.href = URL.createObjectURL(blob);
  // 触发点击
  document.body.appendChild(eleLink);
  eleLink.click();
  // 然后移除
  document.body.removeChild(eleLink);
  URL.revokeObjectURL(eleLink.href);
});

// 3、重新init模型, 加载confPath/confData, 模型会按照之前保存的信息渲染
IVH.init({
  element: '#model',
  virtualmanKey: 'xxxxxxxxxxxxxxxxxx',
  sign: 'xxxxxxxxxxxxxxxxxx',
  modelPath: `./model/model.glb`,
  actionPath: [
    `./model/action/xxxx.json`,
  ],
  confPath: './model/conf.json',
});

/*
 * 说明：样式1：style=1；样式2：style=2；样式3：style=3；
 */
{
  InteractionContent: "{\\"style\\":1,\\"options\\":[\\"选项1\\",\\"选项2\\",\\"选项3\\"]}",
  InteractionType: "OptionInfo"
}

{
  InteractionContent: "{\\"url\\":\\"https://virtualhuman-cos-test-1251316161.cos.ap-nanjing.myqcloud.com/virtualman-config/0cbb2231-1afd-4cd5-8414-b1bc3d600a2f-王冰冰.png\\"}",
  InteractionType: "Image"
}

{
  InteractionContent: "{\\"title\\":\\"这是弹窗标题\\",\\"content\\":\\"这是弹窗内容\\",\\"button\\":\\"这是弹窗按钮\\"}",
  InteractionType: "Popup"
}

{
  InteractionContent: "{\\"url\\":\\"https://virtualhuman-cos-test-1251316161.cos.ap-nanjing.myqcloud.com/virtualman-config/0417e732-1d64-4c65-a2c4-cac23ed454e2-1cd396fb-86a9-480f-814f-cbdf14055cdd.mp4\\"}",
  InteractionType: "Video"
}

/*
 * 说明：样式1：style=1；样式2：style=2；样式3：style=3；
 */
{
 InteractionContent: "{\\"url\\":\\"https://virtualhuman-cos-test-1251316161.cos.ap-nanjing.myqcloud.com/virtualman-config/22f4c069-cddb-4753-b482-02a20755b2ba-王冰冰.png\\",\\"style\\":1,\\"options\\":[\\"选项1\\",\\"选项2\\"]}",
 InteractionType: "ImageOption"
}

{
  InteractionContent: "{\\"name\\":\\"这是标题\\",\\"contents\\":[\\"这里是内容\\"]}",
  InteractionType: "Customize"
}