基于Vue3 + WebRtc + Node + SRS + FFmpeg搭建的直播间
## 简介 billd 直播间，目前实现了类似 [bilibili 的 Web 在线直播](https://live.bilibili.com)功能，即你（房主）可以发布直播，别人进入你的直播间后能看到你的直播内容；而你也可以作为观众，进入别人的直播间看别人的直播内容。 > 后端：[https://github.com/galaxy-s10/billd-live-server](https://github.com/galaxy-s10/billd-live-server) ## 功能 - [x] 原生 webrtc 推拉流 - [x] srs webrtc 推流， `webrtc` 或 `http-flv` 或 `hls`拉流 - [x] [obs](https://github.com/obsproject/obs-studio)推流 - [x] 用户模块 - [x] 支付模块（支付宝当面付） - [x] 订单模块 - [x] 商品模块 - [x] 适配移动端 - [ ] 在线后台 ## 预览 - 线上地址：[https://live.hsslive.cn](https://live.hsslive.cn) ## b 站视频 - [从零搭建迷你版 b 站 web 直播间（Vue3+WebRTC+Node+SRS），公开课一：项目功能介绍 1](https://www.bilibili.com/video/BV1vW4y1Q7gP) - [从零搭建迷你版 b 站 web 直播间（Vue3+WebRTC+Node+SRS），公开课一：项目功能介绍 2](https://www.bilibili.com/video/BV1tP411q7qw) - [从零搭建迷你版 b 站 web 直播间（Vue3+WebRTC+Node+SRS），公开课二：本地运行项目 1](https://www.bilibili.com/video/BV1KW4y1D7Z6) - [从零搭建迷你版 b 站 web 直播间（Vue3+WebRTC+Node+SRS），公开课二：本地运行项目 2](https://www.bilibili.com/video/BV1jc411u7K9) ## 准备 - 前端相关：[vue3](https://vuejs.org) 以及相关技术栈 - 后端相关： [nodejs](https://nodejs.org) 以及相关技术栈、[socket.io](https://socket.io) - webrtc 相关： webrtc 相关 api（[RTCPeerConnection](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection)）、[coturn](https://github.com/coturn/coturn) - 流媒体服务器相关： [srs](https://ossrs.net)、 [ffmpeg](https://ffmpeg.org) - 数据库相关： mysql、redis - docker 相关：[docker](https://www.docker.com) ## 安装和使用 - 获取项目代码 ```bash git clone https://github.com/galaxy-s10/billd-live.git ``` - 安装依赖 > 建议使用 node 版本：16.16.0 ```bash pnpm i ``` > 更新 billd 相关依赖： ```bash pnpm i billd-utils@latest billd-scss@latest billd-html-webpack-plugin@latest billd-deploy@latest ``` - 运行 ```bash npm run start ``` - 打包 ```bash npm run build ``` ## FAQ [https://live.hsslive.cn/about/faq](https://live.hsslive.cn/about/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/about/team](https://live.hsslive.cn/about/team) ## 赞助 [https://live.hsslive.cn/sponsors](https://live.hsslive.cn/sponsors) ## 交流 如果你对该项目感兴趣或有想法，欢迎进群或添加我的微信：
