Skip to content

zhw2590582/bilibili-live-hime

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🍓 Chrome 扩展 - Bilibili 直播姬

把浏览器页面直播到 Bilibili 直播间

说明

  • 无需安装OBS这类直播软件,就可以把浏览器任何页面直播到B站斗鱼或者虎牙的直播间里去,假如你有自己的直播间并且也安装了Node.js的话,那么可以安装这个Chrome扩展玩下,适合做无人值守音乐轮播或者电影轮播什么的。

  • 配合弹幕接口功能,可以做出更自定义更丰富的弹幕互动直播场景,例如弹幕点歌弹幕点电影语音朗读弹幕这些小玩意,甚至还可以弹幕写文章或者弹幕玩页游等等,全都能在你的网页用js实现。

  • 为什么还需要Node.js呢,因为找了一圈也没找到浏览器直接编码和推流的好方案,所以还是需要运行一个简单的Node.js程序来做中转服务,不过这个程序只有几十行代码,可以本地运行也可以部署到服务器上。

演示

我的直播间,不定时在线:https://live.bilibili.com/4092892

安装

客户端

https://chrome.google.com/webstore/detail/jfgjlmafdjaofbkjpaoojooghnocjcag

服务端

也可以通过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://***/{直播码}
直播平台 获取直播码
B 站直播 https://link.bilibili.com/p/center/index#/my-room/start-live
斗鱼直播 https://mp.douyu.com/live/main
虎牙直播 https://i.huya.com/index.php?m=ProfileSetting#ktylts
战旗直播 https://www.zhanqi.tv/user/anchor/flowSetting
Twitch 直播 https://stream.twitch.tv/ingests/
Twitch 直播 https://dashboard.twitch.tv/settings/channel#stream-preferences
YouTube 直播 https://www.youtube.com/live_dashboard

弹幕

假如你有填写直播间地址的话,默认就会生成一个动态简单的弹幕姬,你也可以自定义弹幕行为,只要你的被直播页面有类似下面的代码就能接收到弹幕:

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;
    }
});

问题

  • 一个中转地址可以支持同时支持多个直播推流吗?

可以是可以,但目前服务端的代码还不是很完善,还是推荐不同直播推流使用不同端口的做法。

  • 怎么为页面快速地注入自定义的jscss文件?

例如怎么为网易云音乐注入你的jscss文件,通常只要打开开发者工具的控制台,然后把代码粘贴进去就可以。但是这个扩展支持只要把jscss直接拖放到直播姬的控制台就可以完成注入。

  • 可以录制直播的视频吗?

可以的,只要在服务端的binary_stream事件接收到视频字节流那里把数据存起来,最后保存成webm视频格式就行。

捐助

捐助

交流

QQ 群

License

MIT © Harvey Zack