npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

duix-guiji-light

v0.0.1

Published

数字人实时渲染引擎

Downloads

8

Readme

硅基DUIX H5 SDK使用文档

安装

npm i duix-guiji-light -S

快速开始


import DUIX from 'duix-guiji-light'

const duix = new DUIX()

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

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

注意: 不要将duix实例放在Vue的data中,也不要放在react的state中(无需使其响应式)。

调用流程

方法

init(option: object): Promise

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

参数

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

start(option:object): Promise

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

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

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

参数

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

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 | 否 | 是否打断之前说的话 |

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()

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

resume()

恢复播放,目前仅针对部分移动端浏览器即便由用户操作触发自动播放,仍无效的情况。在抛出4009的error中由用户操作触发resume方法可解决。

on(eventname, callback)

监听事件。

参数
eventname

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

callback

回调函数

返回格式说明

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

事件

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

error

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

error code

| 名称 | 描述 | data | | :------------- | :----------| :---------- | | 3001 | RIC连接失败| | | 4001 | 开始会话失败 | | | 4005 | 鉴权失败 | | | 4007 | 服务端会话异常结束 | code: 100305 模型文件未找到| | 4008 | 获取麦克风流失败 | | | 4009 | 浏览器基于播放策略无法自动播放 | 请先考虑静音播放或用户操作调用start方法|

progress

number类型的进度,0-100

speakSection


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

speakStart


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

speakEnd


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

asrData

每段文本的识别,会以一个asrStart开始,一个asrStop结束,中间有一个或多个asrData(递增式的推送),可以在asrData事件中,获取语音识别结果,用于展示。


{
  content: '', // 文本内容
}

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授权后才能播放远端流
  3. 如果是开启asr识别的情况下,会需要getUserMedia的用户授权,由于浏览器限制,此时本地调试需要https的环境。
  4. 微信小程序对接的方式,可以通过web-view组件对接。
  5. 部分移动端浏览器即便由用户点击调用start开启,仍无法适应浏览器的自动播放策略,可在收到4009的error时,再由用户事件触发resume方法
  6. 如果需要使用开场白、唤醒词、打断词等配置,可通过openapi——获取会话详情接口取得,SDK本身不提供业务逻辑。
  7. 部分浏览器不支持RTC,目前验证不支持的有小米浏览器。
  8. 由于webrtc不支持http协议,不支持ip地址访问,请使用https及域名访问。

版本记录

0.0.1 1.初始化sdk