update

src/components/RTC/Trtccom.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="trtccom" v-if="show">
-    <Device @switchDevice="switchDevice" v-if="show" />
+    <Device @switchDevice="switchDevice" @canUseDevice="canUseDevice"  />
     <div class="local" id="local" v-if="isJoined">
       <div class="tag">
         <div :class="audioMuted ? 'muteAudio' : 'unmuteAudio'" @click="muteAudio"></div>
@@ -60,6 +60,7 @@ async function createLocalStream() {
 }
 
 async function handleJoin() {
+  console.log(!store.commit("rtc/getInitParamsStates"),'getInitParamsStates');
   if (!store.commit("rtc/getInitParamsStates")) {
     return;
   }
@@ -275,11 +276,10 @@ let switchDevice = async ({ videoId, audioId }) => {
   }
 };
 
-watch(show, () => {
-  if (show.value) {
+let canUseDevice = ()=>{
     handleJoin();
-  }
-});
+}
+
 </script>
 
 <style lang="scss" scoped>
@@ -291,6 +291,7 @@ watch(show, () => {
     z-index: 9999;
     left: 10px;
     top: 10px;
+    background: #000;
     .muteAudio {
       background: url(~@/assets/images/icon/mic-mute.svg) center center no-repeat;
     }

src/components/RTC/trtc/Device.vue

@@ -13,7 +13,7 @@ const store = useStore();
 const videoDeviceId = computed(() => store.getters["rtc/videoDeviceId"]);
 const audioDeviceId = computed(() => store.getters["rtc/audioDeviceId"]);
 
-const emit = defineEmits(["switchDevice"]);
+const emit = defineEmits(["switchDevice","canUseDevice"]);
 
 const updateDevice = async () => {
   console.log("updateDevice");
@@ -47,6 +47,7 @@ navigator.mediaDevices
       track.stop();
     });
     updateDevice();
+    emit("canUseDevice", true);
   })
   .catch((error) => {
     console.log(error,'error');