Intelligent Media Services:Web 統合ガイド

ソースコード

ダウンロードリンク

GitHub からソースコードをダウンロードします。

ディレクトリ構造

.
└── React
    ├── README.md
    ├── eslint.config.js
    ├── index.html     // PC 用
    ├── mobile.html    // モバイル用
    ├── package.json
    ├── src
    │   ├── Mobile     // モバイル UI
    │   ├── PC         // PC UI
    │   ├── common     // 共通メソッド
    │   ├── controller
    │   ├── interface.ts
    │   ├── runConfig.ts  // ランタイム設定
    │   ├── service
    │   └── vite-env.d.ts
    ├── tsconfig.app.json
    ├── tsconfig.json
    └── vite.config.ts

事前準備

AppServer 上で必要な API 操作を開発するか、提供されているサーバーのソースコードをデプロイします。詳細については、「プロジェクトのデプロイ」をご参照ください。

デモの実行

1. React ディレクトリに移動します。

2. npm install を実行して依存関係をインストールします。

3. src/runConfig.ts で、AppServer アドレスと エージェント ID を設定します。

// src/runConfig.ts
const runConfig: AICallRunConfig = {
  // エージェントのリージョンに合わせて変更してください
  region: 'cn-shanghai',
  appServer: 'Your AppServer address',
  voiceAgentId: 'Your voice agent ID',
  avatarAgentId: 'Your avatar agent ID',
  visionAgentId: 'Your vision agent ID',
  // callTemplateConfig: callTemplateConfig,
};

4. npm run dev を実行して開発サーバーを起動します。