神代綺凜

[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

使用步骤

  1. 打开 https://bilivechat.moe.best/
  2. 输入房间号,配置其他选项,点击“Go!”,然后复制新页面的地址
  3. 在 OBS 中添加“浏览器”来源,将地址粘贴到“URL”处,根据自己需要调整宽高数值等
  4. Enjoy~

关于直播间号的坑

需要注意的是,1000 以内的直播间号基本都是由B站后期分配的,并不是真正的直播间号,所以必须使用原直播间号才能正确连接这部分直播间

得到原直播间号的方法是打开UP主的空间,直接查看空间右侧直播间的链接得到直播间号

关于“显示头像”

由于获取用户头像需要调用B站API,在浏览器中无法直接跨域,有两种解决方案

在线

该方案依赖于 json2jsonp,您无需进行任何额外操作,但不建议在弹幕量大的场景下使用

本地

因此这个功能依赖于本地运行的服务,即项目中的src/faceService.js,启动该服务后即可勾选“显示头像”以展示弹幕发送者头像

如果你是 Windows 用户,你可以直接使用该打包好的可执行文件,下载后双击运行即可,可最小化到任务栏托盘
下载点:Github / OneDrive

或者你也可以自行安装 Node.js,然后

git clone https://github.com/Tsuk1ko/bilibili-live-chat.git
cd bilibili-live-chat
npm i
npm start

感谢

std4453/bilibili-danmaku-client

如觉得本项目有用,不妨给本项目和上面的弹幕客户端项目点个 (<ゝω・)~☆Kira

如有好的意见和建议,欢迎提出 :>

搬瓦工VPS优惠套餐,建站稳如狗,支持支付宝,循环出账94折优惠码BWH26FXH3HIQ
年付$28CN2线路,1核/512M内存/10G硬盘/500GB@1Gbps【点击购买】(经常售罄,请抓紧机会)
年付$47CN2线路,1核/1G内存/20G硬盘/1T@1Gbps【点击购买
我的文章对您有帮助吗?
我很可爱 请给我钱
扫一扫拿红包 → 扫商家收款码 → 花呗支付比红包多1分钱的金额
既可免费赞赏,又可完成支付宝支付任务!
Last modification:March 3rd, 2019 at 10:41 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

30 comments

  1. 藤原零时  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)
  2. 威索  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)
      @威索

      感谢

  3. 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)
      @Artintel

      src/index.jsmain.js是 webpack 打包后的

  4. 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)
  5. 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)
  6. ㄒㄐㄍㄢ  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)
            @神代綺凜

            看出来了,那些骚东西纯前端实现不了( ,,´・ω・)ノ"(´っω・`。)等我也会了我也一定一样骚

  7. 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

      打卡成功

  8. 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 的事,弹幕服务连接也是其他人写好的,我只是做了一点微小的工作

  9. 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)
            @神代綺凜

            我学艺不精,再去看看教程

  10. 小萌羽  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)
  11. 红尘已逝梦犹存  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)
      @红尘已逝梦犹存

      但这也没什么影响