85 lines
1.8 KiB
Markdown
85 lines
1.8 KiB
Markdown
|
# CamTalk Desktop — 桌面客户端
|
|||
|
|
|
|||
|
|
基于 Electron 的 CamTalk 桌面应用，解决 HTTP 环境下摄像头和麦克风无法访问的问题。
|
|||
|
|
|
|||
|
|
## 原理
|
|||
|
|
|
|||
|
|
Electron 以 `file://` 协议加载页面，Chromium 将其视为安全上下文，`getUserMedia` 可直接工作。
|
|||
|
|
|
|||
|
|
## 快速开始
|
|||
|
|
|
|||
|
|
### 1. 安装依赖
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cd desktop
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 启动前端开发服务器
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cd ../frontend
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 启动 Electron（开发模式）
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cd desktop
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Electron 会连接到 `http://localhost:5173`（Vite 开发服务器），支持热更新。
|
|||
|
|
|
|||
|
|
### 4. 启动后端
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cd ../backend
|
|||
|
|
go run ./cmd/server
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 生产构建
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 1. 构建前端
|
|||
|
|
cd ../frontend
|
|||
|
|
npm run build
|
|||
|
|
|
|||
|
|
# 2. 构建 Electron
|
|||
|
|
cd ../desktop
|
|||
|
|
npm run build
|
|||
|
|
|
|||
|
|
# 3. 预览生产版本
|
|||
|
|
npm run preview
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 配置后端地址
|
|||
|
|
|
|||
|
|
默认连接 `ws://localhost:8080/ws`。如需修改：
|
|||
|
|
|
|||
|
|
- **方式 1**：在 Electron 应用的设置面板中修改（功能开发中）
|
|||
|
|
- **方式 2**：直接编辑配置文件
|
|||
|
|
- macOS: `~/Library/Application Support/camtalk-desktop/camtalk-config.json`
|
|||
|
|
- Linux: `~/.config/camtalk-desktop/camtalk-config.json`
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
desktop/
|
|||
|
|
├── main/
|
|||
|
|
│ ├── index.ts # Main Process 入口
|
|||
|
|
│ ├── window.ts # BrowserWindow 管理
|
|||
|
|
│ ├── permissions.ts # 权限自动授予
|
|||
|
|
│ └── config.ts # 配置管理
|
|||
|
|
├── preload/
|
|||
|
|
│ └── index.ts # contextBridge 安全桥接
|
|||
|
|
├── assets/ # 应用图标等资源
|
|||
|
|
└── package.json
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
- 首次运行可能需要授予摄像头和麦克风权限（系统级别）
|
|||
|
|
- 如果连接远程后端，确保网络可访问
|
|||
|
|
- `webSecurity: false` 是为了允许 HTTP 资源加载，仅适用于可信环境
|