billd-live: 基于Vue3 + WebRTC + Node + SRS搭建的开源直播间

科技   职场   2024-11-16 12:11   重庆  

嗨, 大家好, 我是徐小夕.

之前一直在社区分享零代码&低代码&AI多模态的技术实践, 比如H5-Dooring零码平台, Flowmix多模态可视化系列.

最近在github上发现一款由国内开发者开发的非常有价值的项目——billd-live. 它是一款由Vue3 + WebRTC实现的开源直播间, 有点类似于我们熟悉的B站. 

我们可以基于它搭建web端的在线直播项目, billd-live 作者也在着手开发APP端, 桌面端, 所以这款项目非常适合想研究WebRTC实时直播平台的小伙伴.

demo演示

直播间页面展示:

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

演示地址: https://live.hsslive.cn

功能点介绍

  •  原生 webrtc 推拉流

  •  srs webrtc 推流,支持 http-flvhlswebrtcrtmp拉流

  •  msr 推流,ffmpeg 转码,支持 http-flvhlswebrtcrtmp拉流

  •  一对一打 PK

  •  一对多打 PK

  •  多对多打 PK

  •  多平台转推(b 站、虎牙直播)

  •  前端混流

  •  推流鉴权

  •  拉流鉴权

  •  OBS、FFmpeg推流

  •  用户模块(qq 登录)

  •  支付模块(支付宝当面付)

  •  订单模块

  •  商品模块

  •  礼物模块

  •  直播后台

  •  响应式页面

  •  适配多语言(i18n)

  •  移动端App(Flutter)

  •  客户端App(Electron)

  •  接入bilibili直播

  •  接入腾讯云(云直播)

  •  接入腾讯云(实时音视频 TRTC)

  •  私有化部署

技术实现

  • 前端相关:Vue3 以及相关技术栈、TypescriptWebRTCWebCodecsWeb WorkderWeb AudioCanvas

  • 后端相关:Nodejs 以及相关技术栈、Koa2SequelizeMysqlRedisSocket.io

  • 流媒体服务器相关:SRS、 FFmpeg、Coturn

  • Docker 相关:Docker

当然项目中还使用了很多有意思的开源NPM, 大家感兴趣也可以参考一下.

安装和使用

billd-live-clinet(客户端)

1.安装依赖(建议使用 node 版本:v18.19.0)

pnpm i

更新 billd 相关依赖:

pnpm i billd-utils@latest billd-scss@latest billd-deploy@latest billd-html-webpack-plugin@latest
  • 运行
npm run start
  • 打包
npm run build

billd-live-server(服务端)

  • 安装依赖(建议使用 node 版本:v18.19.0)
pnpm i

更新 billd 相关依赖:

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

本地必须要有 docker、ffmpeg 环境!

项目启动后,会在项目的 src/secret/目录下生成 secret.ts 文件,请填写里面的信息,MYSQL_CONFIG、REDIS_CONFIG、SRS_CONFIG 必填!

# 1.初始化docker容器
pnpm run docker:dev

# 2.初始化数据库(可选,只需要执行一次)
pnpm run mysql:dev

# 3.运行(4300端口)
pnpm run dev

目前它已经支持移动端和PC端, 作者也录制了免费和付费的课程, 方便大家更好的学习和部署.

Tips

billd开源直播间项目花了近一年打造, 一人开发目前来说确实相对完善了, 以下是项目的一些“工程量”:

这个项目对直播间的整体技术设计, 以及脚手架的开发, 还是做了很多的思考, 能为开发者避免不少坑, 所以这里我还是非常推荐的, 希望作者后续会持续迭代和优化.

国产开源助力

如果你是开源作者, 或者独立开发者, 你的项目足够有价值, 欢迎向趣谈前端投稿推荐, 让10w+优质用户为你打call.

我的产品进程

最近flowmix系列产品比如 flowmix/docx 做了大量的更新, 比如优化了光标定位问题, 支持了电子表格嵌入等能力, 大家可以体验一下:

体验地址: http://flowmix.turntip.cn/docx

后续我会在 flowmix 公众号中持续分享flowmix系列产品和规划, 感兴趣的朋友可以关注一下:

如果你有好的想法和建议, 也欢迎随时留言区交流讨论~

往期精彩:

多模态文档编辑器flowmix/docx,9月更新复盘!

Dooring智图,一款开箱即用的图片海报编辑器零代码平台创业, 阶段性复盘

趣谈前端
徐小夕【知乎专栏作家】掘金签约作者,定期分享前端工程化,可视化,企业实战项目知识,深度复盘企业中经常遇到的500+技术问题解决方案。【关注趣谈前端,前端路上不迷茫】
 最新文章