神代綺凛

[Bilibili Live Chat] OBS用B站直播弹幕展示
前阵子朋友突然和我提起 VTuber 们直播时用的 YouTube Live Chat 展示,“这玩意真好啊,怎么...
扫描右侧二维码阅读全文
14
2019/02

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

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

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

Bilibili Live Chat

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

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

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

搬瓦工VPS优惠套餐,建站稳如狗,支持支付宝,循环出账94折优惠码BWH3HYATVBJW
年付$47CN2线路,1核/1G内存/20G硬盘/1T@1Gbps【点击购买
季付$47CN2 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

Leave a Comment

39 comments

  1. 红叶  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 91.0.4472.124(Google Chrome 91.0.4472.124)
    那个...现在是7月16的凌晨5点。blc.lolicon.app上不去了。。。୧(๑•̀⌄•́๑)૭ 不知何时能修好。加油哦!
    1. 神代綺凛  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 91.0.4472.124(Google Chrome 91.0.4472.124)
      @红叶 Vercel 号出了点问题还在跟客服 battle
  2. pigman  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 86.0.4240.111(Google Chrome 86.0.4240.111)
    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

    能帮忙解决吗? 谢谢

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 85.0.4183.83(Google Chrome 85.0.4183.83)
      @pigman 文章是旧版的使用方法,忘了更新了,请直接参考 GitHub 项目中的说明
  3. 日安  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 78.0.3904.108(Google Chrome 78.0.3904.108)
    你好~很感谢可以用到介个直播弹幕显示qwq
    但文中的那个使用步骤的链接里显示该版本已经不再维护..
    于是跳到了 https://blc.lolicon.app/ 这里~是对的嘛~
    1. 神代綺凜  Mac OS X 10.15.6(Mac OS X 10.15.6) / Google Chrome 86.0.4240.80(Google Chrome 86.0.4240.80)
      @日安 是,文章忘记更新了
  4. 石樱灯笼  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 77.0.3865.120(Google Chrome 77.0.3865.120)
    不错,能解决实际问题。就是CSS写得太狠了,obs中不能改样式,想要自己定制样式就只能fork了。
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 77.0.3865.120(Google Chrome 77.0.3865.120)
      @石樱灯笼 我写这个的 css 的时候都没有用 important,讲道理 obs 上应该可以覆盖样式的来着
      因为基本上也是自用所以自己没需求也懒得写样式生成器之类的了
      1. 石樱灯笼  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 77.0.3865.120(Google Chrome 77.0.3865.120)
        @神代綺凜 用!important本身就不讲道理。
  5. 藤原零时  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.169(Google Chrome 74.0.3729.169)
    非常好用!!感谢!!
    1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
  6. 威索  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 67.0(Firefox 67.0)
    弹幕展示很有意思嗷,支持一下辣,有空试试看|´・ω・)ノ赏
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 75.0.3770.80(Google Chrome 75.0.3770.80)
      @威索 感谢
  7. Artintel  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
    main.js有没有压缩前的代码可以看看呀,想学习一个
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.157(Google Chrome 74.0.3729.157)
      @Artintelsrc/index.jsmain.js是 webpack 打包后的
  8. GideonEmery  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 74.0.3724.8(Google Chrome 74.0.3724.8)
    日常打卡,爬~|´・ω・)ノ
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.108(Google Chrome 74.0.3729.108)
  9. JIm  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
    感谢,不过请问为什么我点了GO之后界面一直加载不出来?
    1. JIm  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
      @JIm 已经了解用法了,浏览器上可显示弹幕,但是OBS里加载不出来OωO
      1. JIm  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
        @JIm 不好意思已经可以正常使用了,谢谢
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
  10. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.119(Google Chrome 72.0.3626.119)
    前端真不容易啊,还得会node
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @ㄒㄐㄍㄢ 其实我是因为 node 好玩才去做前端的
      1. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.119(Google Chrome 72.0.3626.119)
        @神代綺凜 我就不一样了,当初为了能看懂别人的代码学的前端 后来发现前端限制好多,还是node强大
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
          @ㄒㄐㄍㄢ node 写起来爽,你看我 github 已经完全变成 node 的形状了(x
          1. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.119(Google Chrome 72.0.3626.119)
            @神代綺凜 看出来了,那些骚东西纯前端实现不了( ,,´・ω・)ノ"(´っω・`。)等我也会了我也一定一样骚
  11. WeiYuan  Android 9(Android 9) / Google Chrome 72.0.3626.105(Google Chrome 72.0.3626.105)
    日常打卡。滴|´・ω・)ノ
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @WeiYuan 打卡成功
  12. kelvin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.119(Google Chrome 72.0.3626.119)
    前端大佬啊
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @kelvin 不,这个只是一点点 javascript 的事,弹幕服务连接也是其他人写好的,我只是做了一点微小的工作
  13. Noob  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.109(Google Chrome 72.0.3626.109)
    该评论仅登录用户及评论双方可见
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @Noob
      该评论仅登录用户及评论双方可见
      1. Noob  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
        @神代綺凜 綺凜,你的api我请求出来一条json数据,但是你上面的url我打不开
        1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
          @Noob 直接访问会 403,要带https://www.pixiv.net的 referer,这是p站的防盗链措施
          1. Noob  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
            @神代綺凜 我学艺不精,再去看看教程
  14. 小萌羽  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.109(Google Chrome 72.0.3626.109)
    (๑•̀ㅁ•́ฅ)
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
  15. 红尘已逝梦犹存  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.109(Google Chrome 72.0.3626.109)
    然而,B站弹幕已经先审后播了。
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @红尘已逝梦犹存 但这也没什么影响