Posted in未分类

一款开源、免费、技术先进的在线直播系统

一款开源、免费、技术先进的在线直播系统

简介

Billd-Live是一个基于Vue3、WebRTC、Node、SRS和FFmpeg等核心技术搭建的直播间系统。

目前实现了类似 bilibili 的 Web 在线直播功能，即你（房主）可以发布直播，别人进入你的直播间后能看到你的直播内容；而你也可以作为观众，进入别人的直播间看别人的直播内容。

核心功能

Billd-Live提供了丰富而强大的直播功能，满足各种直播场景的需求：

多样化的推拉流方式

  • 原生WebRTC推拉流：无需插件，极低延迟

  • SRS WebRTC推流：支持http-flv、hls、webrtc、rtmp多种多种协议拉流

  • MSR推流+FFmpeg转码：提高兼容性和稳定性

  • 第三方工具推流：完美支持OBS、FFmpeg等专业工具

丰富的直播场景

  • 一对一PK：适合主播对战

  • 一对多PK：扩展互动可能性

  • 多对多PK：实现复杂直播互动

专业化功能

  • 前端混流：使用Web Audio和Canvas处理音视频流

  • 推流/拉流鉴权：保障直播安全

  • 移动端App：基于Flutter框架开发

  • 客户端App：使用Electron构建桌面端应用应用

部署指南

环境准备

必需软件及版本环境检查

打开终端，执行以下命令确认环境就绪：

# 检查Node.js版本 node --version # 应该显示 v18.19.0+ # 检查pnpm版本 pnpm --version # 应该显示 8.x # 检查Docker docker --version # 应该显示 Docker version 24+ docker-compose --version # 应该显示 Docker Compose version v2+

获取源代码

1. 克隆所有必要仓库# 创建项目目录 mkdir billd-live-project cdbilld-live-project # 克隆主要仓库 gitclonehttps://github.com/galaxy-s10/billd-live.git # 前端 gitclonehttps://github.com/galaxy-s10/billd-live-server.git # 后端API gitclonehttps://github.com/galaxy-s10/billd-live-admin.git # 管理后台 2. 检查目录结构

完成后，你的目录结构应该是：

billd-live-project/ ├── billd-live/ # 前端直播间 ├── billd-live-server/ # 后端API服务 └── billd-live-admin/ # 管理后台

️ 数据库设置

1. 启动MySQL和Redis容器cdbilld-live-server # 使用项目提供的docker-compose启动数据库服务 docker-compose up -d mysql redis

等待片刻后检查容器状态：

docker ps

应该看到mysql和redis容器正在运行。

2. 初始化数据库

连接到MySQL（密码在docker-compose.yml中默认为123456）：

# 进入MySQL容器 dockerexec-it billd-mysql mysql -uroot -p123456 # 在MySQL命令行中创建数据库 CREATE DATABASE IF NOT EXISTS billd_live CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; exit; 3. 导入数据结构# 回到项目根目录 cd../.. # 如果有sql文件则导入，否则后端会自动创建表结构 # 先检查是否有sql文件 find . -name"*.sql"

后端服务部署

1. 安装依赖cdbilld-live-server pnpm install

如果在安装过程中遇到node-gyp相关错误，需要安装编译工具：

Windows:

npm install --global windows-build-tools

macOS:

xcode-select --install

Linux (Ubuntu/Debian):

sudo apt update sudo apt install build-essential python3 2. 环境变量配置

复制并编辑环境配置文件：

cp .env.example .env

编辑.env文件，重点配置以下项：

# 数据库配置 MYSQL_DATABASE=billd_live MYSQL_USERNAME=root MYSQL_PASSWORD=123456 MYSQL_HOST=127.0.0.1 MYSQL_PORT=3306 # Redis配置 REDIS_HOST=127.0.0.1 REDIS_PORT=6379 REDIS_PASSWORD= # 服务端口 SERVER_PORT=4300 SERVER_HOST=0.0.0.0 # JWT密钥（自行生成随机字符串） JWT_SECRET=your-jwt-secret-key-here # 其他保持默认即可 3. 启动后端服务# 开发模式启动 pnpm run dev # 或者在新的终端窗口运行，避免阻塞 nohup pnpm run dev &

正常启动后会显示：

Server running on port 4300 Database connected successfully

前端服务部署

1. 安装前端依赖

打开新的终端窗口：

cdbilld-live pnpm install 2. 配置前端环境cp .env.example .env.local

编辑.env.local文件：

# API基础URL VITE_BASE_API=http://localhost:4300 # WebSocket URL VITE_SOCKET_URL=http://localhost:4300 # 静态资源URL VITE_STATIC_URL=http://localhost:4300 # 其他配置根据需要调整 3. 启动前端服务pnpm run start

正常启动后会显示：

➜ Local: http://localhost:3344/ ➜ Network: use --host to expose

管理后台部署

1. 安装管理后台依赖

再开一个新的终端窗口：

cdbilld-live-admin pnpm install 2. 启动管理后台pnpm run start

SRS流媒体服务器部署

1. 启动SRS服务# 在项目任意位置执行 docker run -d \ --name srs-server \ -p 1935:1935 \ -p 1985:1985 \ -p 8080:8080 \ -p 8000:8000/udp \ registry.cn-hangzhou.aliyuncs.com/ossrs/srs:5.0.196 196 2. 验证SRS状态

访问http://localhost:8080应该能看到SRS控制台。

✅ 完整验证

现在你应该有4个服务在运行：

  1. 后端API: http://localhost:4300

  2. 前端直播间: http://localhost:3344

  3. 管理后台: http://localhost:4455

  4. SRS流媒体: http://localhost:8080

测试接口连通性curl http://localhost:4300/api/test

如果返回JSON数据说明后端正常运行。

浏览器访问测试

  1. 打开 http://localhost:3344 应该能看到直播间界面

  2. 打开 http://localhost:4455 应该能看到管理后台登录页

首次使用配置

1. 创建管理员账户

首次使用时需要通过API创建管理员账号：

curl -X POST http://localhost:4300/api/auth/register \ -H"Content-Type: application/json"\ -d'{ "username": "admin", "password": "admin123", "email": "[email protected]" }' 2. 登录管理后台

使用刚创建的账户登录管理后台，完成基本配置。

预览

电脑端（web）

  • 首页

  • 分区

    • 进入直播间

 

  • 发起直播

    • 排行榜

 

  • 用户中心

  • 直播中心

直播间信息开播设置直播数据

移动端（web）

    • 首页

 

  • 进入直播间

后台（web）

    • 控制台

 

  • 黑名单

  • 直播管理

    • 直播记录

 

  • 直播间列表

    • 直播间消息列表

 

  • 订单列表

    • 商品列表

 

  • 全局消息列表

github.com/galaxy-s10/b

后端专属技术群

广告人士勿入，切勿轻信私聊，防止被骗

加我好友，拉你进群

点下方的“❤”支持我们，非常感谢！