Bladeren bron

feat: 全面优化

shuisheng 2 jaren geleden
bovenliggende
commit
1c5d657640
7 gewijzigde bestanden met toevoegingen van 199 en 49 verwijderingen
  1. 92 4
      README.md
  2. 10 5
      src/constant.ts
  3. 1 2
      src/hooks/use-play.ts
  4. 69 28
      src/layout/pc/head/index.vue
  5. 2 1
      src/layout/pc/modal/index.vue
  6. 20 4
      src/views/faq/index.vue
  7. 5 5
      src/views/group/index.vue

+ 92 - 4
README.md

@@ -23,6 +23,7 @@
 | 直播间网页端 | [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-react-native](https://github.com/galaxy-s10/billd-live-react-native) | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live-react-native?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live-react-native) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live-react-native?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live-react-native) |                                                                |
 | 直播间移动端 | [billd-live-flutter](https://github.com/galaxy-s10/billd-live-flutter)           | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live-flutter?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live-flutter) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live-flutter?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live-flutter)                     |                                                                |
+| 直播间移动端 | [billd-live-kotlin](https://github.com/galaxy-s10/billd-live-kotlin)             | [![github](https://img.shields.io/github/stars/galaxy-s10/billd-live-kotlin?label=star&logo=GitHub)](https://github.com/galaxy-s10/billd-live-kotlin) [![github](https://img.shields.io/github/forks/galaxy-s10/billd-live-kotlin?label=fork&logo=GitHub)](https://github.com/galaxy-s10/billd-live-kotlin)                         |                                                                |
 | 直播间后台   | [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)     |
 
@@ -53,11 +54,22 @@ billd 直播间,目前实现了类似 [bilibili 的 Web 在线直播](https://
 - 流媒体服务器相关:[SRS](https://ossrs.net)、 [FFmpeg](https://ffmpeg.org)、[Coturn](https://github.com/coturn/coturn)
 - Docker 相关:[Docker](https://www.docker.com)
 
+## 接口文档
+
+apifox:[https://apifox.com/apidoc/shared-c7556b54-17b2-494e-a039-572d83f103ed](https://apifox.com/apidoc/shared-c7556b54-17b2-494e-a039-572d83f103ed)
+
+## 客户端下载
+
+安卓端:[点击下载](https://resource.hsslive.cn/billd-live/image/e859ec0e1fac824ce92b6522104f53ed.apk)
+苹果端:TODO
+Windows端:TODO
+Mac端:TODO
+
 ## 预览
 
 线上地址:[https://live.hsslive.cn](https://live.hsslive.cn)
 
-### 电脑端
+### 电脑端(web)
 
 - 首页
 
@@ -87,7 +99,7 @@ billd 直播间,目前实现了类似 [bilibili 的 Web 在线直播](https://
   style="width:800px"
 />
 
-### 移动端
+### 移动端(web)
 
 - 首页
 
@@ -103,9 +115,58 @@ billd 直播间,目前实现了类似 [bilibili 的 Web 在线直播](https://
   style="height:500px"
 />
 
+### 安卓端
+
+- 首页、分区、排行
+
+<img
+  src="https://resource.hsslive.cn/billd-live/image/38a0fae4c5104913ca0b7617ca58b518.webp" 
+  style="width:300px"
+/><img
+  src="https://resource.hsslive.cn/billd-live/image/8fa5423182476341ade6d74dba9eac0f.webp" 
+  style="width:300px"
+/><img
+  src="https://resource.hsslive.cn/billd-live/image/a6df703d48c3c3e5ec708ebf0b48f345.webp" 
+  style="width:300px"
+/>
+
+- 直播间详情、分区详情
+
+<img
+  src="https://resource.hsslive.cn/billd-live/image/420a663259487309a51cdc0d44b01246.webp" 
+  style="width:300px"
+/> <img
+  src="https://resource.hsslive.cn/billd-live/image/da8d31cda66f51b95cd8b34f4cbeb680.webp" 
+  style="width:300px"
+/>
+
+- 我的已登录/未登录
+
+<img
+  src="https://resource.hsslive.cn/billd-live/image/3a777718d31f94e6d25071d29f5e5185.webp" 
+  style="width:300px"
+/> <img
+  src="https://resource.hsslive.cn/billd-live/image/e785bc308c2d24460baf36f65aa39c5e.webp" 
+  style="width:300px"
+/>
+
+- 直播中心
+
+<img
+  src="https://resource.hsslive.cn/billd-live/image/77b89ccf7a10be1663f7e9d5bc69565d.jpg" 
+  style="width:300px"
+/> <img
+  src="https://resource.hsslive.cn/billd-live/image/90f505de2580b69aed73ea5c5717e669.jpg" 
+  style="width:300px"
+/>
+
 ## 本地启动
 
-> b站视频:[从零搭建迷你版b站web直播间合集](https://space.bilibili.com/381307133/channel/collectiondetail?sid=1458070)
+> b站教程:[从零搭建迷你版b站web直播间合集](https://space.bilibili.com/381307133/channel/collectiondetail?sid=1458070),看里面带 `从零搭建迷你b站直播间` 封面的视频。
+>
+> billd-live付费课:[https://www.hsslive.cn/article/151](https://www.hsslive.cn/article/151)
+
+### billd-live
 
 - 安装依赖(建议使用 node 版本:16.16.0)
 
@@ -131,6 +192,32 @@ npm run start
 npm run build
 ```
 
+### billd-live-server
+
+- 安装依赖(建议使用 node 版本:16.16.0)
+
+```bash
+pnpm i
+```
+
+> 更新 billd 相关依赖:
+
+```bash
+pnpm i billd-utils@latest billd-scss@latest billd-html-webpack-plugin@latest
+```
+
+> 本地必须要有 docker、ffmpeg 环境!
+>
+> 项目启动后,会在项目的 src/config/目录下生成 secret.ts 文件,请填写里面的信息,MYSQL_CONFIG、REDIS_CONFIG、SRS_CONFIG 必填!
+
+```bash
+# 1.初始化docker容器
+pnpm run docker:dev
+
+# 2.运行(4300端口)
+pnpm run dev
+```
+
 ## 兼容性
 
 - [x] iphone 14
@@ -152,6 +239,7 @@ npm run build
 - 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
 
@@ -164,8 +252,8 @@ npm run build
 - node 版本:v16.19.1
 - pnpm 版本:8.6.3
 - docker 版本:23.0.1, build a5ee5b1
-- redis 版本:基于 docker,镜像:redis:7.0
 - mysql 版本:基于 docker,镜像:mysql:8.0
+- redis 版本:基于 docker,镜像:redis:7.0
 
 ### 流媒体服务器环境
 

+ 10 - 5
src/constant.ts

@@ -12,8 +12,16 @@ export const WEBSOCKET_URL =
     ? 'ws://localhost:4300'
     : 'wss://srs-pull.hsslive.cn';
 
-export const APIFOX_URL =
-  'https://apifox.com/apidoc/shared-c7556b54-17b2-494e-a039-572d83f103ed/';
+export const COMMON_URL = {
+  apifox:
+    'https://apifox.com/apidoc/shared-c7556b54-17b2-494e-a039-572d83f103ed/',
+  admin: 'https://live-admin.hsslive.cn',
+  mobileApk:
+    'https://resource.hsslive.cn/billd-live/image/e859ec0e1fac824ce92b6522104f53ed.apk',
+  bilibiliCollectiondetail:
+    'https://space.bilibili.com/381307133/channel/collectiondetail?sid=1458070&ctype=0',
+  payCoursesArticle: 'https://www.hsslive.cn/article/151',
+};
 
 // 全局的cookie的key
 export const COOKIE_KEY = {
@@ -28,9 +36,6 @@ export const lsKey = {
   token: 'token',
 };
 
-export const bilibiliCollectiondetail =
-  'https://space.bilibili.com/381307133/channel/collectiondetail?sid=1458070&ctype=0';
-
 export const mediaTypeEnumMap = {
   [MediaTypeEnum.camera]: '摄像头',
   [MediaTypeEnum.microphone]: '麦克风',

+ 1 - 2
src/hooks/use-play.ts

@@ -176,7 +176,6 @@ export function useHlsPlay() {
     }
   }
   function setVolume(val: number) {
-    console.log('setVolumesetVolume', val);
     if (hlsVideoEl.value) {
       hlsVideoEl.value.volume = val / 100;
     }
@@ -234,7 +233,7 @@ export function useHlsPlay() {
           },
           function () {
             try {
-              console.log(`开始播放hls,muted:${cacheStore.muted}`);
+              // console.log(`开始播放hls,muted:${cacheStore.muted}`);
               hlsPlayer.value?.play();
             } catch (err) {
               console.error('hls播放失败');

+ 69 - 28
src/layout/pc/head/index.vue

@@ -40,10 +40,20 @@
           </a>
           <a
             class="item"
-            href="https://live-admin.hsslive.cn"
-            @click.prevent="openToTarget('https://live-admin.hsslive.cn')"
+            :href="COMMON_URL.admin"
+            @click.prevent="openToTarget(COMMON_URL.admin)"
           >
-            后台
+            直播后台
+          </a>
+          <a
+            class="item"
+            :href="COMMON_URL.mobileApk"
+            @click.prevent="openToTarget(COMMON_URL.mobileApk)"
+          >
+            App下载
+            <div class="badge">
+              <div class="txt">new</div>
+            </div>
           </a>
           <!-- <a
           class="item"
@@ -77,11 +87,30 @@
               </a>
               <a
                 class="item"
-                @click="openToTarget(APIFOX_URL)"
+                :href="COMMON_URL.apifox"
+                @click.prevent="openToTarget(COMMON_URL.apifox)"
               >
                 <div class="txt">接口文档</div>
                 <VPIconExternalLink class="icon"></VPIconExternalLink>
               </a>
+              <a
+                class="item"
+                :href="COMMON_URL.bilibiliCollectiondetail"
+                @click.prevent="
+                  openToTarget(COMMON_URL.bilibiliCollectiondetail)
+                "
+              >
+                <div class="txt">b站教程</div>
+                <VPIconExternalLink class="icon"></VPIconExternalLink>
+              </a>
+              <a
+                class="item"
+                :href="COMMON_URL.payCoursesArticle"
+                @click.prevent="openToTarget(COMMON_URL.payCoursesArticle)"
+              >
+                <div class="txt">billd-live付费课</div>
+                <VPIconExternalLink class="icon"></VPIconExternalLink>
+              </a>
             </div>
           </template>
         </Dropdown>
@@ -277,7 +306,7 @@ import { fetchAreaList } from '@/api/area';
 import Dropdown from '@/components/Dropdown/index.vue';
 import VPIconChevronDown from '@/components/icons/VPIconChevronDown.vue';
 import VPIconExternalLink from '@/components/icons/VPIconExternalLink.vue';
-import { APIFOX_URL, bilibiliCollectiondetail } from '@/constant';
+import { COMMON_URL } from '@/constant';
 import { loginTip } from '@/hooks/use-login';
 import { IArea, LiveRoomTypeEnum } from '@/interface';
 import { routerName } from '@/router';
@@ -310,19 +339,31 @@ const about = ref([
     label: '版本发布',
     routerName: routerName.release,
   },
-  {
-    label: 'b站视频',
-    url: bilibiliCollectiondetail,
-  },
 ]);
 const resource = ref([
+  {
+    label: 'billd-live',
+    url: 'https://github.com/galaxy-s10/billd-live',
+  },
   {
     label: 'billd-live-server',
     url: 'https://github.com/galaxy-s10/billd-live-server',
   },
   {
     label: 'billd-live-admin',
-    url: 'https://live-admin.hsslive.cn',
+    url: 'https://github.com/galaxy-s10/billd-live-admin',
+  },
+  {
+    label: 'billd-live-kotlin',
+    url: 'https://github.com/galaxy-s10/billd-live-kotlin',
+  },
+  {
+    label: 'billd-live-flutter',
+    url: 'https://github.com/galaxy-s10/billd-live-flutter',
+  },
+  {
+    label: 'billd-live-react-native',
+    url: 'https://github.com/galaxy-s10/billd-live-react-native',
   },
 ]);
 const plugins = ref([
@@ -415,6 +456,22 @@ function handleStartLive(key: LiveRoomTypeEnum) {
     height: 60px;
     box-shadow: inset 0 -1px #f1f2f3 !important;
     font-size: 15px;
+    .badge {
+      position: absolute;
+      top: -10px;
+      right: -10px;
+      padding: 0 2px;
+      border-radius: 4px;
+      background-color: red;
+      color: white;
+      line-height: 1;
+      .txt {
+        margin-right: 0;
+        transform-origin: top !important;
+
+        @include minFont(10);
+      }
+    }
     .hr {
       width: 100%;
       height: 1px;
@@ -447,7 +504,6 @@ function handleStartLive(key: LiveRoomTypeEnum) {
           display: flex;
           align-items: center;
           margin-right: 20px;
-          height: 100%;
           color: black;
           text-decoration: none;
           cursor: pointer;
@@ -500,7 +556,7 @@ function handleStartLive(key: LiveRoomTypeEnum) {
         }
 
         .list {
-          width: 120px;
+          width: 150px;
           .item {
             display: flex;
             align-items: center;
@@ -554,22 +610,6 @@ function handleStartLive(key: LiveRoomTypeEnum) {
       }
       .privatizationDeployment {
         position: relative;
-        .badge {
-          position: absolute;
-          top: -10px;
-          right: -10px;
-          padding: 0 2px;
-          border-radius: 4px;
-          background-color: red;
-          color: white;
-          line-height: 1;
-          .txt {
-            margin-right: 0;
-            transform-origin: top !important;
-
-            @include minFont(10);
-          }
-        }
       }
 
       .start-live {
@@ -621,6 +661,7 @@ function handleStartLive(key: LiveRoomTypeEnum) {
         .list {
           width: 90px;
           .item {
+            position: relative;
             display: flex;
             padding: 0 15px;
             cursor: pointer;

+ 2 - 1
src/layout/pc/modal/index.vue

@@ -18,7 +18,7 @@
       <span class="hot">billd-live付费课火热报名中!</span>
       <b
         class="link"
-        @click="openToTarget('https://www.hsslive.cn/article/151')"
+        @click="openToTarget(COMMON_URL.payCoursesArticle)"
       >
         查看详情
       </b>
@@ -32,6 +32,7 @@
 </template>
 
 <script lang="ts" setup>
+import { COMMON_URL } from '@/constant';
 import { openToTarget } from 'billd-utils';
 import { ref } from 'vue';
 

+ 20 - 4
src/views/faq/index.vue

@@ -59,10 +59,19 @@
         <div class="hr"></div>
         <div class="item">
           <h2>billd-live使用了什么技术栈?</h2>
-          <p>billd-live是一个前端全栈项目,几乎所有技术栈都是前端相关。</p>
-          <p>前端相关:Vue3、WebRTC、Typescript</p>
+          <p>billd-live是一个偏前端的全栈项目,几乎所有技术栈都是前端相关。</p>
           <p>
-            后端相关:Node、Koa2、MySQL、Redis、Socket.io、
+            前端相关:Typescript、Vue3、<a
+              target="_blank"
+              class="link"
+              href="https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API"
+            >
+              WebRTC </a
+            >、Web Audio、Web Worker、Canvas
+          </p>
+          <p>后端相关:Node、Koa2、MySQL、Redis、Socket.io、 Typescript</p>
+          <p>
+            音视频相关:
             <a
               target="_blank"
               class="link"
@@ -70,7 +79,14 @@
             >
               SRS
             </a>
-            、Typescript
+            <span>、</span>
+            <a
+              target="_blank"
+              class="link"
+              href="https://ffmpeg.org"
+            >
+              FFmpeg
+            </a>
           </p>
           <p>部署相关:Docker、Jenkins</p>
         </div>

+ 5 - 5
src/views/group/index.vue

@@ -42,7 +42,7 @@
         4. 没有免费的资料,所有免费的都在
         <span
           class="link"
-          @click="openToTarget(bilibiliCollectiondetail)"
+          @click="openToTarget(COMMON_URL.bilibiliCollectiondetail)"
         >
           b站视频合集
         </span>
@@ -68,7 +68,7 @@
       <p>
         1. 免费:看我的b站视频合集:<span
           class="link"
-          @click="openToTarget(bilibiliCollectiondetail)"
+          @click="openToTarget(COMMON_URL.bilibiliCollectiondetail)"
         >
           从零搭建迷你版b站web直播间
         </span>
@@ -77,9 +77,9 @@
         2. 付费:考虑billd-live付费课:
         <span
           class="link"
-          @click="openToTarget('https://www.hsslive.cn/article/151')"
+          @click="openToTarget(COMMON_URL.payCoursesArticle)"
         >
-          https://www.hsslive.cn/article/151
+          {{ COMMON_URL.payCoursesArticle }}
         </span>
       </p>
       <div>3. 闲聊勿扰。</div>
@@ -114,7 +114,7 @@
 <script lang="ts" setup>
 import { openToTarget } from 'billd-utils';
 
-import { bilibiliCollectiondetail } from '@/constant';
+import { COMMON_URL } from '@/constant';
 </script>
 
 <style lang="scss" scoped>