园区数字人

安装

npm install digit-man

可选?(需要把包内的一个文件拷贝到assets中)

第一步:

npm install vite-plugin-static-copy

第二步: 在vite.config.js中添加如下代码:

import { viteStaticCopy } from 'vite-plugin-static-copy';
...
plugins: [
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/digit-man/dist/assets/*',
          dest: 'assets',
        },
      ],
    }),
],

使用

//引入文件
import DigitMan from 'digit-man';
import 'digit-man/style.css';
  
//在页面中添加组件即可
<digit-man render-type="webgl"></digit-man>

参数

render-type: bitmap、webgl 使用哪种方式渲染

width: 100% | 200px | 100px 数字人的尺寸

chromaKeyParams: 扣绿幕的参数

greenScreenColor?: number; // G 范围 0-255
threshold?: number; // 阈值 0.0-1.0
smoothEdge?: number; // 边缘柔化 0.0-1.0

videoOptions: 视频参数

注意

1、如果渲染出来的画面样式不正确，需要检查是不是样式被覆盖了，常见的有：

❌canvas标签选择器

//canvas{
避免这种标签选择器
//}

2、必须使用chrome浏览器

3、必须使用https:// 或者localhost访问