硅基DUIX H5 SDK使用文档

安装

npm i duix-guiji -S

快速开始

import DUIX from 'duix-guiji'

const duix = new DUIX()

duix.on('intialSucccess', () => {
  // 开始会话
  duix.start({
    conversationId: '',
    openAsr: true
  }).then(res => {
    console.info(res)
  })
})

// 初始化
duix.init({
  sign: 'xxxx',
  containerLable: '.remote-container'
})

注意： 不要将duix实例放在Vue的data中，也不要放在react的state中（无需使其响应式）。

调用流程

方法

init(option: object): Promise

duix.init({
  sign: '',
  containerLable: '.remote-container'   
})

参数

| 名称| 类型 |必填 | 描述 | | :-----------------| :-------------- | :----------------------------------------------------------- | :------ | | containerLable | string | 是 | 数字人容器。数字人将渲染到这个Dom中。 | | sign | string | 是 | 鉴权字符串。如何获取sign? |

start(option:object): Promise

调用 start 方法将开始渲染数字人并进行交互。

注意： 此方法需要在intialSucccess事件触发后调用，intialSucccess事件表示所有资源准备完成。如下：

duix.on('intialSucccess', () => {
  duix.start({
     conversationId: '',    
     muted: true,
     wipeGreen: false,
 }).then(res => {
    console.log('res', res)
 })
})

参数

| key | 类型 | 必填 | 默认值 | 说明 | | ----------- | ------- | ---- | ------ | ------------------------------------------------------------ | | conversationId| number | 是 | | 平台会话id| | muted | boolean | 否 | false | 是否以静音的模式开启数字人视频。重要提示: 由于自动播放政策限制，如果您的网页还没有与用户有任何点击交互，请把这个参数置为true，否则将导致数字人无法加载。如果您有这样的需求，建议您先用静音模式启动，在产品中设计一个交互，比如一个“开始”的按钮来调用duix.setVideoMuted(false) | | openAsr | boolean | 否 | false | 是否直接开启实时识别，此项传true，相当于在调start后立即调用 openAsr 方法 | | wipeGreen | boolean | 否 | false | 是否对视频做扣绿幕操作。在平台上创建会话时需上传一个纯绿色的背景图片 | | useActSection | boolean | 否 | false | 是否启动数字人动作区间。启用后数字人不说话时不会有动作（需要数字人模型支持动作区间） |

setVideoMuted(flag:boolean)

设置数字人视频是否静音, true是静音，false为非静音。

break()

打断数字人说话

speak(option: Object): Promise

驱动数字人说话，支持文本驱动和音频文件驱动。

duix.speak({content: '', audio: 'https://your.website.com/xxx/x.wav'})

参数

| 名称| 类型 |必填 | 描述 | | :-----------------| :-------------- | :----------------------------------------------------------- | ------ | | content | string | 是 | 数字人回答的文本 | | audio | string | 否 | 数字人回答音频地址，可以通过getAnswer获取平台配置的答案| | interrupt | boolean | 否 | 是否打断之前说的话 |

answer(option: Object): Promise

数字人回答问题

duix.answer({question: 'xxx'})

参数

| 名称| 类型 |必填 | 描述 | | :-----------------| :-------------- | :----------------------------------------------------------- | ------ | | question | string | 是 | 问题文本 | | interrupt | boolean | 否 | 是否打断之前说的话 | | userId | number | 否 | 业务层用户唯一id，开启记忆功能时使用，用来关联用户历史记录. 如果为空，默认使用appId | | isHistory | boolean | 否 | 是否开启历史记录 | | isVector | boolean | 否 | 决策是否带入之前的相似回答 |

getAnswer(option: Object): Promise

平台获取问题的答案

duix.getAnswer({ question: '今天的天气怎么样？' })

参数

| 名称| 类型 |必填 | 描述 | | :-----------------| :-------------- | :----------------------------------------------------------- | ------ | | question | string | 是 | 问题文本 | | userId | number | 否 | 业务侧用户唯一id，指定后获得答案是开启记忆功能 |

返回data

| 名称| 类型 | 描述 | | :-----------------| :-------------- | :----------------------------------------------------------- | | answer | string | 数字人回答的文本 |
| audio | string | 数字人回答音频地址 |

startRecord():Promise

开始录音。

stopRecord():Promise

结束录音，录音成功后将返加语音识别结果（文本），返回Promise。

openAsr():Promise

开启语音实时识别(注意此方法需在show触发时候调用)。开启语音实时识别后，可通过监听 asrResult 事件，接收识别（文本）结果。

closeAsr():Promise

关闭语音实时识别。

stop()

停止当前会话。建议在页卸载事件中调用此方法，以防止刷新或关闭网页时当前会话资源未及时释放。

window.addEventListener('beforeunload', function(event) {
  if (duix) {
    duix.stop()
  }
});

getLocalStream()

获取本地语音流，方便外部做音频可视化等功能

getRemoteStream()

获取远端音视频流，方便外部做自定义

on(eventname, callback)

监听事件。

参数

eventname

事件名称，详见下方表格。

callback

回调函数

返回格式说明

对于返回Promise的方法，参数格式为{ err, data },如果err不为空，则代表调用失败。

事件

| 名称 | 描述 | | :------------- | :----------------------------------------------------------- | | error | 有未捕获错误时触发。 | | bye | 会话结束时触发。 | | intialSucccess | 数字人初始化成功。可以在这个事件的回调中调用start方法 | | show | 出数字人已显示。 | | progress | 数字人加载进度。 | | speakSection | 数字人说话当前的音频和文本片段（answer方法会采用流式获取结果，如果单独调用speak,该事件与speakStart一致） | | speakStart | 驱动数字人说话，到数字人实际说话之间有一点延迟，此事件表示数字人实际开始说话了 | | speakEnd | 数字人说话结束 | | openAsrSuccess | 语音实时识别开启成功后触发 | | asrResult | 语音实时识别结果 | | asrClose | 关闭语音实时识别成功时触发 | | report | 每秒报告RTC网络/画面质量等信息 |

error

{
  code: '', // 错误码  
  message: '', // 错误信息
  data: {} // 错误内容
}

error code

| 名称 | 描述 | data | | :------------- | :----------| :---------- | | 3001 | RIC连接失败| | | 4001 | 开始会话失败 | | | 4005 | 鉴权失败 | | | 4007 | 服务端会话异常结束 | code: 100305 模型文件未找到| | 4008 | 获取麦克风流失败 | |

progress

number类型的进度，0-100

speakSection

{
  audio: '', // 音频地址
  content: '', // 文本内容
}

speakStart

{
  audio: '', // 音频地址
  content: '', // 文本内容
}

speakEnd

{
  audio: '', // 音频地址
  content: '', // 文本内容
}

asrResult

字符串类型，asr识别文本结果

report

{
    "video": { // 视频相关信息
        "download": {
            "frameWidth": 1920, // 分辨率-宽
            "frameHeight": 1080,// 分辨率-高
            "framesPerSecond": 24,// 分辨率-帧率
            "packetsLost": 0, // 总丢包数
            "packetsLostPerSecond": 0 // 总丢率（每秒丢包数）
        }
    },
    "connection": { // 连接信息
        "bytesSent": 206482, // 发送总字节数
        "bytesReceived": 79179770, // 接收总字节数
        "currentRoundTripTime": 3, // 包往返时间（单位毫秒），这个时间越大画面越延迟
        "timestamp": 1688043940523,
        "receivedBitsPerSecond": 2978472, // 接收码率（每秒接收到的bit数，1Mb = 1024^2 bit）
        "sentBitsPerSecond": 7920 // 发送码率（每秒发送的bit数，1Mb = 1024^2 bit）
    }
}

注意： 未在上述详细列出的事件参数均为空

示例代码

示例链接

下载示例代码

常见问题

1. 部分浏览器，特别是移动端浏览器，播放数字人需要由用户操作触发，推荐start事件由用户点击调用，哪怕muted是静音状态，否则部分浏览器可能不显示数字人
2. 部分ios系统下的微信浏览器需要调用navigator.mediaDevices.getUserMedia授权后才能播放远端流

版本记录

2.1.3

1. 数字人模型增加动作区间，默认静默不执行动作。
2. 修复answer接口中间异常时没有speakEnd事件
3. 修复stop时没有清空播放队列
4. startRecord增加鉴权

2.1.2

1. 修复部分浏览器speak传入纯文本时，url地址发送错误。

2.1.1

1. 修复answer接口异常和数据异常时没有返回err
2. 修复在speakStart事件回调中调用speak会播放两遍
3. 修复firefox中，RTC获取candidate为空导致会话启动失败

2.1.0

1. 增加answer方法，支持GPT流式接口返回，增加speakSection事件
2. 支持会话多语言识别
3. 优化asr断开时自动重连
4. getAnswer增加userId参数，支持记忆功能

2.0.3

1. 修复ios部分版本下safari浏览器不显示数字人的问题

2.0.2

1. 支持大模型流式返回
2. speak方法增加interrupt参数
3. 增加break打断方法

2.0.1

1. 调用返回Promise,统一返回格式为{err: '', data: ''}
2. 增加init方法
3. start方法增加conversationId必填字段
4. speak方法入参格式调整
5. 去掉break方法
6. 增加getAnswer方法

1.1.19

1. 修复report事件在初次触发时参数可能不完整的问题

1.1.18

1. speakStart和speakEnd事件暴露与本次事件相关的额外数据。

1.1.17

1. 新增report事件。

1.1.15

1. 优化绿幕扣图算法，效果更好，性能消耗更低。
2. 绿幕扣图与背景透明同时打开时，只启用绿幕扣图，以节省客户端GPU消耗。
3. 其他性能优化。

1.1.14

1. 面页刷新/关闭时自动释放资源。

1.1.13

1. 修复一些问题。

1.1.11

1. duix.stop方法关闭ws通道。

1.1.10

1. 修复文档中的一处错误。

1.1.8

1. 更新README文档，增加start方法调用注意事项说明。

1.1.6

1. 新增break（打断）方法，可立即停止数字人说话。

1.1.5

1. start方法新增参数wipeGreen，以支持对视频扣绿幕。

1.1.4

1. 修复当指定的数字人容器没有设置z-index时，数字人可以挡住UI的问题。
2. 优化stop方法，使得在页面卸载类事件中调用stop方法可以确保后端释放资源。比如：

window.addEventListener('beforeunload', function(event) {
    console.log('on beforeunload')
    if (duix) {
        duix.stop()
    }
});

3. 优化数字人显示策略，数字人画面将在show事件触发时才会显示。

1.1.2

1. 启动时打印版本号，方便定位问题。
2. start 方法的参数新增transparent值，如果传true，则数字人背景透明。
3. start 方法将返回一个uuid，此UUID是本次会话的ID，可用于从后端主动关闭此会话

1.1.1

1. 修复start方法中传muted: true无效的bug。

1.1.0

1. openAsr方法不再传入回调方法，改用 asrResult 事件来接收实时语音识别回传的识别结果。
2. 新增 speakStart 事件，表示数字人开始说话。
3. 新增 speakEnd 事件，数字人说话结束。
4. stopRecord 方法新增支持 Promise 方式调用，原传回调的方式目前依然兼容，建议使用 Promise 方式。

1.0.30

1. 更改DUIX构造函数，现在只需两个必传参数。
2. 增强了IOS兼容性，修复IOS15.1以上实时识别换效的问题。
3. 新增统一日志。
4. start方法接收robotMode参数，现在可以在不重新new实例的情况下，切换对话/直驱模式。

1.0.27

1. 修复rtc回音问题

1.0.26

1. 取消sdk内部录音后，自动播放功能，改为事件抛出，外部播放

1.0.25

1. 取消sdk内部语音转文字后自动播放功能，改为事件抛出，外部播放

1.0.24

1. 新增私有化配置支持

1.0.23

1. 一键构建打包脚本优化

1.0.22

1. 新增xmpp新增disconnect外抛时间
2. rtc audio参数新增几个配置项

1.0.19

1. 更改sdk底层架构，改为走webrtc模式

0.0.45 (暂未发布到npm)

1. 解决监听息屏事件多次触发的问题
2. 解决数字人pause后stop后resume人脸会继续播放的问题
3. 解决数字人stop后resume音频会继续播放的问题
4. 解决在暂停播放情况下 切到后台再回来会直接开始播放

0.0.44

1. 大版本添加鉴权功能
2. 优化测试代码方便测试
3. 优化了一些bug

0.0.43

1. 新增从AudioContext获取MediaStream的方法getAudioDest

0.0.42

1. Request.js => getArrayBuffer 添加主动断开请求的方法
2. DigitalHuman.js => _sayVoice 添加判断网络取消时的return
3. DigitalHuman.js => stop 添加cancel方法 防止stop后网络请求才成功导致stop失败

0.0.41

1. Request.js 添加axios超时时间
2. Request.js => getArrayBuffer 添加音频请求失败返回 && DigitalHuman.js => _sayVoice 添加判断 音频请求失败时调用event && DUIX.js => 添加新的事件 audioFailed 音频请求失败时event

0.0.40

1. 修复bug DigitalHuman.js line:166 & 169 事件名错误导致wsClose wsError不触发的bug
2. 修改webpack配置 默认输出一次sdk版本 方便开发和生产环境的调试

0.0.39

1. 新增暂停(pause)，恢复(resume)方法。
2. 修复偶现的吞字现象。
3. 播放结束不再触发puase事件，只触发ended 事件。
4. 新增功能，页面不可见时暂停画面和声音，恢复可见时继续播放。

0.0.38

1. 修复偶现的调用say方法后，加载卡住，不能播放的bug。
2. 新增功能。当options.body.autoplay=false时，调用say不自动播放静默。

0.0.37

1. 新增 getCanvas() 方法。
2. 新增 getAudioContext() 方法。

0.0.36

1. 修改启动方式,现在以ip形式系统 手机上可以正常访问测试
2. AIFace.js reconnectInterval修改为1 开启断线重连
3. Bug修复 AIFace.js line:48 close => onClose

0.0.34

1. 新增 wsClose 事件，AIFace 连接关闭事件。
2. 新增 wsError 事件, AIFace 连接错误事件。

0.0.33

1. 静默视频正放/倒放切换，解决静默首尾不相接（如约旦男）时静默视频跳动的问题。
2. 删除一些调试日志。
3. 修复不触发load事件的bug

0.0.32

1. 修复过短的音频不能触发 canplaythrough 事件的bug。

0.0.31

1. 进一步优化客户端缓冲策略，降低内存占用，现在约旦模型内存占用稳定在700M左右。
2. 修复一些bug

0.0.30

1. 修改客户端缓冲策略，降低客户端内存占用。
2. 新增配置 options.body.autoplay ，用于控制静默视频加载完是否自动播放。默认为true，如置为false，可在 bodyload 事件触发后调用 duix.playSilence() 方法主动播放。
3. 优化TTS缓存方案，现在缓存可以保留更长时间。

0.0.27

1. 新增配置body.autoplay控制身体加载完后是否自动播放。
2. 删除实时贴图的代码，必须走缓冲，缓冲大小可设置为0。
3. 默认缓冲策略修改为auto，由第一次加载人脸的开始半秒加载速度预测缓冲大小。
4. 调整解码间隔时间，降低CPU的瞬间消耗，解决部分手机CPU瞬间占用过高导致页面强行刷新的问题。

0.0.26

1. 修复不传 quality.fps 和 quality.quarter时的报错。
2. 新增bodyprocess事件用于通知身体加载进度。

duix-third-party document

duix-third-party sdk use document

1. download npm package

npm install duix-third-party -S
or yarn add duix-third-party -S
or pnpm install duix-third-party -S

2. use duix-third-party

import Duix from "duix-third-party";

const duixObj = new Duix();

let thirdPartyAsrRenderObj = null;

duixObj.on("intialSucccess", async () => { try { await duixObj.start({ conversationId, // useActSection: true, // openAsr: false, // Not needed }); } catch { toast.error( " The digital person is occupied. Please refresh and try again later " ); } });

duixObj.init({ containerLable: '#digital-human', // video document id sign: token, // authentication });

duixObj.on("show", () => { thirdPartyAsrRenderObj = duix.thirdPartyAsrRenderObj({ wssUrl: ws://1.13.102.82:18999/ws/asr/speech-to-text?token=${encodeURIComponent( // asr websocket address token )}, ttsUrl: "/tts/text-to-speech", // tts address renderType: { // Audio configuration sampleRate: 16000, bitRate: 16, type: "wav", //Audio type mp3 wav }, }); });

duixObj.on("progress", (progress: number) => { console.debug("progress", progress); });

duixObj.on("speakEnd", () => { // digital speaker End console.debug("speakEnd"); }); duixObj.on("speakError", (data: any) => { // digital speaker Error console.debug("speakError", data); });

const starAsr = () => { // Start opening recording thirdPartyAsrRenderObj.starAsr(); }

duixObj.break(); // Interrupting a digital speaker

const sendAsrEnd = () => { // sendAsrEnd thirdPartyAsrRenderObj.sendAsrEnd(async(text: string) => { // Get asr text Function (AsrEnd)

  try {
    const { data: { answer } = { answer: '' } } = await duixObj.getAnswer({
      question: text,
      userId,
    });
    
    thirdPartyAsrRenderObj
        .ttsStream(answer, token) // Get tts audio address Function
        .then((res) => {
          const { success, data: { filePath } } = JSON.parse(res)
          if (success) {
            duixObj.speak({ // digital speaker  speak
              content: text,
              audio: `http://1.13.102.82:18999${filePath}`
            });
          }
          console.info(res);
        })
        .catch((error) => {
          console.error(error);
        });
    
  } catch(e: any) {
    console.log(e)
  }
  console.log(text);
});

}

npm install [email protected] -S Update to 1.0.3

thirdPartyAsrRenderObj = duix.thirdPartyAsrRenderObj({ ..., asrExitIntervalTime: 4, // How long does it take to remain silent (seconds) powerLevel: 40, // Determine the volume threshold for silence });

1.asrRealTimeResult function

const asrRealTimeResult = () => { this.thirdPartyAsrRenderObj.on("asrRealTimeResult", (text: string) => { console.log("asrRealTimeResult"); console.log(text); console.log("asrRealTimeResult"); }); ``}

2.asrRealTimeState function // State: 'start', 'end'

const asrRealTimeState = () => { this.thirdPartyAsrRenderObj.on("asrRealTimeState", (State: string) => { console.log("asrRealTimeState"); console.log(State); console.log("asrRealTimeState"); }); ``}

3.asrSocketError function

const asrSocketError = () => { this.thirdPartyAsrRenderObj.on("asrSocketError", (error: object) => { console.log("asrSocketError"); console.log(error); console.log("asrSocketError"); }); ``}

3.isAsrCloseHandle function

this.thirdPartyAsrRenderObj.on("isAsrCloseHandle", (state: boolean) => { if (state) this.sendAsrEnd(); console.log( "isAsrCloseHandle------------" + state + "isAsrCloseHandle------------" ); });