上边距

src/views/meeting.vue

@@ -203,7 +203,8 @@ const route = useRoute();
 const meetingNote = computed(() => store.getters.meetingNote); // 会议介绍
 const meetingSchedule = computed(() => store.getters.meetingSchedule); // 会议日程
 const expertInfo = computed(() => store.getters.expertInfo); // 专家信息
-const screenWidth = window.screen.width;
+const screenWidth = ref(0);
+screenWidth.value = window.screen.width;
 const joinName = ref(""); // 显示昵称
 const joinAccount = ref(""); // 用于连接 websocket，提交考试
 joinAccount.value =
@@ -332,6 +333,7 @@ const checkMediaWrapRef = ref(null);
 const showCheckMediaVideo = ref(true);
 const isVideoAvailable = ref(undefined);
 const isAudioAvailable = ref(undefined);
+// TODO:可能有摄像头占用问题。
 onMounted(() => {
   nextTick(() => {
     const videoWidth = checkMediaWrapRef.value.offsetWidth;
@@ -433,6 +435,7 @@ const switchToVideoOn = () => {
 const inSharing = ref(false); // 共享屏幕是否开启
 const attendeeslist = ref("");
 setInterval(() => {
+  screenWidth.value = window.screen.width;
   // 共享屏幕状态变化
   const screenShareEl = document.querySelector(
     `div[class*="zmwebsdk-makeStyles-inSharing"]`
@@ -464,16 +467,17 @@ setInterval(() => {
     isSetAsGuest.click();
   }
   // -------
-  // attendeeslist.value.splice(0, attendeeslist.value.length);
+  // 检测参会嘉宾及其摄像头开关状态
   attendeeslist.value = meetingConfig.client
     .getAttendeeslist()
     .map((el) => JSON.stringify({ userId: el.userId, bVideoOn: el.bVideoOn }))
     .join("$");
-
+  // -------
   // 检测共享屏幕canvas距离父元素顶部距离
   const shareScreenCanvasEl = document.querySelector(
     'div[id*="suspension-view-tabpanel"]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root>div[class*="inSharing"]>div:first-child'
   );
+  // console.log(shareScreenCanvasEl);
   if (shareScreenCanvasEl) {
     if (templateId.value == 3 || templateId.value == 4 || screen.width < 900) {
       document.querySelector(
@@ -498,6 +502,15 @@ watch(inSharing, (val) => {
       "#suspension-view-tab-thumbnail-gallery"
     );
     if (galleryViewButton) galleryViewButton.click();
+
+    /* 在手机上，关闭共享屏幕时，未能把去掉摄像头的top样式 (?), 需要在此处再次清除top样式 */
+    document
+      .querySelectorAll(
+        `div[id*="suspension-view-tabpanel"] > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root>div:last-child`
+      )
+      .forEach((el) => {
+        el.style.top = "";
+      });
   }
 });
 
@@ -522,7 +535,12 @@ const setFullScreen = async () => {
   //   }, 1500);
   //   return;
   // }
+  try {
     document.querySelector(".fullscreen-wrap").requestFullscreen();
+  } catch (error) {
+    console.log(error);
+    document.querySelector(".fullscreen-wrap").webkitRequestFullscreen();
+  }
 
   isFullScreen.value = true;
   nextTick(() => {
@@ -548,6 +566,7 @@ const setFullScreen = async () => {
     videoElementRef.value.style.height = `${
       screen.height - screen.width * 0.08
     }px`;
+    console.log(`${screen.height - screen.width * 0.08}px`);
     document
       .querySelectorAll(
         "div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
@@ -733,8 +752,7 @@ onMounted(() => {
 
   videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
 
-  // 当全屏状态改变时
+  const handleFullscreenChange = () => {
-  fullscreenWrapRef.value.addEventListener("fullscreenchange", () => {
     if (document.fullscreenElement) {
       isFullScreen.value = true;
     } else {
@@ -756,7 +774,16 @@ onMounted(() => {
           });
       });
     }
-  });
+  };
+  // 当全屏状态改变时
+  fullscreenWrapRef.value.addEventListener(
+    "fullscreenchange",
+    handleFullscreenChange
+  );
+  fullscreenWrapRef.value.addEventListener(
+    "onwebkitfullscreenchange",
+    handleFullscreenChange
+  );
   setTextLabel();
   startMeeting();
 });
@@ -765,12 +792,31 @@ window.addEventListener("resize", (e) => {
   console.log(e);
   meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
   meetingHeight.value = (meetingWidth.value * 9) / 16;
+  if (!document.fullscreenElement) {
     videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
+  }
 });
 window.addEventListener("orientationchange", function () {
-  console.log(
+  if (window.orientation === 90) {
-    "the orientation of the device is now " + screen.orientation.angle
+    if (isFullScreen.value === true) {
-  );
+      isVerticalFullScreen.value = false;
+      videoElementRef.value.style.height = ``;
+      nextTick(() => {
+        document
+          .querySelectorAll(
+            "div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
+          )
+          .forEach((el) => {
+            el.style.height = ``;
+          });
+        setFullScreen();
+      });
+    }
+  } else if (window.orientation === 0) {
+    if (isFullScreen.value === true) {
+      setFullScreen();
+    }
+  }
 });
 window.getCurrentUser = meetingConfig.client.getCurrentUser;
 window.getAttendeeslist = meetingConfig.client.getAttendeeslist;
@@ -799,6 +845,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
     display: flex;
     justify-content: space-between;
     #meeting-container {
+      box-sizing: border-box;
       padding-top: calc(80vw * 0.08);
       display: flex;
       justify-content: center;
@@ -806,6 +853,12 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
       position: relative;
       #video-element {
         width: 72vw;
+        :deep(div[id*="suspension-view-tabpanel"]
+            > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+            > div[class*="inSharing"]
+            > div) {
+          padding-top: 6px;
+        }
       }
       .el-button {
         position: absolute;
@@ -930,6 +983,10 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
       height: 24vw;
       background-color: #000;
       position: relative;
+      // #check-media-video {
+      //   width: 100%;
+      //   height: 100%;
+      // }
       svg {
         position: absolute;
         left: 1vw;
@@ -951,15 +1008,36 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
 }
 // 适配移动端 屏幕宽度小于 900px
 @media screen and (max-width: 900px) {
-  // $meetingComponentWitdh: 100vw * 0.9;
+  $meetingComponentWitdh: 90vw;
   // $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
 
   #app-container {
     #meeting-chat-row {
       #meeting-container {
+        padding-top: calc(100vw * 0.08);
         width: 100vw;
         #video-element {
           width: 90vw;
+          :deep(div[id*="suspension-view-tabpanel"]
+              > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+              > div[class*="inSharing"]
+              + div) {
+            width: $meetingComponentWitdh * 0.2;
+            height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
+            position: relative;
+            align-self: initial;
+          }
+          // width: 72vw;
+          :deep(div[id*="suspension-view-tabpanel"]
+              > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+              > div[class*="inSharing"]
+              > div) {
+            padding-top: initial;
+          }
+          :deep(div[id*="suspension-view-tabpanel"]
+              > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
+            height: calc(100vw * 0.9 * 9 / 16);
+          }
         }
         :deep(#video-element
             > div
@@ -974,52 +1052,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
     display: none !important;
   }
 
-  .layout-template-1 {
-    :deep(div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div) {
-      width: $meetingComponentWitdh * 0.2;
-      height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
-      position: relative;
-      align-self: initial;
-    }
-  }
-  .layout-template-2 {
-    :deep(div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div) {
-      width: $meetingComponentWitdh * 0.2;
-      height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
-      position: relative;
-      align-self: initial;
-    }
-  }
-  .layout-template-3 {
-    :deep(div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div) {
-      width: $meetingComponentWitdh * 0.2;
-      height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
-      position: relative;
-    }
-  }
-  .layout-template-4 {
-    :deep(div[id*="suspension-view-tabpanel"]
-        > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
-        > div[class*="inSharing"]
-        + div) {
-      width: $meetingComponentWitdh * 0.2;
-      height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
-      position: relative;
-    }
-  }
-  :deep(div[id*="suspension-view-tabpanel"]
-      > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
-    height: calc(100vw * 0.9 * 9 / 16);
-  }
   :deep(.check-media) {
     .el-dialog__body {
       #check-media-wrap {
@@ -1039,16 +1071,13 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
 #app-container {
   #meeting-chat-row {
     .fullscreen-wrap {
-      // $meetingComponentWitdh: 90vw;
-      // width: 100%;
-      // height: 100%;
       width: 80vw;
 
       #meeting-container.fullscreen {
-        $meetingComponentWitdh: 100vw * 0.9;
+        $meetingComponentWitdh: 90vw;
-        // $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
+        padding-top: calc(80vw * 0.08);
-        padding-top: 8vw;
         width: 100vw;
+        height: 100vh;
         #video-element {
           width: 90vw;
         }
@@ -1089,6 +1118,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
             height: $meetingComponentWitdh * 0.2 * 9 / 16;
           }
         }
+
         :deep(#video-element
             > div
             > .zmwebsdk-MuiPaper-root
@@ -1108,15 +1138,16 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
       }
 
       #meeting-container.verticalFullScreen {
-        $meetingComponentWitdh: 100vw * 0.9;
+        $meetingComponentWitdh: 90vh;
         $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
+        padding-top: calc(80vh * 0.08);
         position: absolute;
         transform-origin: 0% 0%;
         transform: rotate(90deg);
         top: 0;
         left: 100vw;
         width: 100vh !important;
-        height: calc(92vw);
+        height: 100vw;
         #video-element {
           width: 90vh;
           :deep(div[id*="suspension-view-tabpanel"]
@@ -1126,6 +1157,12 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
             width: $meetingComponentWitdh * 0.2;
             height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
           }
+          :deep(div[id*="suspension-view-tabpanel"]
+              > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+              > div[class*="inSharing"]
+              > div) {
+            padding-top: initial;
+          }
         }
         :deep(#video-element
             > div