Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/XL8Z/BiliBili_BiLiveChat.js
基于PlayWithMe_JS二次开发的纯前端弹幕展示板，纯前端 H5 + ES6 + CSS3 实现
https://github.com/XL8Z/BiliBili_BiLiveChat.js
Last synced: 12 days ago
JSON representation
基于PlayWithMe_JS二次开发的纯前端弹幕展示板，纯前端 H5 + ES6 + CSS3 实现
- Host: GitHub
- URL: https://github.com/XL8Z/BiliBili_BiLiveChat.js
- Owner: XL8Z
- License: lgpl-2.1
- Created: 2022-05-19T20:51:55.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-04-08T22:38:04.000Z (over 1 year ago)
- Last Synced: 2024-10-25T19:44:20.900Z (14 days ago)
- Language: JavaScript
- Homepage:
- Size: 108 MB
- Stars: 33
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-bilibili-extra - BILiveChat.js - 基于 PlayWithMe_JS 二次开发的纯前端弹幕展示板. (直播相关工具 / 直播脚本)
README
# BiLiveChat.js
基于PlayWithMe_JS二次开发的纯前端弹幕展示板
纯前端，H5+ES6+CSS3实现
## 功能简介
- 通过B站官方开放平台接口接收B站直播间数据，长期有效
- 纯前端实现，直接导入OBS或直播姬
- 完全开源，简单易懂
- 从弹幕和礼物事件的处理到构建HTML的Document Element，整个流程结构清晰完全透明，可以自己自由定义
- 妈宝级的注释【十年来写的最多的一次】
### 更新
- 2022年5月21日 傍晚 更新了多个相同礼物的连击合并功能
- 2022年5月22日 深夜 更新了内置的礼物数据库，并重做了礼物显示
### 画饼
- 黑白名单屏蔽功能
- 过低等级和无粉丝团路人屏蔽功能
- 舰长和高等级老粉进入事件【待官方提供】
- Up主表情和直播间表情支持【待官方提供】
## 完整Demo预览
### 直接打开
### 浏览器源导入OBS
### 实际效果
## 心里堵得慌不吐不快的牢骚
GayHub不是打不开，就是反俄整西方那套话语权的烂活
GitEE各种弱智废物，早不做审核和监管，上面发话了就乱成一团，连申请开源的功能都一堆Bug【见SBGitEE.png】
Coding半死不活，开源功能实际上基本屏蔽了，只能拿来当私有代码仓库用
我是真的被恶心了一晚上，这里请允许我代表中国IT行业基层码农向非要在开源里搞政治的白皮傻逼们竖个中指
别问，问就 #StandWithRussia #DepoliticizationNow
## 使用方式
1. 同步仓库到本地
2. [加Q群248810727](https://jq.qq.com/?_wv=1027&k=4JcqejBO)申请直播间的白名单激活代签服务
3. 复制一个完整Demo，改名为你的项目名
4. 修改[BiLiveChat\你的项目\BiLiveChat.html]文件里45行左右的默认直播间ID，如：
```
BiliBili_PlayWithMe.LiveRoomID = 4639581;
```
5. 在[BiLiveChat\你的项目\BiLiveChat.html]的[div_BiLiveChatOutputer]里做静态的前端代码样式，如：
```
04:35
猫裙少年泽远喵
连上了喵！
```
【可以使用[Ctrl]+[F]快速定位】【如果使用默认HTML模板，直接单改CSS也行】
6. 在[BiLiveChat\你的项目\CustomStyle.css]里编写CSS样式，调试到正确的显示效果
```
CSS选择器参考如下
:root
变量字段
#div_BiLiveChatOutputer
主要输出区域
#div_BiLiveChatOutputer>.div_OutputerItem
一个独立的内容【弹幕、礼物、上舰】
#div_BiLiveChatOutputer>.div_OutputerItem[type="Danmaku"]
弹幕内容
#div_BiLiveChatOutputer>.div_OutputerItem[medal_level_level='0']
粉丝团等级区间范围为0的内容
【当粉丝团等级分段设为[3,10,16,20]时，18级牌子的粉丝团等级区间为3】
【详见MedalLevelLevel说明】
#div_BiLiveChatOutputer>.div_OutputerItem[guard_level='3']
舰长发出的内容
选择器可以叠加，如：
#div_BiLiveChatOutputer>.div_OutputerItem[type="Danmaku"][guard_level='2']
为提督的弹幕内容
#div_BiLiveChatOutputer>.div_OutputerItem[type="Danmaku"]:not([guard_level='0'])
所有舰队【舰长、提督、总督】的弹幕内容
```
7. 在[BiLiveChat\你的项目\BiLiveChat.html]里重写替换原有绑定事件，按照你的模板插入HTML代码，如：
```
BiliBili_PlayWithMe.NewDanmaku = (Dmk) => {
//添加Documents
Outputer.innerHTML +=
"
\
" + Dmk.time + "" +
Make_Avatar(Dmk.uface) +
(Dmk.fans_medal_level > 0 ? Make_FansMedal(Dmk.fans_medal_name, Dmk.fans_medal_level) : " ") +
Dmk.uname + " ： \
" + Dmk.msg + "\
";
//滚动到最底部
BiLiveChat.GoBottom();
}
```
8. 测试效果，无问题后交付使用
- 可以使用代码唤起测试
```
UtilTools.AutoTest();
```
- 也可以使用已经加入白名单的测试房间
目前已经有白名单，且弹幕够多便于测试的直播间
```
某喵的云养猫：4639581
修勾的互联网夜店：3645373
Zelo-Balance的空间站转播：14047
弹幕姬作者CopyLiu的EVE行情播报：5051
Daan大聪明的弹幕游戏：24075835
```
## 注意：遇事不决，把一下文件仔细看一遍，留意注释
- 完整Demo\BiLiveChat.html
【内含全部应该由你控制的HTML和JS代码，你应该全文看完】
- 完整Demo\CustomStyle.css
【内含全部应该由你控制的CSS样式代码】
- Lib\BiLiveChat\BiLiveChat.js
【一些通用的处理，比如滚动到底或者自动生成粉丝牌子】
- Lib\BiLiveChat\BiLiveChat.css
【一些通用的样式，比如关闭主要面板的滚动条显示，或者平滑滚动特效】
- Lib\BiLiveChat\BiliBili_PlayWithMe_JSONP.js
【通用的B站直播开放平台 JavaScript SDK，如果你好奇如何与B站通讯，或者作为初学者需要东西助眠，可以去看看】
## 引用与鸣谢
- LinusU：decode-utf8.js【用于WEBSocket数据解码】
- 落霞孤鹜：悠哉体中文版【用于完整Demo】
- Sequbre：B站运营提供对接支持
## 二次开发与使用协议
**当你基于BiLiveChat与其他我们的开源项目进行二次开发时，我们视作您已经认同并知晓以下信息**
本项目为开源项目，但我方并未放弃任何权利，仅默认允许他人使用本项目的代码、设计、服务和其他资源
**我方有权利单方面对任何直播间进行封锁和屏蔽，随时可以停止服务**
### 二次开发者的义务
- **二次开发需要在文件包内部添加声明文件，公示所引用的一切资源，包括但不限于：字体、开源代码、网站上下载其他美术素材** *【对于已付费买断商用权利的内容不做强制要求】*
- 付费定制中，甲方有权并应知悉乙方二次开发的工作范围与工作量与其具体价格，乙方应明确告知甲方工作内容与收费原因
### 以下行为可能会导致涉事的直播间被停用、封锁、屏蔽，二次创作者备案信息被我方公开，甚至内部沟通后B站官方封禁
- **以欺诈目的骗取签名，实际利用本插件的代签服务用于其他目的，如弹幕游戏【你他喵的自己不会申请开发者帐号么？】**
- **恶意移除本文件与其他权利声明文件**
- **二次定制开发恶意抹除项目原始归属信息，或包装为自己的纯原创项目**
- **未对甲方声明本项目的存在与已完成内容，拒绝明确告知对方哪些部分属于定制**
- **接到举报有侵权问题，包括但不限于使用了禁止商用或者仅限个人私用的代码与素材，经核实属实**
- 对本项目已有部分进行收费，或巧立名目对甲方收取明显超过大众认知中合理价格的费用
- 二次定制开发单版本分发超过1人未明确告知用户，以欺诈为目的的一稿多售
- 普适版本的一稿多售价格明显过高【定制开发均价的25%】【这里不强制要求，但我方保留质疑的权利】
- **对于可能涉嫌隐瞒、欺诈与不当盈利的二次定制开发，我方有权无限期暂停对涉事直播间的长链授权，并书面公示所有涉事画师与前端程序员的涉事帐号**
**我方有权在取得谅解与完成和解后仍保留公示信息，望好自为之**
### 我们认同并支持以下行为
- **二次开发者不对定制版本进行混淆加密，便于使用过程中甲方自行微调**
- 二次开发者使用CSS的变量、伪类选择器等新技术精心设计代码结构，尽可能写出更清晰的代码
-
- 二次开发者提交自己练习、展示用途的非商用稿件到开源案例，在自我宣传的同时充分照顾新人主播
【建议在稿件中写好联系方式，万一有新人喜欢想找你定制呢？】
## 最后对某些人说句题内的题外话
有能耐就自己看懂代码照着做一个，没能耐就给我忍着，别整那套拿别人东西抹掉各种信息装原创骗钱的烂活，一套两三百，去骗新人小V的钱
你大可继续自己令人唾弃的龌龊，当一个理直气壮的灰产小子，赚自己的快钱
但请你记住，你要面对的是整个圈子的道德审判，以及来自一个小学就开始搞计算机，在相关领域摸鱼了16年的IT从业者的绝对恶意
不要等身败名裂，等社会正义的铁拳砸下来了才哭诉自己遭遇了恐怖的网络暴力
互联网是有记忆的，网络暴力只有你身份证或者你的帐号注销了才会停止
**勿谓言之不预也**