🍓 Chrome 扩展 - Bilibili 直播姬
把浏览器页面直播到 Bilibili 直播间
说明
-
无需安装
OBS
这类直播软件,就可以把浏览器任何页面直播到B站
、斗鱼
或者虎牙
的直播间里去,假如你有自己的直播间并且也安装了Node.js
的话,那么可以安装这个Chrome
扩展玩下,适合做无人值守音乐轮播
或者电影轮播
什么的。 -
配合
弹幕
接口功能,可以做出更自定义更丰富的弹幕互动
直播场景,例如弹幕点歌
、弹幕点电影
和语音朗读弹幕
这些小玩意,甚至还可以弹幕写文章
或者弹幕玩页游
等等,全都能在你的网页用js
实现。 -
为什么还需要
Node.js
呢,因为找了一圈也没找到浏览器直接编码和推流的好方案,所以还是需要运行一个简单的Node.js
程序来做中转服务,不过这个程序只有几十行代码,可以本地运行也可以部署到服务器上。
演示
我的直播间,不定时在线:https://live.bilibili.com/4092892
安装
客户端
服务端
也可以通过npm
获取服务端代码:
npm i bilibili-live-hime-server
进入代码目录,假如不是通过npm
获取的话,还需要安装依赖:
npm install
运行服务端,默认端口8080
,默认中转地址就是http://localhost:8080
:
npm start
假如是部署到服务器的话,中转地址就是http://[公网IP]:8080
,或者也可以使用自定义端口:
npm start 8081
使用
安装好Chrome
扩展,假如服务端已经在运行情况下,就可以打开你想直播的浏览器页面,然后在扩展填好基本的直播信息(如下图)就可以开播了。
截图
支持
只列出常见的平台,请注意有的平台是rtmp地址
和直播码
是写在一起的,而且要注意之间的斜杆/
不能漏掉,你要自己把它拆开填写如:
rtmp://***/{直播码}
弹幕
假如你有填写直播间地址
的话,默认就会生成一个动态简单的弹幕姬,你也可以自定义弹幕行为,只要你的被直播页面
有类似下面的代码就能接收到弹幕:
window.addEventListener('message', event => {
const { cmd, info, data } = event.data;
switch (cmd) {
case 'DANMU_MSG':
console.log('弹幕', info);
break;
case 'SEND_GIFT':
console.log('礼物', data);
break;
case 'GUARD_BUY':
console.log('上船', data);
break;
case 'ROOM_REAL_TIME_MESSAGE_UPDATE':
console.log('粉丝', data.fans);
console.log('房间', data.roomid);
break;
case 'POPULAR':
console.log('人气', data);
break;
default:
console.log('其他', event.data);
break;
}
});
问题
- 一个中转地址可以支持同时支持多个直播推流吗?
可以是可以,但目前服务端的代码还不是很完善,还是推荐不同直播推流使用不同端口的做法。
- 怎么为页面快速地注入自定义的
js
和css
文件?
例如怎么为网易云音乐注入你的js
和css
文件,通常只要打开开发者工具
的控制台,然后把代码粘贴进去就可以。但是这个扩展支持只要把js
和css
直接拖放到直播姬
的控制台就可以完成注入。
- 可以录制直播的视频吗?
可以的,只要在服务端的binary_stream
事件接收到视频字节流那里把数据存起来,最后保存成webm
视频格式就行。
捐助
交流
License
MIT © Harvey Zack