Skip to content

sileence114/blivechatGUI

Repository files navigation

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

二、源代码版

  1. 由于使用了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
  1. 将 blivechat 的代码提取到项目根目录:

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

python extract.py
  1. 编译前端(需要安装Node.js):
cd frontend
npm i
npm run build
  1. 运行
    如果想要看 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 打包

  1. 按照前文所述,安装源代码版,确保其正常运行
  2. 安装 PyInstaller,过程略
  3. 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
  1. 项目中出现了 dist 文件夹,将文件夹 dist\blivechatGUI\PyQt5\Qtdist\blivechatGUI\PyQt5\Qt5 合并(合并后文件夹为 Qt5)。
  2. dist\blivechatGUI 就是打包输出,可以压缩成 zip 分享出去。