blivechat GUI

用于 blivechat 的图形界面。

有朋友在搞 Vtuber，像 blivechat 类似的项目能通过自定义 CSS 的方式在 OBS 上添加一个非常好看的聊天栏。但是想要在桌面端看到弹幕的话得要再开一个浏览器页面，十分不方便。就想写一个背景透明的浮窗浏览器。
挺喜欢自带服务端的 blibechat， 但是启动后的 Console 窗口不仅丑，还容易误操作，所以就花了点时间写了个UI。

写完了之后 xfgryujk 觉得这个 PR 太大，就只好独立出来，于是就有了这个项目。

桌面截图	游戏截图

特性

• 添加了控制台图形窗口；
• 添加了托盘图标，控制台关闭自动缩小到托盘窗口防手滑；
• 添加网页悬浮窗，可以当成桌面弹幕姬来用：
  • 可以配置屏蔽，就像 bilivechat 自动弹窗的管理页面一样；
  • 可以添加自定义 CSS；
  • CSS 设置的不透明度会正常生效；
  • 可调整页面位置、大小和缩放；
• 没有改动 blivechat 原有的代码，维护成本低；
• blivechat 原先的命令行参数会正常生效。

使用方法

理论上来说，只要启动时 --host 和 --port 配置合理，网络的其他计算机能通过这个端口连接进来，那也是可以像 blivechat 那样搭成服务器供别人使用。但既然打算去搭建服务器了，Docker不香嘛？

一、发布版

1. 下载发布版（仅提供x64 Windows版）
2. 双击 blivechatGUI.exe 运行，也可以像 blivechat 那样添加命令行参数。

blivechatGUI.exe --host 127.0.0.1 --port 12450

二、源代码版

0. 由于使用了git子模块，clone时需要加上--recursive参数：

blivechatGUI 包含了 blivechat， blivechat 包含了 blivedm。

git clone --recursive https://github.com/sileence114/blivechatGUI.git

如果已经clone，拉子模块的方法：

git submodule update --init --recursive

1. 安装依赖（Python 3.6+）：

pip install -r requirements.txt

2. 将 blivechat 的代码提取到项目根目录：

由于 blivechat 中并没有将模块文件夹定义为包，所以 blivechatGUI 的文件需要与 blivechat 的入口文件在同一个目录中。

python extract.py

3. 编译前端（需要安装Node.js）：

cd frontend
npm i
npm run build

4. 运行
   如果想要看 Console 窗口， 请将下面命令中的 pythonw 替换为 python。

pythonw gui.py

或者可以指定host和端口号：

pythonw gui.py --host 127.0.0.1 --port 12450

启动命令行参数

blivechatGUI 支持 blivechat 的所有命令行参数：

• --host 127.0.0.1 设置监听地址为 127.0.0.1
• --port 12450 设置监听端口为 12450
• --debug Debug 模式，将显示更多的信息

此外，可以参考 Chromium 命令行开关，添加需要的参数用以修改浮窗浏览器。
下面这些参数已被默认添加：

• --disable-web-security 禁用网页安全机制：跨域
• --allow-insecure-websocket-from-https-origin 允许https页面访问不加密的websocket： https页面使用ws消息链连接

下面的参数在 Debug 模式自动添加：

• --remote-debugging-port=9222 设置 DevTools 远程调试端口为 9222

CSS 代码段

若有需要，可以将 CSS 保存，在悬【浮窗设置】-【额外的CSS】中添加。
若 Github 访问稳定，可复制 CSS 链接，通过【添加路径】按钮添加网络上的 CSS。

上文的桌面截图用了背景透明、隐藏滚动条和显示虚线边框。

• 背景透明 transparent.css 若没有自定义 CSS，悬浮窗的背景为白色属于正常现象，添加这段 CSS 可变透明。这段代码会覆盖其他 CSS 的背景色设置，添加了其他 CSS 时慎用。

  body{
    background-color: transparent !important;
  }
  yt-live-chat-renderer {
    background-color: transparent !important;
  }

• 隐藏滚动条 hide-scrollbar.css 这个仅适用于 Chromium 和 Safari。

  body::-webkit-scrollbar {
    display: none;
  }

• 显示虚线边框 border.css

  body{
    border: dotted;
  }

• 渐变配色 gradient-back-ground.css

  上文的游戏截图就是这个 CSS，太长，就不贴了。

PyInstaller 打包

0. 按照前文所述，安装源代码版，确保其正常运行
1. 安装 PyInstaller，过程略
2. cd 到项目根目录，打包

pyinstaller -D -w -i frontend\dist\favicon.ico -n blivechatGUI --add-data=".\data\*;.\data" --add-data=".\frontend\dist;.\frontend\dist" --add-data=".\log;.\log" gui.py

3. 项目中出现了 dist 文件夹，将文件夹 dist\blivechatGUI\PyQt5\Qt 与 dist\blivechatGUI\PyQt5\Qt5 合并（合并后文件夹为 Qt5）。
4. dist\blivechatGUI 就是打包输出，可以压缩成 zip 分享出去。