修复全屏时视频框尺寸问题、会议结束时主持人结束会议

src/components/mediaCheck.vue

@@ -90,7 +90,9 @@ onMounted(() => {
       isVideoAvailable.value = false;
     }
     try {
-      audioStream.value = navigator.mediaDevices.getUserMedia({ audio: true });
+      audioStream.value = await navigator.mediaDevices.getUserMedia({
+        audio: true,
+      });
       isAudioAvailable.value = true;
     } catch (error) {
       console.log(error);

src/router/index.js

@@ -79,6 +79,7 @@ router.beforeEach(async (to) => {
     // 如果要去的页面会议号于 vuex中的不一样，则清除数据
     if (to.params.meetingId !== store.state.joinUser.meetingId) {
       store.commit("setJoinUser", {});
+      store.commit("setMessagesList", []);
     }
     // 如果参会方式发生更改，则清除数据
     if (
@@ -147,6 +148,7 @@ router.beforeEach(async (to) => {
     // 如果要去的页面会议号于 vuex中的不一样，则清除数据
     if (to.params.meetingId !== store.state.joinUser.meetingId) {
       store.commit("setJoinUser", {});
+      store.commit("setMessagesList", []);
     }
     if (store.state.joinUser.icCard) {
       try {

src/store/index.js

@@ -8,6 +8,9 @@ const store = createStore({
       : {},
     meeting: {},
     meetingSetting: {},
+    messagesList: localStorage.getItem("MESSAGES")
+      ? JSON.parse(localStorage.getItem("MESSAGES"))
+      : [],
     password: "", //参会密码
     joinType: localStorage.getItem("JOINTYPE")
       ? JSON.parse(localStorage.getItem("JOINTYPE"))
@@ -36,6 +39,10 @@ const store = createStore({
     setMeetingSetting(state, data) {
       state.meetingSetting = data;
     },
+    setMessagesList(state, data) {
+      state.messagesList = data;
+      localStorage.setItem("MESSAGES", JSON.stringify(data));
+    },
   },
   actions: {
     // 请求会议信息

src/views/meeting.vue

@@ -9,6 +9,7 @@
           :class="{
             fullscreen: isFullScreen && !isVerticalFullScreen,
             verticalFullScreen: isVerticalFullScreen,
+            notInSharing: !inSharing,
           }"
         >
           <div
@@ -69,6 +70,7 @@
       :close-on-click-modal="false"
       title="签到"
       width="30%"
+      :fullscreen="screenWidth < 900"
     >
       <span>是否确认签到</span>
       <template #footer>
@@ -559,6 +561,7 @@ const initWebSocket = () => {
         id: uniqueId(),
         time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
       });
+      store.commit("setMessagesList", messages.value);
     }
     // 开始签到时
     else if (data.type === "isStartSign" && route.name === "Meeting") {
@@ -582,6 +585,7 @@ const initWebSocket = () => {
       showQuestionnaireDialog.value = false;
       ElMessageBox.alert("会议已结束");
       socket.close();
+      if (route.name === "Meeting") {
         if (store.getters.bankId && !store.state.joinUser.examSubmited) {
           if (examQuestionsList.value.length === 0) {
             examQuestionsList.value = await loadQuestionsList("1");
@@ -597,6 +601,9 @@ const initWebSocket = () => {
           }
           submitQuestion("2");
         }
+      } else if (route.name === "Host") {
+        meetingConfig.client.endMeeting();
+      }
     }
   });
   socket.addEventListener("close", (event) => {
@@ -610,6 +617,7 @@ initWebSocket();
 
 // 消息列表
 const messages = ref([]);
+messages.value = store.state.messagesList.map((msg) => msg);
 const sendMessage = (msgObj) => {
   console.log(JSON.stringify(JSON.stringify(msgObj)));
   socket.send(
@@ -621,6 +629,7 @@ const sendMessage = (msgObj) => {
     )
   );
   messages.value.push(msgObj);
+  store.commit("setMessagesList", messages.value);
 };
 
 const examQuestionsList = ref([]);
@@ -634,7 +643,9 @@ const getStageQuestionnaireAnswer = (val) => {
 
 const isFullScreen = ref(false);
 onMounted(() => {
-  meetingContainerRef.value.style.background = ` url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`;
+  meetingContainerRef.value.style.background = ` url(${
+    store.getters.templateBackgroundPic || store.getters.defaultBackground
+  }) 0% 0% / cover no-repeat`;
   meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.96;
   meetingHeight.value = (meetingWidth.value * 9) / 16;
 
@@ -806,8 +817,8 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
       > div[class*="inSharing"]
       + div) {
-    width: $meetingComponentWitdh * 0.2;
-    height: $meetingComponentWitdh * 0.2 * 9 / 16;
+    width: $meetingComponentWitdh * 0.15;
+    height: $meetingComponentWitdh * 0.15 * 9 / 16;
     position: relative;
   }
 }
@@ -816,8 +827,8 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
       > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
       > div[class*="inSharing"]
       + div) {
-    width: $meetingComponentWitdh * 0.2;
-    height: $meetingComponentWitdh * 0.2 * 9 / 16;
+    width: $meetingComponentWitdh * 0.15;
+    height: $meetingComponentWitdh * 0.15 * 9 / 16;
     position: relative;
   }
   :deep(#suspension-view-tabpanel-ribbon
@@ -879,8 +890,8 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
               > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
               > div[class*="inSharing"]
               + div) {
-            width: $meetingComponentWitdh * 0.2;
-            height: $meetingComponentWitdh * 0.2 * 9 / 14.5;
+            width: $meetingComponentWitdh * 0.15;
+            height: $meetingComponentWitdh * 0.15 * 9 / 14.5;
             position: relative;
             align-self: initial;
           }
@@ -915,7 +926,12 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
   #meeting-chat-row {
     .fullscreen-wrap {
       width: 80vw;
-
+      :deep(.notInSharing.fullscreen
+          div[id*="suspension-view-tabpanel"]
+          > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+          > div) {
+        width: 96vw;
+      }
       #meeting-container.fullscreen {
         $meetingComponentWitdh: 96vw;
         padding-top: calc(100vw * 0.08);
@@ -951,8 +967,8 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
               > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
               > div[class*="inSharing"]
               + div) {
-            width: $meetingComponentWitdh * 0.2;
-            height: $meetingComponentWitdh * 0.2 * 9 / 16;
+            width: $meetingComponentWitdh * 0.15;
+            height: $meetingComponentWitdh * 0.15 * 9 / 16;
           }
         }
         .layout-template-4 {
@@ -960,8 +976,8 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
               > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
               > div[class*="inSharing"]
               + div) {
-            width: $meetingComponentWitdh * 0.2;
-            height: $meetingComponentWitdh * 0.2 * 9 / 16;
+            width: $meetingComponentWitdh * 0.15;
+            height: $meetingComponentWitdh * 0.15 * 9 / 16;
           }
         }
 
@@ -982,7 +998,12 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
         //   height: calc(100vw * 0.9 * 9 / 16);
         // }
       }
-
+      :deep(.notInSharing.verticalFullScreen
+          div[id*="suspension-view-tabpanel"]
+          > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
+          > div) {
+        width: 96vh;
+      }
       #meeting-container.verticalFullScreen {
         $meetingComponentWitdh: 96vh;
         $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
@@ -994,14 +1015,15 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
         left: 100vw;
         width: 100vh !important;
         height: 100vw;
+
         #video-element {
           width: $meetingComponentWitdh;
           :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;
+            width: $meetingComponentWitdh * 0.15;
+            height: $meetingComponentWitdh * 0.15 * 9 / 14.5;
           }
           :deep(div[id*="suspension-view-tabpanel"]
               > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root