在Web應用中整合AICallKitSDK實現音視訊通話智能體-智能媒體服務-阿里雲

本文將介紹如何將AICallKit SDK整合到您的Web應用中。

環境要求

Node 18.0 及以上版本，推薦使用最新 LTS 版本
Webpack 5 及以上版本或者 Vite

商務程序

您的App通過AppServer（你的商務服務器）產生ARTC鑒權Token，便可調用callWithConfig(config)方法進入通話，在通話過程中，可以調用AICallKit的API實現智能體的即時字幕、打斷等互動功能。AICallKit依賴於即時音視頻能力，因此在內部已實現AliVCSDK_ARTC SDK的相關功能。

整合SDK

npm install aliyun-auikit-aicall --save

SDK開發指南

步驟一：建立&初始化引擎

建立&初始化ARTCAICallEngine引擎，範例程式碼如下：

// 指定智能體的類型：純語音、數字人、視覺理解
let agentType: AICallAgentType;

// 初始化參數
const config = {
  muteMicrophone: false, // 是否靜音麥克風，按需設定
  // 省略其他參數
}

// 如果是視覺理解類型，則需要配置本地視頻預覽配置
if (agentType === AICallAgentType.VisionAgent) {
  config.previewElement = 'example-preview-element-id';
  config.cameraConfig = {
    width: 450,
    height: 800,
    frameRate: 5,
  };
}

const engine = new ARTCAICallEngine(config);

// 如果是數字人類型，則需要配置數字人顯示的視圖配置
if (agentType === AICallAgentType.AvatarAgent) {
  engine.setAgentView('example-agent-element-id');
}

步驟二：實現回調方法

實現引擎回調，按需實現回調方法。引擎回調介面詳情，請參見ARTCAICallEngine事件詳情。

// 如果啟動通話失敗，會觸發下面回調
engine.on('errorOccurred', (code: number) => {
  // 通過過程發生了錯誤，進行掛斷
  engine.handup();
});

// 如果智能體啟動通話成功，會觸發下面回調
engine.on('agentStarted', () => {
  // 智能體執行個體已啟動
});

// 如果當前通話接通，會觸發下面回調
engine.on('callBegin', () => {
  // 通話開始
});

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

engine.on('agentStateChange', (newState: AICallAgentState) => {
  // 智能體狀態改變
});

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

engine.on('userSubtitleNotify', (subtitle: AICallSubtitleData, voiceprintResult: AICallVoiceprintResult) => {
  // 使用者語音辨識結果通知
});

engine.on('voiceIdChanged', (voiceId: string) => {
  // 當前通話的音色發生了改變
});

engine.on('voiceInterruptChanged', (enable: boolean) => {
  // 當前通話的語音智能打斷狀態變更
});

步驟三：建立並初始化AICallConfig

詳細結構請參見AICallConfig。

const callConfig = {
  agentId: "xxx",             // 智能體Id
  agentType: agentType,       // 智能體類型
  userId: "xxx",              // 推薦使用你的App登入後的使用者id
  region: "xx-xxx",           // 智能體服務所在的地區
  userJoinToken: "xxxxxxxxx", // RTC Token
};

地區名稱	Region Id
華東1（杭州）	cn-hangzhou
華東2（上海）	cn-shanghai
華北2（北京）	cn-beijing
華南1（深圳）	cn-shenzhen
新加坡	ap-southeast-1

userJoinToken需要您擷取RTC Token，詳情請參見擷取RTC Token。

步驟四：發起智能體呼叫

調用callWithConfig(config)介面發起智能體呼叫。

// 啟動智能體後，開始通話
engine.callWithConfig(callConfig);

// 如果當前通話接通，會觸發下面回調
engine.on('callBegin', () => {
  // 通話開始
});

步驟五：通話中的業務實現

在開啟通話後，您可以根據您的業務需求處理字幕、打斷智能體講話等。詳細內容，請參見功能實現。

步驟六：通話結束，掛斷智能體通話

調用handup()介面，掛斷智能體通話。

engine.hangup();