:Web

フローチャート

アプリは AppServer から RTC トークンを取得 し、その後 callWithConfig(config) メソッドを呼び出して通話を開始できます。 通話中は、AICallKit API を呼び出して、AI エージェントのライブ字幕や中断などのインタラクティブな機能を実装できます。 AICallKit はリアルタイムの音声およびビデオ機能に依存しているため、ApsaraVideo Real-Time Communication (ARTC) の機能が AICallKit SDK に統合されています。

ステップ 1: エンジンの作成と初期化

ARTCAICallEngine エンジンを作成して初期化します。 サンプルコード:

// エージェントタイプを指定します: voice、avatar、または vision。
// エージェントタイプを指定します：音声、アバター、またはビジョン。
let agentType: AICallAgentType;

// パラメーターを初期化します。
const config = {
  muteMicrophone: false, // マイクをミュートするかどうかを指定します。
  // その他のパラメーターは省略します。
};

// vision エージェントを使用する場合は、ローカルビデオビューを設定します。
// ビジョンエージェントを使用する場合は、ローカルビデオビューを設定します。
if (agentType === AICallAgentType.VisionAgent) {
  config.previewElement = 'example-preview-element-id';
  config.cameraConfig = {
    width: 450,
    height: 800,
    frameRate: 5,
  };
}

const engine = new ARTCAICallEngine(config);

// avatar エージェントを使用する場合は、エージェントビューを設定します。
// アバターエージェントを使用する場合は、エージェントビューを設定します。
if (agentType === AICallAgentType.AvatarAgent) {
  engine.setAgentView('example-agent-element-id');
}

ステップ 2: コールバックの実装

詳細については、「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) => {
  // 現在の通話の音声割り込み設定が変更されました。
});

ステップ 3: AICallConfig の作成と初期化

詳細については、「AICallConfig」をご参照ください。

const callConfig = {
  agentId: "xxx",             // エージェント ID。
  agentType: agentType,       // エージェントタイプ。
  userId: "xxx",              // アプリにログインしているユーザーの ID。
  region: "xx-xxx",           // エージェントサービスをホストしているリージョン。
  userJoinToken: "xxxxxxxxx", // RTC トークン。
};

RTC トークンを取得する方法については、「ARTC 認証トークンの生成」をご参照ください。

ステップ 4: 通話の開始

callWithConfig(config) メソッドを呼び出して、エージェントコールを開始します。

// エージェントを初期化した後、通話を開始します。
engine.callWithConfig(callConfig);

// 接続されると、次のコールバックがトリガーされます。
engine.on('callBegin', () => {
  // 通話が開始されました。
});

ステップ 5: 通話機能の実装

通話を開始した後、ビジネス要件に基づいて、字幕の管理、エージェントの音声の中断、その他の操作を実行できます。 詳細については、「機能」をご参照ください。

ステップ 6: 通話の終了

handup() メソッドを呼び出して、通話を終了します。

engine.hangup();