billd-live

前端 2025-06-20

billd-live

2025-06-20

如果学生没有学习的积极要求，教师越是把注意局限在知识上，学生对自己学习上的成绩就越冷淡，学习愿望就越低落。——苏霍姆林斯基《给教师的建议》

https://github.com/galaxy-s10/billd-live

Billd Live：基于 WebRTC 的开源在线互动直播系统

@galaxy-s10/billd-live 是一个开源、高可定制性的在线互动直播系统。它采用现代前端技术栈，结合 WebRTC 实时音视频传输和 Node.js 服务端，支持多人连麦、弹幕互动、屏幕共享、录制回放等丰富功能，适用于教育培训、在线会议、远程协作、娱乐直播等多种场景。

项目简介

Billd Live 致力于为开发者和团队提供一套可自由扩展、二次开发友好的 Web 端直播解决方案。项目结构清晰，模块化强，既适合用作生产环境的直播/会议系统，也适合用作学习 WebRTC、Socket.io、前后端分离架构的技术参考。

技术栈

前端：Vue3、Vite、TypeScript、Element Plus
实时音视频：WebRTC
通信：Socket.io（信令服务器）
后端服务：Node.js（Koa/Express）
桌面客户端：Electron（可选，便于桌面端深度集成）
其他：FFmpeg（录制/转码）、阿里云OSS（存储）、JWT（用户认证）

核心功能

实时音视频互动
- 支持一对一、一对多、多对多音视频连麦
- 低延迟实时传输，体验媲美主流商业产品
弹幕与聊天室
- 支持直播弹幕互动、聊天室消息推送
- 自定义表情、消息样式
屏幕共享
- 支持浏览器原生桌面/窗口/标签页共享
- 多人可同步观看共享内容
录制与回放
- 支持本地/服务端录制，自动上传云存储
- 提供回放播放功能，便于课堂/会议复盘
房间与权限控制
- 支持房间创建、密码/邀请码访问
- 支持房主、管理、观众等多角色权限分配
设备检测与美颜
- 支持摄像头、麦克风、网络检测
- 集成美颜滤镜、背景虚化
多端适配
- 支持 PC、移动端浏览器访问
- 可选 Electron 客户端实现桌面端深度集成

快速上手

1. 克隆仓库

1 2	`git clone https://github.com/galaxy-s10/billd-live.git cd billd-live`

2. 安装依赖

1 2	`pnpm install # 或 yarn install / npm install`

3. 启动服务端

1 2	`pnpm run server # 或 yarn server / npm run server`

4. 启动前端

1 2	`pnpm run dev # 或 yarn dev / npm run dev`

5. 访问系统

打开浏览器访问 http://localhost:5173 即可体验在线直播与互动功能。

应用场景

远程教育直播、互动课堂
线上会议、团队协作、远程面试
娱乐直播、游戏解说、才艺展示
技术分享、线上讲座、公开课
私有化部署的企业级视频会议

特色与优势

完全开源，灵活二次开发：业务代码清晰，注释完善，便于功能扩展与深度定制。
现代前后端分离架构：主流技术栈，支持多人协作开发。
依赖自主可控：无需依赖第三方商业直播云，所有音视频流均走自建服务器和 WebRTC 协议。
技术学习价值高：适合学习和实践 WebRTC/Node.js/Socket.io 等前后端实时通信技术。
丰富的功能和良好的用户体验：UI 友好，功能完整，接近商业级体验。

典型架构图

+-----------+       (WebRTC)        +-----------+
|  用户A    |<--------------------->|  用户B    |
| (浏览器)  |        P2P            |(浏览器)   |
+-----------+                       +-----------+
      |                                   |
      |         Socket.io 信令服务器       |
      +-----------<---------------------->+
      |                                   |
   Node.js 后端   <------>   云存储/录制/鉴权

参考链接

如果你需要一套可控、自主、功能丰富的 Web 端互动直播系统，不妨体验下 Billd Live。
欢迎 Star、Fork 和参与贡献！