galaxy-s10 / billd-live Goto Github PK

View Code? Open in Web Editor NEW

729.0 4.0 157.0 94.56 MB

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

Home Page: https://live.hsslive.cn

License: MIT License

JavaScript 2.94% Shell 0.29% HTML 0.53% TypeScript 40.67% Vue 55.33% SCSS 0.24%

coturn flv hls koa2 nodejs rtmp srs typescript vue3 webrtc ffmpeg mysql redis docker canvas web-audio web-worker

billd-live's Introduction

Billd-Live

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

简介

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

生态

名称	仓库	线上地址
直播间前台	billd-live	https://live.hsslive.cn
直播间后端	billd-live-server	https://live-api.hsslive.cn
直播间后台	billd-live-admin	https://live-admin.hsslive.cn
远程桌面	billd-desk	https://live.hsslive.cn/remoteDeskTop
直播间移动端	billd-live-flutter	https://live.hsslive.cn/download
直播间移动端	billd-live-react-native	https://live.hsslive.cn/download
直播间客户端	billd-live-electron	https://live.hsslive.cn/download
直播间移动端	billd-live-kotlin	https://live.hsslive.cn/download

功能

技术栈

前端相关：Vue3 以及相关技术栈、Typescript、WebRTC、WebCodecs、Web Audio、Web Workder、Canvas
后端相关：Nodejs 以及相关技术栈、Koa2、Sequelize、Mysql、Redis、Socket.io
流媒体服务器相关：SRS、 FFmpeg、Coturn
Docker 相关：Docker

接口文档

apifox：https://apifox.com/apidoc/shared-c7556b54-17b2-494e-a039-572d83f103ed

下载

https://live.hsslive.cn/download

预览

线上地址：https://live.hsslive.cn

电脑端（web）

首页

进入直播间

发起直播

排行榜

移动端（web）

首页

进入直播间

安卓端（flutter）

直播间详情、分区详情

直播中心

本地启动

b站教程：从零搭建迷你版b站web直播间合集，看里面带 从零搭建迷你b站直播间 封面的视频。

billd-live付费课：https://www.hsslive.cn/article/151

billd-live

安装依赖（建议使用 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.运行（4300端口）
pnpm run dev

兼容性

iphone 14
三星 s10
ipad air 3

常见问题

https://live.hsslive.cn/about/faq

环境配置

本地开发环境

配置：MacBook Pro 2023 Apple M3 Max，14 核 CPU，36G 内存

操作系统：mac os 14.1
node 版本：v18.19.0
pnpm 版本：8.6.3
docker 版本：24.0.5, build ced0996
mysql 版本：基于 docker，镜像：mysql:8.0
redis 版本：基于 docker，镜像：redis:7.0
srs 版本：基于 docker，镜像：registry.cn-hangzhou.aliyuncs.com/ossrs/srs:5.0.170
ffmpeg 版本：5.1.2

构建/托管服务器环境

配置：4 核 CPU，4G 内存，8M 带宽（广州）

操作系统：CentOS Linux release 8.2.2004
nginx 版本：1.22.1
node 版本：v16.19.1
pnpm 版本：8.6.3
docker 版本：23.0.1, build a5ee5b1
mysql 版本：基于 docker，镜像：mysql:8.0
redis 版本：基于 docker，镜像：redis:7.0

流媒体服务器环境

~~配置：2 核 CPU，2G 内存，带宽 30M（香港）~~，2G内存也能跑，但偶尔会占满内存导致服务器卡死。

配置：2 核 CPU，4G 内存，带宽 30M（香港）

操作系统：Alibaba Cloud Linux release 3 (Soaring Falcon)
node 版本：v16.20.0
pnpm 版本：8.6.3
pm2 版本：5.3.0
docker 版本：24.0.2, build cb74dfc
srs 版本：基于 docker，镜像：registry.cn-hangzhou.aliyuncs.com/ossrs/srs:5.0.170
ffmpeg 版本：6.0

致敬开源

billd-live自2023年3月开源以来，仅有作者（也就是我）一个人维护，深知做开源的难处。

如果你做过开源项目，并且单个仓库拿到 128+star，我个人认为这是非常不容易的，因为这代表了你的开源被很多人关注或认同，如果此时你正在了解直播相关方面的内容，我录制的 billd-live付费课 或许会对你有一定帮助，它将对你进行免费，作为我认同你在开源方面做的贡献，以及我对你力所能及的回馈，希望你能不忘初心，砥砺前行~

billd-live's People

Contributors

Stargazers

Watchers

Forkers

doxn fourthcities daudxu jason-chen-coder hk-hub liyz-03 start-all iflovezj twopluseight williamrjw lmch6666 wlor0623 1056917561 minixuanxuan jinx-fx crackerme fengxielove liqinfeng wfjsw he1237596 ckuire carrot0219 lceihen genzi-win sgss123 mqk-pillar zhujianxintian phantom-stock 1224706064 chungchaos sh7ning-mirror jiacheng-code leungyujp himonster1 tangcloud stanstack 001zhehao liam-cocoball zhangyuehai3 cy920820 wujingquan xnqycs axfox huajianpan niufuyu855 dreamyaner barry-flynn l1-j5n kzcm check-lu rosiabondho philresistan wxw-gu ljh990817 lmybs112 blue-lg wenjianmin kerwinchina imhjy fzrank3301 fengshch coderweij dmzhan yisar mydaoyuan itsharex aiyoubug study3c hy-vae icarrear panghao-nefu crownico jdami seraph1188v mishudaoshui wittech misterma77 chan-max kirahan lmy1991 fh332393900 chaomingd wangchaodeyuzhou xdlover hwsungsoft haohaodayouxi helberappservice zeuas gzxnydia jx159357 jeamd j-fork somtomking myxk ljh520 zhaoyuanmeng 1946578780 nanwy github-zh-cn rictt

billd-live's Issues

使用canvas代替video是否是必要呢

canvas的渲染久了感觉网页一卡一卡的，使用video也可以做到的直播素材渲染吧

src\network\websocket.ts 文件应该大写成这样：src\network\webSocket.ts

不然运行报错：

App running at:
- Local:   http://localhost:8000/
- Network: http://192.168.31.87:8000/

ERROR in ./src/store/network/index.ts:4:32
TS1261: Already included file name 'E:/test/billd-live/src/network/webSocket.ts' differs from file name 'E:/test/billd-live/src/network/websocket.ts' only in casing.
  The file is in the program because:
    Imported via '@/network/webSocket' from file 'E:/test/billd-live/src/store/network/index.ts'
    Imported via './webSocket' from file 'E:/test/billd-live/src/network/webRtc.ts'
    Root file specified for compilation
    2 |
    3 | import { WebRTCClass } from '@/network/webRtc';
  > 4 | import { WebSocketClass } from '@/network/webSocket';
      |                                ^^^^^^^^^^^^^^^^^^^^^
    5 |
    6 | type NetworkRootState = {
    7 |   wsMap: Map<string, WebSocketClass>;