fix: 样式

Author: xgChange

client/packages/rtc-web/src/views/video/hooks/useVideoCall.ts

@@ -1,5 +1,13 @@
 import { useUserMedia, useDevicesList } from '@vueuse/core';
-import { Ref, computed, ref, shallowRef, watch, watchEffect } from 'vue';
+import {
+  Ref,
+  computed,
+  onBeforeUnmount,
+  ref,
+  shallowRef,
+  watch,
+  watchEffect,
+} from 'vue';
 
 export type VideoShareOption = {
   audio?: Ref<MediaDeviceInfo | undefined>;
@@ -89,6 +97,8 @@ export const useVideoShare = (option: VideoShareOption = {}) => {
             ideal: 30,
             max: 60,
           },
+          width: { ideal: 1920 },
+          height: { ideal: 1280 },
         }
       : false;
     return {
@@ -140,8 +150,12 @@ export const useVideoShare = (option: VideoShareOption = {}) => {
           audioTracks.value = stream.value.getAudioTracks();
           videoTracks.value = stream.value.getVideoTracks();
         }
-        switchTrackEnable('audio', false);
-        switchTrackEnable('video', false);
+        if (!videoEnabled.value) {
+          switchTrackEnable('video', false);
+        }
+        if (!audioEnabled.value) {
+          switchTrackEnable('audio', false);
+        }
         mediaLoaded.value = true;
       }
     }
@@ -159,6 +173,10 @@ export const useVideoShare = (option: VideoShareOption = {}) => {
     }
   });
 
+  onBeforeUnmount(() => {
+    stop();
+  });
+
   return {
     video,
     setSinkId,

client/packages/rtc-web/src/views/video/video-room.vue

@@ -74,7 +74,11 @@ const deviceChange = (device: MediaDeviceInfo) => {
       <video
         id="video-call"
         ref="video"
-        class="flex-1"
+        style="
+          height: calc(100% - 80px);
+          width: 100%;
+          background-color: #1f1f1f;
+        "
         playsinline
         controls
         autoplay

client/packages/rtc-web/src/views/video/video.vue

@@ -1,21 +1,19 @@
 <script lang="ts" setup>
 import { useRoomConnect, useCreateRoom } from '@/hooks/useRoom';
-import { useRouter } from 'vue-router';
 import { BackPreviousLevel, BackTitle } from '@/components/back';
 import VideoRoom from './video-room.vue';
 import { useNow, useDateFormat } from '@vueuse/core';
+import { resetUrl } from '@/utils';
 
 defineOptions({
   name: 'VideoView',
 });
 
-const router = useRouter();
-
 const { roomId } = useCreateRoom();
 
 useRoomConnect();
 
-const handleBackLevel = () => router.replace('/');
+const handleBackLevel = () => resetUrl();
 
 const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
 </script>