用于 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--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】中添加。
若 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,过程略
- 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 分享出去。