# livetalkingv15-webui

**Repository Path**: brucezhao/livetalkingv15-webui

## Basic Information

- **Project Name**: livetalkingv15-webui
- **Description**: livetalkingv15-webui
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2025-09-24
- **Last Updated**: 2025-12-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LiveTalking 前端工程

## 更新记录

- 2025-12-24   增加使用 空格键  控制麦克风状态功能

## 项目介绍

LiveTalking 前端工程是一个基于 Vue 3 + Vite 的实时通信应用前端界面，提供 WebRTC 音视频通信、实时聊天等功能。

## 技术栈

- Vue 3 (Composition API)
- Vite (v4.5.0)
- Axios (1.6.7)
- Bootstrap (5.3.0)
- jQuery (3.7.1)
- Socket.io-client (4.7.2)
- Bootstrap Icons (1.10.0)

## 开发环境配置

### 前提条件

- **Node.js v16.20.2**（经过测试的兼容版本）
- npm 7+ 或 yarn 1.22+ 或 pnpm 7+

### 安装依赖

```bash
# 进入前端目录
cd livetalkingv15-webui

# 使用 npm 安装依赖
npm install
```

## 开发流程

### 启动开发服务器

```bash
npm run dev

# 或使用 yarn
# yarn dev

# 或使用 pnpm
# pnpm dev
```

开发服务器将在 https://0.0.0.0:3000 启动。

### 代理配置

开发环境下，所有以 `/api` 开头的请求会被代理到 http://<backend>:8010，这是为了与后端服务通信。

### 构建生产版本

```bash
npm run build

# 或使用 yarn
# yarn build

# 或使用 pnpm
# pnpm build
```

构建后的静态文件将输出到 `./web/dist` 目录，该目录已配置为后端服务的静态文件目录，方便部署集成。

### 预览生产版本

```bash
npm run preview

# 或使用 yarn
# yarn preview

# 或使用 pnpm
# pnpm preview
```

## 项目结构

```
livetalkingv15-webui/
├── index.html           # 入口 HTML 文件
├── node_modules/        # 依赖包目录
├── src/                 # 源代码目录
│   ├── assets/          # 静态资源（图片、样式等）
│   ├── components/      # Vue 组件
│   │   ├── AudioRecorder.vue
│   │   ├── ChatPanel.vue
│   │   └── WebRTCConnection.vue
│   ├── config/          # 配置文件
│   ├── services/        # API 服务和业务逻辑
│   │   ├── AudioService.js
│   │   └── WebRTCService.js
│   ├── App.vue          # 根组件
│   └── main.js          # 应用入口文件
├── ssl/                 # SSL 证书目录
├── public/              # 静态资源目录
├── web/                 # 构建输出目录
│   └── dist/            # 生产构建产物
├── vite.config.js       # Vite 配置文件
├── package.json         # 项目配置和依赖声明
└── package-lock.json    # 依赖锁定文件
```

## 重要配置说明

### Vite 配置

项目使用 Vite 作为构建工具，主要配置包括：

- 开发服务器主机：0.0.0.0
- 开发服务器端口：3000
- 启用 HTTPS：true（使用项目根目录下ssl目录中的证书，并配置了TLSv1.2及多种加密算法以增强兼容性）
- 配置项定义在 vite.config.js 中, 需要先修改 backend 的值
- API 代理配置：/api 请求代理到 https://<backend>
- 构建输出目录：./web/dist
- 静态资源目录：assets
- 路径别名：@ 映射到 src 目录

详细配置请查看 `vite.config.js` 文件。

## 注意事项

1. 确保使用 **Node.js v16.20.2** 版本以避免兼容性问题
2. 确保在启动前端开发服务器前，后端服务已在 https://<backend> 启动
3. 生产环境中，前端静态文件会被部署到项目根目录下的 web/dist 目录
4. 如需修改代理配置或构建输出路径，请修改 `vite.config.js` 文件

## 常见问题

### 端口被占用

如果 3000 端口被占用，可以修改 `vite.config.js` 文件中的 server.port 配置。

### 代理请求失败

检查后端服务是否正确启动在 https://<backend>，并确保 API 路径正确。

### 依赖冲突

如果遇到依赖冲突，可以尝试以下解决方案：

```bash
# 使用 --legacy-peer-deps 标志安装依赖
npm install --legacy-peer-deps

# 或使用 --force 标志
npm install --force
```

### Vite 相关错误

如果遇到类似 "crypto.getRandomValues is not a function" 的错误，请确保：
- 使用兼容的 Node.js 版本 (v20.12.1)
- 项目依赖的 Vite 版本为 4.5.0 和 @vitejs/plugin-vue 版本为 4.5.2