• Stars
    star
    222
  • Rank 179,123 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 5 years ago
  • Updated about 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🍓 Chrome 扩展 - Bilibili 直播姬

🍓 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

More Repositories

1

ArtPlayer

🎨 ArtPlayer.js is a modern and full featured HTML5 video player
JavaScript
2,453
star
2

SubPlayer

📝 SubPlayer is an online subtitle editor
JavaScript
932
star
3

live-video-study-notes

📺 整理前端视频直播相关技术的笔记,适合想入门前端流媒体技术的人阅读
591
star
4

FlvPlayer

🍭 FlvPlayer.js is a JavaScript player for decode flv to the canvas
JavaScript
300
star
5

WFPlayer

🌊 WFPlayer.js is an audio waveform generator
JavaScript
260
star
6

Teahouse-Wordpress-Theme

🍵 Wordpress blog theme Teahouse
PHP
105
star
7

100plugins

💯 Write 100 javascript plugins
JavaScript
40
star
8

blank

Generate blank video online
JavaScript
17
star
9

term-web

📟 A simple Terminal UI that run on the web
JavaScript
17
star
10

v2ex-card

Chrome 扩展 - v2ex 悬停名片
JavaScript
16
star
11

snippets-box

📒 Code snippet manager based on GitHub Gist, Github Pages
JavaScript
16
star
12

chrome-audio-capture

Chrome Audio Capture
JavaScript
15
star
13

pluto

Wordpress 博客主题 Pluto 源码
PHP
14
star
14

mse-player

基于MSE实现的视频分段加载播放器
TypeScript
14
star
15

traitor

有内鬼,终止交易!
JavaScript
13
star
16

bilibili-live-recorder

Bilibili 直播间录播姬
JavaScript
12
star
17

chrome-extension-vuexTree

一个Chrome扩展,为 Vuex 实现类似 redux-devtools-extension 的状态树展示效果
JavaScript
10
star
18

RNHearthstone

React Native 《炉石传说》查卡App
JavaScript
7
star
19

duration-time-conversion

Duration and time format conversion
JavaScript
6
star
20

console.log

console.log
JavaScript
5
star
21

island

Wordpress 博客主题 Island 源码
PHP
5
star
22

record-hime

🎈 Chrome 扩展 - 录播姬
JavaScript
5
star
23

owl

Wordpress 博客主题 Owl 源码
PHP
4
star
24

flv-reader

🍬 [WIP] Parse flv to fmp4 for Media Source Extension
JavaScript
3
star
25

csp-generator

Content Security Policy Generator
JavaScript
3
star
26

dida.js

An audio stream blender for the browser.
JavaScript
3
star
27

http-flv-streaming-demo

http-flv 直播流例子
Dockerfile
3
star
28

puppeteer-crx

Use puppeteer to package chrome extensions(.crx)
JavaScript
3
star
29

rollup-plugin-worker-inline

A simple rollup plugin to create inline worker
JavaScript
3
star
30

gloom

Wordpress 博客主题 Gloom 源码
PHP
3
star
31

website-builder

多页面静态网站生成器
JavaScript
3
star
32

option-validator

A simple option validator
JavaScript
3
star
33

Webpack-MultiplePage

Webpack多页面打包分析
JavaScript
2
star
34

gitting

💬 Gitting is a modern comment component based on Github Issue.
JavaScript
2
star
35

bilibili-danmuku

获取B站弹幕
JavaScript
2
star
36

nodejs-quick-view

NodeJS文档快速预览
JavaScript
2
star
37

obj-to-string

对象转字符串(非JSON)
JavaScript
2
star
38

detect-connection-speed

Detect connection speed with JavaScript
JavaScript
2
star
39

simple-observer

A simple observer with ES6 Proxy
JavaScript
2
star
40

assets-cdn

CDN资源中转站
2
star
41

Express-mongoose-Passport

使用Express搭建一个简易的全栈管理系统
JavaScript
2
star
42

table-export-zip

打包下载分割的表格
JavaScript
2
star
43

hitokoto-cli

A Hitokoto Cli Tool (一言命令行工具)
JavaScript
2
star
44

html-layout-webpack-plugin

webpack html 布局插件
JavaScript
1
star
45

srt.js

📺 Let the html5 video player support .srt format subtitles.
JavaScript
1
star
46

simple-i18n-webpack-plugin

webpack i18n plugin (webpack i18n 多语言插件)
JavaScript
1
star
47

island-cli

Island blog system command line tool
JavaScript
1
star
48

bilibili-cinema

🎥 Chrome 扩展 - Bilibili 影院点播系统
1
star
49

island-cli-theme-default

Island blog default theme
CSS
1
star
50

js-quick-view

JavaScript 标准库快速浏览
JavaScript
1
star
51

zhw2590582

1
star
52

blur-image-url

JavaScript
1
star
53

online-code-editor

HTML
1
star
54

threejs-template

Threejs Template
JavaScript
1
star
55

aimu-statistics

JavaScript
1
star
56

island-loader

A island loader for webpack
JavaScript
1
star
57

weibo-backup

Chrome 扩展 - 微博备份工具
1
star
58

auto-update-from-github

Auto update from github
JavaScript
1
star
59

island-cli-init

Island blog initialization framework
JavaScript
1
star
60

brusher-html

Wordpress 博客主题 Brusher 静态文件
JavaScript
1
star
61

mini-speed-chart

Detect connection speed with mini chart
JavaScript
1
star
62

artplayer-ie-tester

Test Artplayer.js in Internet Explorer
JavaScript
1
star
63

alioss-watcher

Chrome 扩展 - 阿里云OSS监听器
1
star