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

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

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

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

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

• 代码目录 packages/client

• 代码目录 packages/server

也可以通过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视频格式就行。

MIT © Harvey Zack