fix: 修复已知问题

src/hooks/use-pull.ts

@@ -103,7 +103,6 @@ export function usePull({
   }
 
   async function handlePlay() {
-    console.log('kkkk21', roomLiveType.value);
     if (roomLiveType.value === liveTypeEnum.srsFlvPull) {
       if (!autoplayVal.value) return;
       await handleFlvPlay();

src/hooks/use-ws.ts

@@ -472,6 +472,7 @@ export const useWs = () => {
       }
       if (res.data.code !== 0) {
         console.error('/rtc/v1/publish/拿不到sdp');
+        window.$message.error('/rtc/v1/publish/拿不到sdp');
         return;
       }
       await rtc.setRemoteDescription(

src/views/h5/room/index.vue

@@ -5,11 +5,11 @@
         <div
           class="avatar"
           :style="{
-            backgroundImage: `url(${roomLiveing?.live?.user?.avatar})`,
+            backgroundImage: `url(${anchorInfo?.avatar})`,
           }"
         ></div>
         <div class="username">
-          {{ roomLiveing?.live?.user?.username }}
+          {{ anchorInfo?.username }}
         </div>
       </div>
       <div class="right">
@@ -24,16 +24,17 @@
     <div
       v-loading="videoLoading"
       class="video-wrap"
+      :style="{ height: videoWrapHeight + 'px' }"
     >
       <div
         class="cover"
         :style="{
-          backgroundImage: `url(${roomLiveing?.live?.live_room?.cover_img})`,
+          backgroundImage: `url(${liveRoomInfo?.cover_img})`,
         }"
       ></div>
       <div
-        ref="canvasRef"
         class="media-list"
+        ref="remoteVideoRef"
         :class="{ item: appStore.allTrack.length > 1 }"
       ></div>
       <div
@@ -50,7 +51,7 @@
       <div
         ref="containerRef"
         class="list"
-        :style="{ height: height + 'px' }"
+        :style="{ height: containerHeight + 'px' }"
       >
         <div
           v-for="(item, index) in damuList"
@@ -100,7 +101,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue';
+import { nextTick, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { fetchFindLiveRoom } from '@/api/liveRoom';
@@ -114,37 +115,45 @@ const appStore = useAppStore();
 
 const bottomRef = ref<HTMLDivElement>();
 const containerRef = ref<HTMLDivElement>();
-const canvasRef = ref<HTMLVideoElement>();
 const localVideoRef = ref<HTMLVideoElement[]>([]);
 const showPlayBtn = ref(false);
-const height = ref(0);
+const containerHeight = ref(0);
+const videoRatio = ref(16 / 9);
+const videoWrapHeight = ref(0);
+const remoteVideoRef = ref<HTMLDivElement>();
 
 const {
   initPull,
-  closeWs,
-  closeRtc,
-  getSocketId,
   keydownDanmu,
   sendDanmu,
-  addVideo,
   handleHlsPlay,
   roomLiveType,
-  roomLiveing,
   autoplayVal,
   videoLoading,
-  roomNoLive,
   damuList,
-  liveUserList,
-  sidebarList,
   danmuStr,
   liveRoomInfo,
+  anchorInfo,
+  remoteVideo,
 } = usePull({
   localVideoRef,
-  canvasRef,
   liveType: liveTypeEnum.srsHlsPull,
   isSRS: false,
 });
 
+watch(
+  () => remoteVideo.value,
+  (newVal) => {
+    newVal.forEach((item) => {
+      remoteVideoRef.value?.appendChild(item);
+    });
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
 watch(
   () => damuList.value.length,
   () => {
@@ -179,20 +188,24 @@ async function getLiveRoomInfo() {
 
 function startPull() {
   showPlayBtn.value = false;
-  handleHlsPlay();
+  handleHlsPlay(liveRoomInfo.value?.hls_url);
 }
 
 onMounted(() => {
   setTimeout(() => {
     scrollTo(0, 0);
   }, 100);
+  videoWrapHeight.value =
+    document.documentElement.clientWidth / videoRatio.value;
+  nextTick(() => {
+    if (containerRef.value && bottomRef.value) {
+      const res =
+        bottomRef.value.getBoundingClientRect().top -
+        containerRef.value.getBoundingClientRect().top;
+      containerHeight.value = res;
+    }
+  });
   getLiveRoomInfo();
-  if (containerRef.value && bottomRef.value) {
-    const res =
-      bottomRef.value.getBoundingClientRect().top -
-      containerRef.value.getBoundingClientRect().top;
-    height.value = res;
-  }
 });
 </script>
 
@@ -231,7 +244,6 @@ onMounted(() => {
     position: relative;
     overflow: hidden;
     flex: 1;
-    height: 230px;
     background-color: rgba($color: #000000, $alpha: 0.5);
     .cover {
       position: absolute;
@@ -244,7 +256,6 @@ onMounted(() => {
     .media-list {
       position: relative;
       overflow-y: scroll;
-      height: 230px;
       :deep(video) {
         display: block;
         width: 100%;

src/views/home/index.vue

@@ -22,7 +22,7 @@
           <div v-loading="videoLoading">
             <div
               v-if="currentLiveRoom?.live_room?.flv_url"
-              ref="canvasRef"
+              ref="remoteVideoRef"
             ></div>
           </div>
           <template v-if="currentLiveRoom">
@@ -176,7 +176,7 @@
 
 <script lang="ts" setup>
 import { isMobile } from 'billd-utils';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { fetchLiveList } from '@/api/live';
@@ -193,10 +193,10 @@ const topLiveRoomList = ref<ILive[]>([]);
 const otherLiveRoomList = ref<ILive[]>([]);
 const currentLiveRoom = ref<ILive>();
 const localVideoRef = ref<HTMLVideoElement[]>([]);
+const remoteVideoRef = ref<HTMLDivElement>();
 
-const { handleHlsPlay, videoLoading } = usePull({
+const { handleHlsPlay, videoLoading, remoteVideo } = usePull({
   localVideoRef,
-  canvasRef,
   liveType: route.query.liveType as liveTypeEnum,
   isSRS: [
     liveTypeEnum.srsWebrtcPull,
@@ -205,6 +205,19 @@ const { handleHlsPlay, videoLoading } = usePull({
   ].includes(route.query.liveType as liveTypeEnum),
 });
 
+watch(
+  () => remoteVideo.value,
+  (newVal) => {
+    newVal.forEach((item) => {
+      remoteVideoRef.value?.appendChild(item);
+    });
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
 function changeLiveRoom(item: ILive) {
   if (item.id === currentLiveRoom.value?.id) return;
   currentLiveRoom.value = item;