136 lines
3.1 KiB
Markdown
136 lines
3.1 KiB
Markdown
# 麻将直播叠加UI系统
|
||
|
||
这是一个用于麻将直播的浏览器叠加层系统，可以在视频流上显示玩家信息、分数、胡牌动画等元素，并通过控制面板进行实时控制。
|
||
|
||
## 功能特点
|
||
|
||
- **视频背景支持**：可以播放URL视频、本地视频或设备捕获
|
||
- **玩家信息显示**：四个玩家的姓名、分数、颜色和位置
|
||
- **胡牌动画**：显示番种、符数和得点，并有分数变动动画
|
||
- **本场与立直棒**：记录并显示当前场次信息
|
||
- **听牌提示**：高亮显示听牌玩家
|
||
- **实时控制面板**：可通过单独窗口控制所有显示内容
|
||
- **可定制样式**：调整颜色、透明度、字体大小等
|
||
|
||
## 文件结构
|
||
|
||
- `index.html` - 叠加层主页面，显示视频和UI元素
|
||
- `control.html` - 控制面板，用于操作叠加层
|
||
- `style.css` - 样式文件
|
||
- `app.js` - 核心逻辑和事件处理
|
||
- `README.md` - 项目说明
|
||
|
||
## 快速开始
|
||
|
||
### 本地运行
|
||
|
||
1. 直接在浏览器中打开 `control.html` 文件
|
||
2. 点击「打开叠加层」按钮，会打开一个新窗口显示叠加层
|
||
3. 使用控制面板上的各种功能来控制叠加层显示
|
||
|
||
### 在OBS中使用
|
||
|
||
1. 启动OBS Studio
|
||
2. 添加「浏览器」来源
|
||
3. 设置URL为 `file:///D:/TraeProject/TestWebSite/index.html`（根据实际路径修改）
|
||
4. 设置合适的宽度和高度（建议1920x1080）
|
||
5. 然后在另一个浏览器窗口中打开 `control.html` 进行控制
|
||
|
||
## 事件通信协议
|
||
|
||
系统使用 `postMessage` API 在控制面板和叠加层之间通信，支持以下事件类型：
|
||
|
||
### 1. 更新玩家信息
|
||
```json
|
||
{
|
||
"event": "update_player",
|
||
"player_index": 0,
|
||
"name": "张三",
|
||
"score": 25000,
|
||
"color": "rgba(255, 100, 100, 0.6)",
|
||
"is_tenpai": false
|
||
}
|
||
```
|
||
|
||
### 2. 胡牌事件
|
||
```json
|
||
{
|
||
"event": "win",
|
||
"winner": 1,
|
||
"losers": [0, 2, 3],
|
||
"han": 3,
|
||
"fu": 40,
|
||
"points": 8000,
|
||
"is_tsumo": true,
|
||
"text": "三暗刻 自摸"
|
||
}
|
||
```
|
||
|
||
### 3. 调整分数
|
||
```json
|
||
{
|
||
"event": "adjust_score",
|
||
"player_index": 2,
|
||
"delta": -1500
|
||
}
|
||
```
|
||
|
||
### 4. 设置听牌
|
||
```json
|
||
{
|
||
"event": "set_tenpai",
|
||
"player_index": 0,
|
||
"is_tenpai": true
|
||
}
|
||
```
|
||
|
||
### 5. 设置本场与立直棒
|
||
```json
|
||
{
|
||
"event": "set_honba_riichi",
|
||
"honba": 1,
|
||
"riichi_sticks": 2
|
||
}
|
||
```
|
||
|
||
### 6. 设置样式
|
||
```json
|
||
{
|
||
"event": "set_style",
|
||
"player_index": 0,
|
||
"opacity": 0.6,
|
||
"font_size": 18
|
||
}
|
||
```
|
||
|
||
### 7. 设置视频源
|
||
```json
|
||
{
|
||
"event": "set_video_source",
|
||
"src": "https://example.com/video.mp4"
|
||
}
|
||
```
|
||
|
||
## 自定义和扩展
|
||
|
||
### 修改样式
|
||
- 可以编辑 `style.css` 文件来自定义界面外观
|
||
- 支持调整位置、颜色、透明度、字体等
|
||
|
||
### 添加功能
|
||
- 可以在 `app.js` 中扩展事件处理函数
|
||
- 支持添加新的事件类型和处理逻辑
|
||
|
||
## 浏览器兼容性
|
||
|
||
- Chrome 90+
|
||
- Edge 90+
|
||
- Firefox 88+
|
||
- Safari 14+
|
||
|
||
## 注意事项
|
||
|
||
- 为了获得最佳体验，建议使用Chrome或Edge浏览器
|
||
- 在OBS中使用时，请确保本地文件路径正确
|
||
- 对于远程视频源，请确保视频允许跨域访问
|
||
- 如果需要在不同设备间控制，请考虑实现WebSocket服务器端 |