提交

src/components/Consultation/components/meetingView.vue

@@ -172,6 +172,10 @@
                 <el-icon v-if="!isRecording"><Camera/></el-icon>
                 <el-icon v-else style="color: red"><Videopause/></el-icon>
             </el-button>
+            <el-button circle @click="toggleFullscreen" class="control-btn">
+                <el-icon v-if="!isFullscreen"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M384 192H192a64 64 0 00-64 64v192a32 32 0 1064 0V288h192a32 32 0 000-64zm384 64H576a32 32 0 100 64h192v160a32 32 0 1064 0V256a64 64 0 00-64-64zM352 768H192V608a32 32 0 10-64 0v192a64 64 0 0064 64h160a32 32 0 100-64zm544-160a32 32 0 00-32 32v128H704a32 32 0 100 64h160a64 64 0 0064-64V640a32 32 0 00-32-32z"/></svg></el-icon>
+                <el-icon v-else><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M352 288a32 32 0 010-64h160a32 32 0 0132 32v160a32 32 0 11-64 0V320H352zm320 448a32 32 0 010 64H512a32 32 0 01-32-32V608a32 32 0 1164 0v128h128zM256 672a32 32 0 00-32-32H96a32 32 0 00-32 32v128a32 32 0 1064 0v-96h64a32 32 0 0032-32zm640-384a32 32 0 00-32 32v96h-64a32 32 0 100 64h128a32 32 0 0032-32V288a32 32 0 00-32-32z"/></svg></el-icon>
+            </el-button>
           </div>
       </div>
 
@@ -729,6 +733,22 @@ const setAudio = (stream) => {
       };
     });
   };
+  const isFullscreen = ref(false);
+  const onFullscreenChange = () => {
+    isFullscreen.value = !!document.fullscreenElement;
+  };
+  const toggleFullscreen = () => {
+    const el = mainContentRef.value;
+    if (!document.fullscreenElement) {
+      if (el && el.requestFullscreen) {
+        el.requestFullscreen();
+      }
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      }
+    }
+  };
 
   // 设备列表变化时
   const onDeviceListChange = (mediaDeviceInfo) => {
@@ -771,6 +791,7 @@ onMounted(()=>{
 
     // 初始化录屏媒体对象
     addVideoOnLoadedMetadataEvnt(); 
+    document.addEventListener('fullscreenchange', onFullscreenChange);
 });
 
 
@@ -778,6 +799,7 @@ onUnmounted(() => {
   emitter.off('onMediaStream');
   emitter.off('onHangup');
   removeBroadcastVideoListener();
+  document.removeEventListener('fullscreenchange', onFullscreenChange);
 });
 
 </script>