Web使用指南

本文将介绍如何将AICallKit SDK集成到您的Web应用中。

集成SDK

npm install aliyun-auikit-aicall --save

SDK使用示例

// 引入SDK
import ARTCAICallEngine, { ARTCAICallErrorCode, ARTCAICallAgentState, AICallSubtitleData } from 'aliyun-auikit-aicall';

// 创建engine实例
const engine = new ARTCAICallEngine();

// 其他功能调用示例,请参考API说明

// 回调处理(仅示例不分核心的回调操作)
engine.on('errorOccurred', (code: ARTCAICallErrorCode) => {
  // 发生了错误
  engine.handup();
});

engine.on('callBegin', () => {
  // 通话开始
});

engine.on('callEnd', () => {
  // 通话结束
});

engine.on('agentStateChanged', (state: ARTCAICallAgentState) => {
  // 智能体状态改变
});

engine.on('userSubtitleNotify', (subtitle: AICallSubtitleData) => {
  // 用户提问被智能体识别结果的通知
});

engine.on('agentSubtitleNotify', (subtitle: AICallSubtitleData) => {
  // 智能体回答结果通知
});

engine.on('voiceIdChanged', (voiceId: string) => {
  // 当前通话的音色发生了改变
});

engine.on('voiceInterruptChanged', (enable: boolean) => {
  // 当前通话的语音打断是否启用
});

const userId = '';

// 从服务端获取 agentInfo
const agentInfo = fetchAgentInfo();

try {
  // 启动智能体后,开始通话
  engine.call(userId, agentInfo);
} catch (error) {}

// 结束通话
engine.handup();

API说明

属性说明

字段

描述

userId

获取当前通话的UserId

isOnCall

是否通话中

agentInfo

获取当前智能体信息

agentState

获取当前智能体状态

API概览

类/协议

API

说明

call

开始通话

handup

挂断

setAgentView

设置智能体渲染视图,及缩放模式

interruptSpeaking

打断智能体讲话

enableVoiceInterrupt

开启/关闭智能打断

startPreview

设置本地预览地址

muteLocalCamera

开关摄像头推送

switchCamera

切换摄像头

switchVoiceId

切换音色

mute

静音/取消禁音麦克风

getRTCInstance

获取RTC引擎

destroy

释放资源

引擎回调事件

errorOccurred

发生了错误

callBegin

通话开始

callEnd

通话结束

agentStateChanged

智能体状态改变

speakingVolumeChanged

音量变化

userSubtitleNotify

用户提问被智能体识别结果的通知

agentSubtitleNotify

智能体回答结果通知

voiceIdChanged

当前通话的音色发生了改变

voiceInterruptChanged

当前通话的语音打断是否启用

ARTCAICallEngine 详情

call

开始通话

async call(userId: string, agentInfo: AICallAgentInfo, config?: AICallEngineConfig): Promise<void>>

参数详情:

参数

类型

含义

userId

String

当前用户uid

agentInfo

AICallAgentInfo

智能体信息

config

AICallEngineConfig

初始化配置,类型定义:

{
  //是否静音麦克风
  muteMicrophone?: boolean;
  //视觉理解模式是否关闭摄像头
  muteCamera?: boolean;
  //是否开启按住说话
  enablePushToTalk?: boolean;
  //视觉理解模式 预览视频元素
  previewElement?: string | HTMLVideoElement;
  //视觉理解模式 摄像头设置
  cameraConfig?: AICallCameraConfig;
}

handup

退出通话

async handup(): Promise<void>

setAgentView

设置智能体渲染视图,及视图模式

setAgentView(view: HTMLVideoElement | string): void

参数详情:

参数

类型

含义

view

HTMLVideoElement | string

video 标签或者对应的 id

interruptSpeaking

打断智能体讲话

async interruptSpeaking(): Promise<void>

enableVoiceInterrupt

开启/关闭智能打断

async enableVoiceInterrupt(enable: boolean): Promise<void>

参数详情:

参数

类型

含义

enable

boolean

开启/关闭

startPreview

设置本地预览地址

startPreview(view: HTMLVideoElement | string): void

参数详情:

参数

类型

含义

view

HTMLVideoElement | string

video 标签或者对应的 id

muteLocalCamera

开关摄像头推送

async muteLocalCamera(mute: boolean)

参数详情:

参数

类型

含义

mute

boolean

是否开启摄像头

switchCamera

切换摄像头

async switchCamera(deviceId?: string)

参数详情:

参数

类型

含义

deviceId

string

设备 Id,可以通过 ARTCAICallEngine.getCameraList() 获取,不传在手机端会切换前后置摄像头。

switchVoiceId

切换音色

async switchVoiceId(voiceId: string): Promise<void>

参数详情:

参数

类型

含义

voiceId

string

音色id

mute

静音/取消禁音麦克风

async mute(mute: boolean): Promise<void>

参数详情:

参数

类型

含义

mute

boolean

静音/取消禁音

getRTCInstance

获取RTC引擎

getRTCInstance(): AliRtcEngine | undefined

destroy

释放资源

async destroy()

ARTCAICallEngineDelegate详情

errorOccurred

当前通话时发生了错误

参数详情:

参数

类型

含义

code

AICallErrorCode

错误类型

callBegin

通话开始

callEnd

通话结束

agentStateChanged

智能体状态改变

参数详情:

参数

类型

含义

state

AICallAgentState

当前智能体状态:聆听中\思考中\讲话中

speakingVolumeChanged

音量变化通知

参数详情:

参数

类型

含义

uid

string

当前讲话人的uid,当前用户为空字符串

volume

Int32

音量[0-100]

userSubtitleNotify

用户提问被智能体识别结果的通知

参数详情:

参数

类型

含义

subtitle

AICallSubtitleData

字幕信息

agentSubtitleNotify

智能体回答结果通知

参数详情:

参数

类型

含义

subtitle

AICallSubtitleData

字幕信息

voiceIdChanged

当前通话的音色发生了改变

参数详情:

参数

类型

含义

voiceId

string

当前音色Id

voiceInterruptChanged

当前通话的语音打断是否启用

参数详情:

参数

类型

含义

enable

boolean

是否启用