philresistan/billd-live

基于Vue3 + WebRtc + Node + SRS搭建的直播间

Billd-Live

基于Vue3 + WebRtc + Node + SRS + FFmpeg搭建的直播间

简介

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

后端：https://github.com/galaxy-s10/billd-live-server

功能

• 原生 webrtc 推拉流
• srs webrtc 推流， webrtc 或 http-flv 拉流
• obs推流
• 支付宝打赏
• 用户模块
• 订单模块
• 礼物模块
• 在线后台
• 适配移动端
• 敬请期待！

预览

• https://live.hsslive.cn - 线上地址

billd_live_demo.mp4

准备

• 前端相关：vue3 以及相关技术栈
• 后端相关： nodejs 以及相关技术栈、socket.io
• webrtc 相关： webrtc 相关 api（RTCPeerConnection）、coturn
• 流媒体服务器相关： srs、 ffmpeg
• 数据库相关： mysql、redis
• docker 相关：docker

安装和使用

• 获取项目代码

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

• 安装依赖

建议使用 node 版本：16.16.0

pnpm i

更新 billd 相关依赖：

pnpm i billd-utils@latest billd-scss@latest billd-html-webpack-plugin@latest billd-deploy@latest

• 运行

npm run start

FAQ

不通过 npm 安装 flv.js，因为安装了 flv.js 后，import flvJs from 'flv.js' 会导致 vscode 的 ts 错乱。因此直接下载 flv.min.js 使用。，应该是我的 vscode 用了 vscode 的 ts 版本（ts 的 5.x 版本），用回工作区（也就是项目里面安装的 ts 的 4.9 的版本）的 ts 版本就没事了

赞助

https://live.hsslive.cn/sponsors

交流

如果你对该项目感兴趣或有想法，欢迎进群或添加我的微信：