全屏游戏直播的同时使用使用Blivechat查看弹幕的方法（Action! + Blivechat）

弄这玩意弄了半天

Action! （全名： - Gamepaly Recording and Streaming）steam商店可买

Blivechat（百度即可）

本文主要陈述如何 “全屏” 游戏下使用 “Blivechat” 看直播弹幕的问题，而不是教你基础的怎么直播游戏或怎么看弹幕的问题，因此本文假定你已经掌握了以下基本技能：

Blivechat 或 咩播云插件 的使用方法

直播推流软件（obs等）的使用方法

首先需要陈述这个问题的实质，了解我们究竟要解决的是什么问题。因此我们一步一步理清我们的需求：

1、首先你想直播一个全屏玩的游戏，如Apex Legends

2、其次你不想用手机等第二个设备看自己直播间的弹幕，你只想在同一显示屏上看弹幕

3、你通过查找得知弹幕姬等应用只能用于非全屏的游戏上，但你又不想窗口化运行Apex，因为这样会使游戏流畅性降低

4、你通过查找小葫芦直播助手等工具，但悲哀地发现其全屏模式只支持一部分游戏，而Apex（等）就不在其中

5、你又通过查找得知有一款叫做Action! - Gamepaly Recording and Streaming 的类似obs的软件难得地提供了将浏览器源输出到屏幕（HUD）的方式，只要你舍弃掉obs（或直播姬）转而使用这个软件即可实现需求。虽然这软件只能输出一个源，但用来看弹幕足够了

6、你发现Action! 的使用方式比obs要简单地多，但有些过于简单了，其URL源相比obs没有自定义css的选项

如果你不需要用到设置css的话倒也无所谓，比如你用的可能是咩播云插件，只要把提供的网址url输进去就好了，css不用你自己写，人家给你弄好了都。

至此，如果你不是一定要用Blivechat的话，那么“全屏查看弹幕”的问题其实就已经解决了

7、你现在已经知道了全屏看弹幕的解决办法，但其中一定要用咩播云插件这一环节让你很不爽，一些好的效果必须要vip才能使用。因此你更偏向于使用Blivechat。但如果用Blivechat就没法应用css配置，你的屏幕上显示的弹幕栏的背景甚至是不透明的。

所以问题就来到了：如何使用Action! 推流软件加载含有css的Blivechat弹幕页。这是我们的核心问题

其实这个问题很简单，就是我们要修改一下Blivechat的页面，让css文件直接加载，而不是让推流软件单独传入给它。

1、所以首先，我们得先做好一个用于装饰的css文件。这一步很简单，你只需要打开Blivechat，在网页的样式生成器里调成你满意的效果，然后将结果粘贴到一个新建的.css后缀文件中保存即可。这里我保存的文件名为bulletchat.default.css

2、我们可以复制Blivechat里的房间URL，粘贴并打开URL对应的网页，然后按F12打开开发者工具，从“元素”栏中展开标签，可以看到最底下两个标签即为引用的相关css文件

根据href的位置提示，在Blivechat本地文件夹内搜索，不难发现css文件存放的位置为 Blivechat文件夹所在位置 \ frontend \ dist 内的css文件夹内。而我们打开的URL对应的网页其实正是以\frontend\dist 内的index.html文件为模板的。其中的两个已经链接的css文件几乎是空白的，所以我们只需将自己的css文件链接进index.html这个母版即可

3、我们打开上述的css文件夹，将bulletchat.default.css文件放入该位置，便于html引用

4、用相关的编辑工具打开（如果什么都没有你就用笔记本打开）blivechat\frontend\dist内的index.html文件，（因为排版不好看）用ctrl+F搜索head找到（注意不是）处，在标签前面仿照的格式将自己的css文件链接添加进去

5、保存所有相关文件，若正在使用Blivechat，关掉重启。

经过上述步骤后，正常使用Blivechat，将房间URL填入Action! 软件中的URL1栏，选择包含HUD的输出模式，即可在屏幕上看到应用了css样式的弹幕栏了

这个软件的UI比较乱，如果你在设置菜单中的音频取消勾选“录制音频”，那么直播时就会没有声音——没错，你不能直接在实时串流菜单里调声音开关。而如果你想调是否输出麦克风声音到直播中，你需要跑到视频录制菜单里调整主副音频设备。也就是说视频录制的选项（至少音频选项是）也会作用于直播串流。就很混乱。

注意事项：使用以上解决方案的话，当你想要修改css的内容时，你会发现在推流软件中修改是无法生效的，因为软件已经保存了css在其缓存中。如果是obs则只需要打开浏览器属性清除当前页面缓存即可生效，但是在本文我们用的是Action!，没有提供该功能，所以我们需要关闭该软件，找到其本地文件夹，删除其中的cache子文件夹，如此便清除了缓存，重启后新的css即可生效。此外，经测试发现Blivechat中在首页高级选项中修改旧弹幕消失设置无法在Action!中生效（obs可以用），需要在样式生成器中修改相关设置