electron 用法，为数不多能在 wayland 里显示的方法

[riku-ri]

如题，由于我用的是 wayland+pipewire ，
wayland 中的 OBS 并不支持浏览器源，
多番尝试后找到了 electron:

• https://www.electronjs.org/

此前我几乎没有任何的前端知识，
所以很抱歉我无法介绍 electron 是什么（因为我自己也没懂）

安装 electron

请参考

• https://www.electronjs.org/zh/

安装并启动 blivechat ，即本 repository

参考

• https://github.com/xfgryujk/blivechat?tab=readme-ov-file#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95

CSS

直接复制 http://127.0.0.1:12450/stylegen 的默认 CSS 。
我用的时候是把它保存在 blivechat.css 文件中

让 electron 获取 blivechat 的内容

此处需要使用房间 URL ，
我用的时候是把它保存在 blivechat.url 文件中

将下面的内容保存到与 CSS ，房间 URL 同一级路径下

const fs = require('fs');
const { BrowserWindow,app,webFrame } = require("electron");

app.whenReady().then(() => {

	const win = new BrowserWindow({
		transparent: true ,
		frame: false ,
		hasShadow: false ,
		alwaysOnTop: true ,
		webPreferences: {
			backgroundThrottling: false
		}
	})

	const url = fs.readFileSync('blivechat.url', 'utf8');
	win.loadURL(url)

	const css = fs.readFileSync('blivechat.css', 'utf8');
	win.webContents.on('did-finish-load' , () => {
		win.webContents.insertCSS(css);
		win.webContents.setZoomFactor(0.5)
	})
})

命名为 blivechat.js

此时会有这些文件在同一个路径下:

$ find blivechat.css blivechat.url blivechat.js
blivechat.css
blivechat.url
blivechat.js

运行 electron

electron ./blivechat.js

效果

请注意此处我修改了默认 CSS 中的透明度

/* Transparent background */
yt-live-chat-renderer {
  /*
  background-color: #000000;
  */
  background-color: rgba(0,0,0,0.33);
}

[SSSSSSSan]

妙手回春啊师傅0.0