[Bilibili Live Chat] OBS用B站直播弹幕展示

咕：神代綺凛
发布时间：February 14, 2019
62181 views
47 comments
613 字数
Categories：个人项目

前阵子朋友突然和我提起 VTuber 们直播时用的 YouTube Live Chat 展示，“这玩意真好啊，怎么B站没有类似的东西呢”（其实只是当时没找到），然后我就做了这玩意……

Head Pic: 【アズールレーン】「バレンタイン」/「ここね」的插画 [pixiv]

Bilibili Live Chat

这是一个无后端的，仿 YouTube Live Chat 的，箱都不用开就能食用的 Bilibili 直播弹幕姬

主要用于 OBS，为的是在低功能需求的情况下，不依靠任何第三方本地软件实现弹幕和礼物的展示

成品及使用方法请查看上面的 GitHub 项目

版权声明：本文为原创文章，版权归神代綺凜所有。
本文链接：https://moe.best/projects/bilibili-live-chat.html
所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。
您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。

搬瓦工VPS优惠套餐，建站稳如狗，支持支付宝，循环出账94折优惠码BWH3HYATVBJW
年付$47，CN2线路，1核/1G内存/20G硬盘/1T@1Gbps【点击购买】
季付$47，CN2 GIA线路，1核/1G内存/20G硬盘/1T@2.5Gbps【点击购买】

Last modification：October 31st, 2020 at 11:54 am

If you think my article is useful to you, please feel free to appreciate

47 comments

Ari (Windows 10 x64 Edition) / (Google Chrome 103.0.0.0)
2023-09-21 10:18 am

b站弹幕现在不能直接获取用户名了，请问获取用户名该怎么设置呢？

Reply
1. 神代綺凛咕 (Windows 10 x64 Edition) / (Google Chrome 116.0.0.0)
  2023-09-21 10:58 pm
  
  @Ari 现在貌似需要用开放平台接口才可以了，等我申请通过了再搞
  
  Reply
2. 神代綺凛咕 (Mac OS X 10.15.7) / (Google Chrome 117.0.0.0)
  2023-09-21 10:45 am
  
  @Ari b站又变严了，现在得要登录态了，等我晚上加个配置项
  
  Reply
芜湖 (Windows 10 x64 Edition) / (Google Chrome 107.0.0.0)
2022-11-15 07:55 pm

考古可用鉴丁为666ヾ(≧∇≦*)ゝ

Reply
嘿嘿嘿 (Windows 10 x64 Edition) / (Google Chrome 96.0.4664.93)
2021-12-14 01:44 am

请问这个插件我可以使用吗，大大，还能用吗？

Reply
1. 神代綺凛咕 (Windows 10 x64 Edition) / (Google Chrome 96.0.4664.93)
  2021-12-14 09:05 am
  
  @嘿嘿嘿 能啊
  
  Reply
MAX (Windows 10 x64 Edition) / (Google Chrome 96.0.4664.93)
2021-12-09 09:57 am

大佬，问下这个网站有办法显示悬浮弹幕窗口吗

Reply
1. 神代綺凛咕 (Windows 10 x64 Edition) / (Google Chrome 96.0.4664.93)
  2021-12-09 09:32 pm
  
  @MAX 得靠其他能悬浮显示网页的程序才行
  
  Reply
红叶 (Windows 10 x64 Edition) / (Google Chrome 91.0.4472.124)
2021-07-16 05:05 am

那个...现在是7月16的凌晨5点。blc.lolicon.app上不去了。。。୧(๑•̀⌄•́๑)૭ 不知何时能修好。加油哦！

Reply
1. 神代綺凛咕 (Windows 10 x64 Edition) / (Google Chrome 91.0.4472.124)
  2021-07-16 08:02 pm
  
  @红叶 Vercel 号出了点问题还在跟客服 battle
  
  Reply
pigman (Windows 10 x64 Edition) / (Google Chrome 86.0.4240.111)
2020-10-31 06:39 am

git clone https://github.com/Tsuk1ko/bilibili-live-chat.git
cd bilibili-live-chat
npm i
npm start
关于显示头像本地方式，我npm i 安装下载一大堆后，执行npm start ，命令行显示
PS E:\bilibili-live-chat\bilibili-live-chat> npm start
npm ERR! missing script: start

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\pigman\AppData\Roaming\npm-cache_logs\2020-10-30T22_32_33_068Z-debug.log

能帮忙解决吗？谢谢

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 85.0.4183.83)
  2020-10-31 11:55 am
  
  @pigman 文章是旧版的使用方法，忘了更新了，请直接参考 GitHub 项目中的说明
  
  Reply
日安 (Windows 10 x64 Edition) / (Google Chrome 78.0.3904.108)
2020-10-20 12:57 pm

你好~很感谢可以用到介个直播弹幕显示qwq
但文中的那个使用步骤的链接里显示该版本已经不再维护..
于是跳到了 https://blc.lolicon.app/ 这里~是对的嘛~

Reply
1. 神代綺凜咕 (Mac OS X 10.15.6) / (Google Chrome 86.0.4240.80)
  2020-10-20 03:06 pm
  
  @日安 是，文章忘记更新了
  
  Reply
石樱灯笼 (Windows 7 x64 Edition) / (Google Chrome 77.0.3865.120)
2019-10-19 07:34 pm

不错，能解决实际问题。就是CSS写得太狠了，obs中不能改样式，想要自己定制样式就只能fork了。

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 77.0.3865.120)
  2019-10-20 12:53 am
  
  @石樱灯笼 我写这个的 css 的时候都没有用 important，讲道理 obs 上应该可以覆盖样式的来着
  因为基本上也是自用所以自己没需求也懒得写样式生成器之类的了
  
  Reply
  1. 石樱灯笼 (Windows 7 x64 Edition) / (Google Chrome 77.0.3865.120)
    2019-10-20 12:41 pm
    
    @神代綺凜 用!important本身就不讲道理。
    
    Reply
藤原零时 (Windows 10 x64 Edition) / (Google Chrome 74.0.3729.169)
2019-06-17 10:27 pm

非常好用！！感谢！！

Reply
1. 神代綺凜咕 (Mac OS X) / (Safari)
  2019-06-18 02:25 am
  
  @藤原零时
  
  Reply
威索 (Windows 10 x64 Edition) / (Firefox 67.0)
2019-06-10 04:09 pm

弹幕展示很有意思嗷，支持一下辣，有空试试看|´・ω・)ノ赏

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 75.0.3770.80)
  2019-06-10 04:21 pm
  
  @威索 感谢
  
  Reply
Artintel (Windows 10 x64 Edition) / (Google Chrome 73.0.3683.103)
2019-05-21 11:50 am

main.js有没有压缩前的代码可以看看呀，想学习一个

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 74.0.3729.157)
  2019-05-21 12:38 pm
  
  @Artintel 在src/index.js，main.js是 webpack 打包后的
  
  Reply
GideonEmery (Windows 7 x64 Edition) / (Google Chrome 74.0.3724.8)
2019-04-26 03:39 pm

日常打卡，爬~|´・ω・)ノ

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 74.0.3729.108)
  2019-04-26 05:40 pm
  
  @GideonEmery
  
  Reply
JIm (Windows 10 x64 Edition) / (Google Chrome 72.0.3626.121)
2019-03-07 12:16 pm

感谢，不过请问为什么我点了GO之后界面一直加载不出来？

Reply
1. JIm (Windows 10 x64 Edition) / (Google Chrome 72.0.3626.121)
  2019-03-07 12:19 pm
  
  @JIm 已经了解用法了，浏览器上可显示弹幕，但是OBS里加载不出来OωO
  
  Reply
  1. JIm (Windows 10 x64 Edition) / (Google Chrome 72.0.3626.121)
    2019-03-07 12:25 pm
    
    @JIm 不好意思已经可以正常使用了，谢谢
    
    Reply
    
    神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 72.0.3626.121)
    2019-03-07 12:25 pm
    
    @JIm
    
    Reply
ㄒㄐㄍㄢ (Windows 10 x64 Edition) / (Google Chrome 72.0.3626.119)
2019-03-03 10:31 pm

前端真不容易啊，还得会node

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
  2019-03-03 10:40 pm
  
  @ㄒㄐㄍㄢ 其实我是因为 node 好玩才去做前端的
  
  Reply
  1. ㄒㄐㄍㄢ  (Windows 10 x64 Edition) / (Google Chrome 72.0.3626.119)
    2019-03-03 10:42 pm
    
    @神代綺凜 我就不一样了，当初为了能看懂别人的代码学的前端后来发现前端限制好多，还是node强大
    
    Reply
    
    神代綺凜咕  (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
    2019-03-03 10:45 pm
    
    @ㄒㄐㄍㄢ node 写起来爽，你看我 github 已经完全变成 node 的形状了（x
    
    Reply
    
    ㄒㄐㄍㄢ  (Windows 10 x64 Edition) / (Google Chrome 72.0.3626.119)
    2019-03-03 10:55 pm
    
    @神代綺凜 看出来了，那些骚东西纯前端实现不了( ,,´･ω･)ﾉ"(´っω･｀｡)等我也会了我也一定一样骚
    
    Reply
WeiYuan (Android 9) / (Google Chrome 72.0.3626.105)
2019-03-01 11:31 am

日常打卡。滴|´・ω・)ノ

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
  2019-03-01 12:39 pm
  
  @WeiYuan 打卡成功
  
  Reply
kelvin (Windows 10 x64 Edition) / (Google Chrome 72.0.3626.119)
2019-02-23 12:58 pm

前端大佬啊

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
  2019-02-23 01:00 pm
  
  @kelvin 不，这个只是一点点 javascript 的事，弹幕服务连接也是其他人写好的，我只是做了一点微小的工作
  
  Reply
Noob (Windows 10 x64 Edition) / (Google Chrome 72.0.3626.109)
2019-02-22 02:25 pm

该评论仅登录用户及评论双方可见

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
  2019-02-22 03:45 pm
  
  @Noob
  该评论仅登录用户及评论双方可见
  
  Reply
  1. Noob  (Windows 10 x64 Edition) / (Google Chrome 72.0.3626.121)
    2019-03-12 10:00 am
    
    @神代綺凜 綺凜,你的api我请求出来一条json数据，但是你上面的url我打不开
    
    Reply
    
    神代綺凜咕  (Mac OS X) / (Safari)
    2019-03-12 10:05 am
    
    @Noob 直接访问会 403，要带https://www.pixiv.net的 referer，这是p站的防盗链措施
    
    Reply
    
    Noob  (Windows 10 x64 Edition) / (Google Chrome 72.0.3626.121)
    2019-03-12 11:37 am
    
    @神代綺凜 我学艺不精，再去看看教程
    
    Reply
小萌羽 (Windows 10 x64 Edition) / (Google Chrome 72.0.3626.109)
2019-02-18 02:35 pm

(๑•̀ㅁ•́ฅ)

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
  2019-02-18 03:45 pm
  
  @小萌羽
  
  Reply
红尘已逝梦犹存 (Windows 10 x64 Edition) / (Google Chrome 72.0.3626.109)
2019-02-16 11:56 am

然而，B站弹幕已经先审后播了。

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
  2019-02-16 12:42 pm
  
  @红尘已逝梦犹存 但这也没什么影响
  
  Reply