blivechat GUI
用于 blivechat 的图形界面。
有朋友在搞 Vtuber，像 blivechat 类似的项目能通过自定义 CSS 的方式在 OBS 上添加一个非常好看的聊天栏。但是想要在桌面端看到弹幕的话得要再开一个浏览器页面，十分不方便。就想写一个背景透明的浮窗浏览器。
挺喜欢自带服务端的 blibechat， 但是启动后的 Console 窗口不仅丑，还容易误操作，所以就花了点时间写了个UI。
写完了之后 xfgryujk 觉得这个 PR 太大，就只好独立出来，于是就有了这个项目。
 |
 |
|---|---|
| 桌面截图 | 游戏截图 |
特性
- 添加了控制台图形窗口；
- 添加了托盘图标，控制台关闭自动缩小到托盘窗口
防手滑； - 添加网页悬浮窗，可以当成桌面弹幕姬来用：
- 可以配置屏蔽，就像 bilivechat 自动弹窗的管理页面一样；
- 可以添加自定义 CSS；
- CSS 设置的不透明度会正常生效；
- 可调整页面位置、大小和缩放；
- 没有改动 blivechat 原有的代码，维护成本低；
- blivechat 原先的命令行参数会正常生效。
使用方法
理论上来说，只要启动时
--host和--port配置合理，网络的其他计算机能通过这个端口连接进来，那也是可以像 blivechat 那样搭成服务器供别人使用。但既然打算去搭建服务器了，Docker不香嘛？
一、发布版
- 下载发布版（仅提供x64 Windows版）
- 双击 blivechatGUI.exe 运行，也可以像 blivechat 那样添加命令行参数。
blivechatGUI.exe --host 127.0.0.1 --port 12450
二、源代码版
- 由于使用了git子模块，clone时需要加上
--recursive参数：
blivechatGUI 包含了 blivechat， blivechat 包含了 blivedm。
git clone --recursive https://github.com/sileence114/blivechatGUI.git
如果已经clone，拉子模块的方法：
git submodule update --init --recursive
- 安装依赖（Python 3.6+）：
pip install -r requirements.txt
- 将 blivechat 的代码提取到项目根目录：
由于 blivechat 中并没有将模块文件夹定义为包，所以 blivechatGUI 的文件需要与 blivechat 的入口文件在同一个目录中。
python extract.py
- 编译前端（需要安装Node.js）：
cd frontend
npm i
npm run build
- 运行
如果想要看 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--debugDebug 模式，将显示更多的信息
此外，可以参考 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; }
-
上文的游戏截图就是这个 CSS，太长，就不贴了。
PyInstaller 打包
- 按照前文所述，安装源代码版，确保其正常运行
- 安装 PyInstaller，过程略
- 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
- 项目中出现了
dist文件夹，将文件夹dist\blivechatGUI\PyQt5\Qt与dist\blivechatGUI\PyQt5\Qt5合并（合并后文件夹为Qt5）。 dist\blivechatGUI就是打包输出，可以压缩成 zip 分享出去。
1 Aug 15, 2022
1 Feb 13, 2022
1 Dec 16, 2021
5 Aug 12, 2021
1 Nov 07, 2021
4 Oct 28, 2022
0 Mar 01, 2022
7 Nov 06, 2022
2 Nov 12, 2022
1 Jan 07, 2022
30 May 09, 2022
11.2k Jan 09, 2023
3 May 25, 2022
4 Jan 19, 2022
1 Nov 12, 2021
15 Sep 22, 2022
2 Dec 19, 2021
1 Feb 10, 2022
8 Nov 18, 2022
1 Feb 11, 2022