feat(授权): 添加后端服务支持自动获取授权码
- 新增 server 目录包含后端服务，支持通过 AK/SK 或用户名密码认证获取授权码 - 添加前端 API 模块实现授权码获取功能 - 更新 UI 增加获取授权码按钮和输入框布局 - 完善 README 文档说明后端配置和启动流程
This commit is contained in:
149
README.md
149
README.md
@@ -11,8 +11,12 @@ antiwear-web/
|
||||
│ ├── HwICSUiSdk.d.ts # TypeScript 类型定义
|
||||
│ ├── HwICSUiSdk.css # SDK 样式
|
||||
│ └── ...
|
||||
├── server/ # 后端服务
|
||||
│ ├── index.js # 后端主入口
|
||||
│ └── package.json # 后端依赖
|
||||
├── scripts/
|
||||
│ └── main.js # 主逻辑代码
|
||||
│ ├── main.js # 主逻辑代码
|
||||
│ └── api.js # 前端 API 调用模块
|
||||
├── styles/
|
||||
│ └── main.css # 自定义样式
|
||||
├── index.html # 主页面
|
||||
@@ -23,28 +27,63 @@ antiwear-web/
|
||||
|
||||
### 1. 环境要求
|
||||
|
||||
- Node.js 14+ (后端服务)
|
||||
- 现代浏览器（Chrome、Firefox、Edge、Safari 最新版本）
|
||||
- 支持 WebRTC 和 WebSocket
|
||||
- 需要麦克风权限（用于语音交互）
|
||||
|
||||
### 2. 配置参数
|
||||
### 2. 后端服务配置
|
||||
|
||||
#### 默认参数（已预填）
|
||||
| 参数 | 默认值 |
|
||||
|------|--------|
|
||||
| 服务器地址 | `metastudio-api.cn-north-4.myhuaweicloud.com` |
|
||||
| 机器人ID | `2c9084bf9c9cc1c0019db2c4ca2a5c89` |
|
||||
#### 方式一：使用 AK/SK 认证（推荐）
|
||||
|
||||
#### 需要填写的参数
|
||||
| 参数 | 说明 | 必填 |
|
||||
|------|------|------|
|
||||
| 一次性授权码 | 用于身份验证的临时授权码 | 是 |
|
||||
设置环境变量：
|
||||
```bash
|
||||
# Windows
|
||||
set HUAWEI_AK=your_access_key
|
||||
set HUAWEI_SK=your_secret_key
|
||||
set HUAWEI_PROJECT_ID=your_project_id
|
||||
```
|
||||
|
||||
> **如何获取授权码**：通过华为云 MetaStudio 控制台或 API 获取一次性授权码（有效期5分钟）
|
||||
```bash
|
||||
# Linux/Mac
|
||||
export HUAWEI_AK=your_access_key
|
||||
export HUAWEI_SK=your_secret_key
|
||||
export HUAWEI_PROJECT_ID=your_project_id
|
||||
```
|
||||
|
||||
### 3. 启动项目
|
||||
#### 方式二：使用用户名密码认证
|
||||
|
||||
由于使用了 ES Modules，需要通过本地服务器运行：
|
||||
```bash
|
||||
# Windows
|
||||
set HUAWEI_USERNAME=your_username
|
||||
set HUAWEI_PASSWORD=your_password
|
||||
set HUAWEI_DOMAIN_NAME=your_domain_name
|
||||
set HUAWEI_PROJECT_ID=your_project_id
|
||||
```
|
||||
|
||||
```bash
|
||||
# Linux/Mac
|
||||
export HUAWEI_USERNAME=your_username
|
||||
export HUAWEI_PASSWORD=your_password
|
||||
export HUAWEI_DOMAIN_NAME=your_domain_name
|
||||
export HUAWEI_PROJECT_ID=your_project_id
|
||||
```
|
||||
|
||||
### 3. 启动服务
|
||||
|
||||
#### 启动后端服务
|
||||
|
||||
```bash
|
||||
cd server
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
后端服务将在 `http://localhost:3001` 启动。
|
||||
|
||||
#### 启动前端项目
|
||||
|
||||
在另一个终端窗口：
|
||||
|
||||
```bash
|
||||
# 使用 Python 3
|
||||
@@ -58,11 +97,21 @@ npx http-server -p 8080
|
||||
|
||||
然后在浏览器中访问 `http://localhost:8080`
|
||||
|
||||
### 4. 使用流程
|
||||
### 4. 配置参数
|
||||
|
||||
1. **获取授权码**：通过华为云控制台获取一次性授权码
|
||||
2. **填写配置**：在页面中输入授权码
|
||||
3. **初始化 SDK**：点击 "初始化 SDK" 开始使用
|
||||
#### 默认参数（已预填）
|
||||
| 参数 | 默认值 |
|
||||
|------|--------|
|
||||
| 服务器地址 | `metastudio-api.cn-north-4.myhuaweicloud.com` |
|
||||
| 机器人ID | `2c9084bf9c9cc1c0019db2c4ca2a5c89` |
|
||||
| 项目ID | `c67bf5e7d1f84d20a6eefff2c1ee9cd4` |
|
||||
|
||||
### 5. 使用流程
|
||||
|
||||
1. **启动后端服务**：`cd server && npm start`
|
||||
2. **启动前端服务器**：`python -m http.server 8080`
|
||||
3. **获取授权码**：点击页面上的 "🔑 获取授权码" 按钮
|
||||
4. **初始化 SDK**：点击 "初始化 SDK" 开始使用
|
||||
|
||||
## 📖 功能说明
|
||||
|
||||
@@ -105,55 +154,36 @@ SDK 提供了丰富的事件回调：
|
||||
|
||||
## 🔧 开发指南
|
||||
|
||||
### 引入 SDK
|
||||
### 前端 API 调用
|
||||
|
||||
```javascript
|
||||
import { HwICSUiSdk, ICSEventKey, InteractionMode, ConfigKey } from './hwICSUiSdk/HwICSUiSdk.esm.js';
|
||||
后端服务提供了以下接口：
|
||||
|
||||
#### 获取一次性授权码
|
||||
```
|
||||
POST /api/once-code
|
||||
```
|
||||
|
||||
### 初始化 SDK
|
||||
|
||||
```javascript
|
||||
await HwICSUiSdk.create({
|
||||
serverAddress: 'your-server-address',
|
||||
containerId: 'digitalHumanBox',
|
||||
robotId: 'your-robot-id',
|
||||
onceCode: 'your-once-code',
|
||||
config: {
|
||||
[ConfigKey.ENABLE_CAPTION]: true,
|
||||
[ConfigKey.ENABLE_CHAT_BTN]: true
|
||||
}
|
||||
});
|
||||
响应示例：
|
||||
```json
|
||||
{
|
||||
"once_code": "OATAXWpTNDPGjVyzxNLKvumcv297Q7uUz5CCltLtFDE1uqnPAPmS4jm61XnMQGuV"
|
||||
}
|
||||
```
|
||||
|
||||
### 注册事件监听
|
||||
|
||||
```javascript
|
||||
HwICSUiSdk.addEventListeners({
|
||||
[ICSEventKey.SPEAKING_START]: () => {
|
||||
console.log('数字人开始说话');
|
||||
},
|
||||
[ICSEventKey.SPEECH_RECOGNIZED]: (data) => {
|
||||
console.log('识别结果:', data);
|
||||
}
|
||||
});
|
||||
错误响应：
|
||||
```json
|
||||
{
|
||||
"error_code": "CONFIG_MISSING",
|
||||
"error_msg": "请配置环境变量 (AK/SK 或用户名密码)"
|
||||
}
|
||||
```
|
||||
|
||||
### 开始对话
|
||||
### 后端接口
|
||||
|
||||
```javascript
|
||||
await HwICSUiSdk.startChat({
|
||||
interactionMode: InteractionMode.AUDIO
|
||||
});
|
||||
```
|
||||
|
||||
### 发送文本消息
|
||||
|
||||
```javascript
|
||||
await HwICSUiSdk.sendTextQuestion({
|
||||
text: '你好，数字人！'
|
||||
});
|
||||
```
|
||||
| 接口 | 方法 | 说明 |
|
||||
|------|------|------|
|
||||
| /api/once-code | POST | 获取一次性授权码 |
|
||||
| /health | GET | 健康检查 |
|
||||
|
||||
## ⚙️ 配置选项
|
||||
|
||||
@@ -176,6 +206,7 @@ SDK 支持多种配置项：
|
||||
2. **浏览器权限**：首次使用需要授权麦克风和摄像头权限
|
||||
3. **资源释放**：页面卸载时务必调用 `destroy()` 方法释放资源
|
||||
4. **错误处理**：建议对所有异步操作添加错误处理
|
||||
5. **后端服务**：获取授权码需要启动后端服务并配置正确的环境变量
|
||||
|
||||
## 🔍 调试技巧
|
||||
|
||||
|
||||
Reference in New Issue
Block a user