docs: doc

README.md

@@ -13,30 +13,16 @@
 </h1>
 
 <p align="center">
-  基于Vue3 + WebRtc + Node + SRS + FFmpeg搭建的直播间
+  基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间
 </p>
 
-## ⚡️ 生态系统
+## 生态
 
-| 名称       | 仓库                                                                 | star & fork                                                                                                                                                                                                                                                                                                 |
-| ---------- | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 直播间前台 | [billd-live](https://github.com/galaxy-s10/billd-live)               | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live)                             |
-| 直播间后台 | [billd-live-admin](https://github.com/galaxy-s10/billd-live-admin)   | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live-admin?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live-admin) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live-admin?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live-admin)     |
-| 直播间后端 | [billd-live-server](https://github.com/galaxy-s10/billd-live-server) | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live-server?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live-server) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live-server?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live-server) |
-
-## 📢 注意
-
-该项目一开始只是为了记录本人学习直播相关技术的过程，初心也是将它作为开源项目，让想要学习直播技术相关的人能有些借鉴（因为市面上能找到的直播相关资源少之又少），但随着项目不断的完善，我发现虽然项目涉及的技术栈不是很难，但都不是常规的技术栈，而我也因此花费了大量的时间和精力（为什么市面上能找到的直播相关资源很少？突然明白了。）
-
-也因此萌生了将它作为商业项目的想法，而我又不希望因为一些值得付费的功能，就此将仓库设置为私有，所以我决定后续会将一些 **`基础功能开源`**，而那些我认为值得 **`付费的功能不会开源`**，而是会作为扩展插件或者其他形式添加进项目里。
-
-## 🙏 寻求贡献
-
-该项目从创建至今，所有东西都是只有我一个人在维护，非常期待有能力的各位参与进来，并且如果该项目有收益的话，会按劳分配给参与贡献的所有人~
-
-## 🚀 私有化部署
-
-查看详情：[https://live.hsslive.cn/privatizationDeployment](https://live.hsslive.cn/privatizationDeployment)
+| 名称       | 仓库                                                                 | star & fork                                                                                                                                                                                                                                                                                                 | 线上地址                                                       |
+| ---------- | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
+| 直播间前台 | [billd-live](https://github.com/galaxy-s10/billd-live)               | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live)                             | [https://live.hsslive.cn](https://live.hsslive.cn)             |
+| 直播间后台 | [billd-live-admin](https://github.com/galaxy-s10/billd-live-admin)   | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live-admin?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live-admin) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live-admin?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live-admin)     | [https://live-admin.hsslive.cn](https://live-admin.hsslive.cn) |
+| 直播间后端 | [billd-live-server](https://github.com/galaxy-s10/billd-live-server) | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live-server?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live-server) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live-server?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live-server) | [https://live-api.hsslive.cn](https://live-api.hsslive.cn)     |
 
 ## 简介
 
@@ -44,99 +30,79 @@ billd 直播间，目前实现了类似 [bilibili 的 Web 在线直播](https://
 
 ## 功能
 
-> 基本复刻了 b 站 web 直播间
-
 - [x] 原生 webrtc 推拉流
-- [x] srs webrtc 推流， `webrtc` 或 `http-flv` 或 `hls`拉流
+- [x] srs webrtc 推流，`http-flv` 或 `hls`拉流
 - [x] 前端混流
-- [x] [OBS](https://github.com/obsproject/obs-studio)推流
+- [x] [OBS](https://github.com/obsproject/obs-studio)、[FFmpeg](https://ffmpeg.org)推流
+- [x] 推流鉴权
 - [x] 用户模块（qq 登录）
 - [x] 支付模块（支付宝当面付）
 - [x] 订单模块
 - [x] 商品模块
 - [x] 适配移动端
 - [x] 在线后台
+- [x] 接入腾讯云直播
 
-## 设备兼容
+## 技术栈
 
-- [x] iphone 14
-- [x] 三星 s10
-- [x] ipad air 3
+- 前端相关：[Vue3](https://vuejs.org) 以及相关技术栈、`Typescript`、`WebRTC`、`Web Workder`、`Web Audio`、`Canvas`
+- 后端相关：[Nodejs](https://nodejs.org) 以及相关技术栈、`Koa2`、`Sequelize`、`Mysql`、`Redis`、`Socket.io`
+- 流媒体服务器相关：[SRS](https://ossrs.net)、 [FFmpeg](https://ffmpeg.org)、[Coturn](https://github.com/coturn/coturn)
+- Docker 相关：[Docker](https://www.docker.com)
 
 ## 预览
 
 线上地址：[https://live.hsslive.cn](https://live.hsslive.cn)
 
-### 电脑端界面
+### 电脑端
 
-> 首页
+- 首页
 
 <img
-  src="https://github.com/galaxy-s10/billd-live/assets/61055341/68543c4c-ef8c-42ce-af06-cfd3880199e6" 
+  src="https://github.com/galaxy-s10/billd-live/assets/61055341/95849774-1df0-4a59-b726-8d3bc0795619" 
   style="width:800px"
 />
 
-> 进入直播间
+- 进入直播间
 
 <img
-  src="https://github.com/galaxy-s10/billd-live/assets/61055341/99cac75d-76ff-4644-a686-8238390c2c25" 
+  src="https://github.com/galaxy-s10/billd-live/assets/61055341/91ac3f5f-b06d-46b3-84bc-ab6e0add4d5b" 
   style="width:800px"
 />
 
-> 发起直播
+- 发起直播
 
 <img
-  src="https://github.com/galaxy-s10/billd-live/assets/61055341/40dd55ac-d998-4617-81d0-0c86b6332a19" 
+  src="https://github.com/galaxy-s10/billd-live/assets/61055341/81e2f413-8470-42ab-bee7-699e2f8f0290" 
   style="width:800px"
 />
 
-> 排行榜
+- 排行榜
 
 <img
-  src="https://github.com/galaxy-s10/billd-live/assets/61055341/35a81bea-b428-4fe1-a184-a9b8c0ef6ca6" 
+  src="https://github.com/galaxy-s10/billd-live/assets/61055341/6d7d79b6-e8b9-42ff-9e25-d44c41948579" 
   style="width:800px"
 />
 
-### 移动端界面
-
-> 首页
-
-<img
-  src="https://github.com/galaxy-s10/billd-live/assets/61055341/3253cb33-69a4-44f7-b23f-2ef7f9e4dc8c" 
-  style="height:500px"
-/>
+### 移动端
 
-> 分区列表
+- 首页
 
 <img
-  src="https://github.com/galaxy-s10/billd-live/assets/61055341/5a29c965-9979-4ba8-b120-ab2a164d0bf2" 
+  src="https://github.com/galaxy-s10/billd-live/assets/61055341/9b56e99a-f821-4c9c-b9c3-330c2f61d533" 
   style="height:500px"
 />
 
-> 进入直播间
+- 进入直播间
 
 <img
-  src="https://github.com/galaxy-s10/billd-live/assets/61055341/e52f1676-2d76-4203-b2fa-c094e7ef02fe" 
+  src="https://github.com/galaxy-s10/billd-live/assets/61055341/db4145a9-517d-45a5-9c74-641892d55a3e" 
   style="height:500px"
 />
 
-## 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)
+## 本地启动
 
-## 安装和使用
+> b站视频：[从零搭建迷你版b站web直播间合集](https://space.bilibili.com/381307133/channel/collectiondetail?sid=1458070)
 
 - 获取项目代码
 
@@ -170,21 +136,15 @@ npm run start
 npm run build
 ```
 
-## FAQ
-
-[https://live.hsslive.cn/about/faq](https://live.hsslive.cn/about/faq)
-
-## 团队
+## 兼容性
 
-[https://live.hsslive.cn/about/team](https://live.hsslive.cn/about/team)
-
-## 赞助
-
-[https://live.hsslive.cn/sponsors](https://live.hsslive.cn/sponsors)
+- [x] iphone 14
+- [x] 三星 s10
+- [x] ipad air 3
 
-## 微信群
+## FAQ
 
-[https://live.hsslive.cn/about/group](https://live.hsslive.cn/about/group)
+[https://live.hsslive.cn/about/faq](https://live.hsslive.cn/about/faq)
 
 ## 环境配置
 
@@ -195,9 +155,9 @@ npm run build
 - 操作系统：mac os 13.3.1
 - node 版本：16.16.0
 - pnpm 版本：8.6.3
-- docker 版本：20.10.24, build 297e128
+- docker 版本：24.0.5, build ced0996
 - mysql 版本：基于 docker，镜像：mysql:8.0
-- srs 版本：基于 docker，镜像：registry.cn-hangzhou.aliyuncs.com/ossrs/srs:5
+- srs 版本：基于 docker，镜像：registry.cn-hangzhou.aliyuncs.com/ossrs/srs:5.0.170
 - ffmpeg 版本：5.1.2
 
 ### 构建/托管服务器环境
@@ -221,5 +181,5 @@ npm run build
 - pnpm 版本：8.6.3
 - pm2 版本：5.3.0
 - docker 版本：24.0.2, build cb74dfc
-- srs 版本：基于 docker，镜像：registry.cn-hangzhou.aliyuncs.com/ossrs/srs:5
+- srs 版本：基于 docker，镜像：registry.cn-hangzhou.aliyuncs.com/ossrs/srs:5.0.170
 - ffmpeg 版本：6.0

src/layout/pc/modal/index.vue

@@ -35,8 +35,8 @@
 import { openToTarget } from 'billd-utils';
 import { ref } from 'vue';
 
-const showModal = ref(process.env.NODE_ENV === 'production');
-// const showModal = ref(false);
+// const showModal = ref(process.env.NODE_ENV === 'production');
+const showModal = ref(false);
 // const showModal = ref(true);
 // const showModal = ref(router.currentRoute.value.name === routerName.home);
 </script>

付费课简介.md

@@ -1,56 +0,0 @@
-## billd-live 简介
-
-- 前台地址：https://live.hsslive.cn
-- 后台地址：https://live-admin.hsslive.cn
-- 前台源码：https://github.com/galaxy-s10/billd-live
-- 后台源码：https://github.com/galaxy-s10/billd-live-admin
-- 后端源码：https://github.com/galaxy-s10/billd-live-server
-
-## 技术栈
-
-- 主要技术栈：`Vue3`、`WebRTC`、`Node`、`Koa2`、`SRS`
-
-- 次要技术栈：`MySQL`、`Redis`、`WebSocket`、`Docker`、`PM2`、`Fabricjs`、`Web Worker`、`Web Audio`、`FFmpeg` 等等
-
-## 课程目录（持续更新）
-
-### 公开课
-
-- [x] [从零搭建迷你版 b 站 web 直播间（Vue3+WebRTC+Node+SRS），公开课一：项目功能介绍 1](https://www.bilibili.com/video/BV1vW4y1Q7gP)
-- [x] [从零搭建迷你版 b 站 web 直播间（Vue3+WebRTC+Node+SRS），公开课一：项目功能介绍 2](https://www.bilibili.com/video/BV1tP411q7qw)
-- [x] [从零搭建迷你版 b 站 web 直播间（Vue3+WebRTC+Node+SRS），公开课二：本地运行项目 1](https://www.bilibili.com/video/BV1KW4y1D7Z6)
-- [x] [从零搭建迷你版 b 站 web 直播间（Vue3+WebRTC+Node+SRS），公开课二：本地运行项目 2](https://www.bilibili.com/video/BV1jc411u7K9)
-- [x] [从零搭建迷你版 b 站 web 直播间（Vue3+WebRTC+Node+SRS），付费课一：浅聊一下 SRS、FFmpeg、WebRTC](https://www.bilibili.com/video/BV1Fj411U7YL)
-- [x] [从零搭建迷你版 b 站 web 直播间（Vue3+WebRTC+Node+SRS），付费课二：使用 koa2 提供接口服务](https://www.bilibili.com/video/BV1eh4y177kE)
-
-### 付费课
-
-- [x] 项目功能介绍（已更新）
-- [x] 本地运行项目（已更新）
-- [x] 初探 SRS 流媒体服务器、FFmpeg（已更新）
-- [x] 浏览器推流到 SRS 流媒体服务器（已更新）
-- [x] SRS 流媒体服务器 flv 分发（已更新）
-- [x] flv.js 播放 flv 直播流（已更新）
-- [x] SRS 流媒体服务器 hls 分发（已更新）
-- [x] video.js 播放 hls 直播流（已更新）
-- [x] OBS 推流到 SRS 流媒体服务器（已更新）
-- [x] FFmpeg 推流到 SRS 流媒体服务器（已更新）
-- [x] SRS 流媒体服务器推流鉴权（已更新）
-- [x] SRS 流媒体服务器拉流鉴权（已更新）
-- [x] 推流卡顿相关问题（已更新）
-- [x] safari 播放 hls 相关问题（已更新）
-- [ ] 初探 WebRTC、coturn（已更新）
-- [ ] 原生 WebRTC 一对一直播（已更新）
-- [ ] 原生 WebRTC 一对多直播
-- [ ] 原生 WebRTC 多对多直播
-- [ ] canvas 替代 video
-- [ ] 推流的码率/帧率/分辨率控制
-- [ ] 前端混流，添加多个媒体源
-- [ ] 接入腾讯云直播
-- [ ] 初探 b 站 web 直播实现
-- [ ] 使用 canvas 处理视频流混流
-- [ ] 使用 Web Audio 处理音频流混流
-- [ ] 使用 Web Worker 优化推流
-- [ ] 了解 msr 实现推流
-
-上面课程为 billd-live 付费课，399 元/人。详情请看：https://www.hsslive.cn/article/151