website/html-webproject/TestWebSite

麻将直播叠加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. 更新玩家信息

{
  "event": "update_player",
  "player_index": 0,
  "name": "张三",
  "score": 25000,
  "color": "rgba(255, 100, 100, 0.6)",
  "is_tenpai": false
}

2. 胡牌事件

{
  "event": "win",
  "winner": 1,
  "losers": [0, 2, 3],
  "han": 3,
  "fu": 40,
  "points": 8000,
  "is_tsumo": true,
  "text": "三暗刻 自摸"
}

3. 调整分数

{
  "event": "adjust_score",
  "player_index": 2,
  "delta": -1500
}

4. 设置听牌

{
  "event": "set_tenpai",
  "player_index": 0,
  "is_tenpai": true
}

5. 设置本场与立直棒

{
  "event": "set_honba_riichi",
  "honba": 1,
  "riichi_sticks": 2
}

6. 设置样式

{
  "event": "set_style",
  "player_index": 0,
  "opacity": 0.6,
  "font_size": 18
}

7. 设置视频源

{
  "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服务器端