fix: 优化

src/App.vue

@@ -54,8 +54,8 @@ onMounted(() => {
   });
   handleUpdate();
   loginMessage();
-  cacheStore.setMuted(true);
-  cacheStore.setVolume(0);
+  cacheStore.muted = true;
+  cacheStore.volume = 0;
   const token = getToken();
   if (token) {
     userStore.getUserInfo();

src/components/VideoControls/index.vue

@@ -20,7 +20,7 @@
       </div>
       <div
         class="muted"
-        @click="cacheStore.setMuted(!cacheStore.muted)"
+        @click="cacheStore.muted = !cacheStore.muted"
       >
         <n-popover
           placement="top"

src/hooks/use-pull.ts

@@ -159,7 +159,7 @@ export function usePull(roomId: string) {
         roomLiving.value = true;
         videoLoading.value = false;
         appStore.playing = true;
-        cacheStore.muted = false;
+        // cacheStore.muted = false;
       }
       if (
         isRemoteDesk.value ||
@@ -352,9 +352,9 @@ export function usePull(roomId: string) {
         el.muted = newVal;
       });
       if (!newVal) {
-        cacheStore.setVolume(cacheStore.volume || appStore.normalVolume);
+        cacheStore.volume = cacheStore.volume || appStore.normalVolume;
       } else {
-        cacheStore.setVolume(0);
+        cacheStore.volume = 0;
       }
     }
   );
@@ -366,9 +366,9 @@ export function usePull(roomId: string) {
         el.volume = newVal / 100;
       });
       if (!newVal) {
-        cacheStore.setMuted(true);
+        cacheStore.muted = true;
       } else {
-        cacheStore.setMuted(false);
+        cacheStore.muted = false;
       }
     }
   );

src/layout/pc/index.vue

@@ -52,6 +52,7 @@ const appStore = useAppStore();
     position: fixed;
     right: 10px;
     bottom: 10px;
+    z-index: 999;
     width: 300px;
     border-radius: 10px;
     cursor: pointer;

src/store/cache/index.ts

@@ -24,11 +24,5 @@ export const usePiniaCacheStore = defineStore(`${lsKeyPrefix}pinia-cache`, {
     setResourceList(res: PiniaCacheRootState['resource-list']) {
       this['resource-list'] = res;
     },
-    setMuted(res: PiniaCacheRootState['muted']) {
-      this.muted = res;
-    },
-    setVolume(res: PiniaCacheRootState['volume']) {
-      this.volume = res;
-    },
   },
 });

src/utils/network/webRTC.ts

@@ -94,6 +94,8 @@ export class WebRTCClass {
   }
 
   loopGetStats = () => {
+    const previousTimestamp = 0; // 初始化上一次获取码率信息的时间
+
     this.loopGetStatsTimer = setInterval(async () => {
       if (!this.peerConnection) return;
       try {
@@ -127,9 +129,31 @@ export class WebRTCClass {
               }
             }
           }
+
+          // if (report.type === 'outbound-rtp') {
+          //   // @ts-ignore
+          //   const bytesSent = report.bytesSent;
+          //   const timestamp = report.timestamp;
+          //   // 计算发送码率
+          //   const sendBitrate =
+          //     (bytesSent / (timestamp - previousTimestamp)) * 8;
+          //   console.log(`发送码率: ${sendBitrate} kbps`);
+          //   // 更新上一次获取码率信息的时间
+          //   previousTimestamp = timestamp;
+          // } else if (report.type === 'inbound-rtp') {
+          //   const bytesReceived = report.bytesReceived || 0;
+          //   const timestamp = report.timestamp;
+          //   // 计算接收码率
+          //   const receiveBitrate =
+          //     (bytesReceived / (timestamp - previousTimestamp)) * 8;
+          //   console.log(`接收码率: ${receiveBitrate} kbps`);
+          //   // 更新上一次获取码率信息的时间
+          //   previousTimestamp = timestamp;
+          // }
         });
         this.loss = loss;
         this.rtt = rtt;
+
         this.update();
       } catch (error) {
         console.error('getStats错误');

src/views/h5/room/index.vue

@@ -441,7 +441,7 @@ async function getLiveRoomInfo() {
 }
 
 function startPull() {
-  cacheStore.setMuted(false);
+  cacheStore.muted = false;
   showPlayBtn.value = false;
   handlePlay(appStore.liveRoomInfo!);
 }

src/views/pull/index.vue

@@ -46,9 +46,15 @@
               </div>
               <div class="rtt">延迟：{{ rtcRtt || '-' }}</div>
               <div class="loss">丢包：{{ rtcLoss || '-' }}</div>
+              <div class="bitrate">码率：-</div>
             </div>
             <div class="bottom">
-              <span>{{ appStore.liveRoomInfo?.desc }}</span>
+              <div
+                class="desc"
+                :title="appStore.liveRoomInfo?.desc"
+              >
+                {{ appStore.liveRoomInfo?.desc }}
+              </div>
               <span
                 class="area"
                 @click="
@@ -875,6 +881,9 @@ async function uploadChange() {
 }
 
 async function handlePay(item: IGoods) {
+  if (!loginTip()) {
+    return;
+  }
   const res = await fetchGiftRecordCreate({
     goodsId: item.id!,
     goodsNums: 1,
@@ -1090,9 +1099,16 @@ function handleScrollTop() {
             }
           }
           .bottom {
+            display: flex;
             font-size: 14px;
+            .desc {
+              width: 400px;
+              cursor: pointer;
+
+              @extend %singleEllipsis;
+            }
             .area {
-              margin-left: 10px;
+              margin: 0 10px;
               color: #9499a0;
               cursor: pointer;
             }