diff --git a/src/router/index.js b/src/router/index.js index 16c18a9..96f32d9 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -93,10 +93,15 @@ router.beforeEach(async (to) => { if (store.state.joinUser.icCard) { // 检测输入的IC卡号是否在白名单范围内，是则放行，否则返回原地址 try { - const { meetingPassword } = await whitelistJoinMeeting({ + const { meetingPassword, email } = await whitelistJoinMeeting({ meetingId: to.params.meetingId, icCard: store.state.joinUser.icCard, }); + store.commit("setJoinUser", { + ...store.state.joinUser, + email: email.email, + token: email.token, + }); store.commit("setPassword", meetingPassword); return true; } catch (error) { @@ -123,9 +128,14 @@ router.beforeEach(async (to) => { }); store.commit("setPassword", meetingPassword); } else { - const { meetingPassword } = await visitorJoinUser( + const { meetingPassword, email } = await visitorJoinUser( store.state.joinUser ); + store.commit("setJoinUser", { + ...store.state.joinUser, + email: email.email, + token: email.token, + }); store.commit("setPassword", meetingPassword); } return true; @@ -133,10 +143,8 @@ router.beforeEach(async (to) => { } } if (to.name === "Panelist") { - console.log("Panelist"); // 如果要去的页面会议号于 vuex中的不一样，则清除数据 if (to.params.meetingId !== store.state.joinUser.meetingId) { - console.log('dis'); store.commit("setJoinUser", {}); } if (store.state.joinUser.icCard) { diff --git a/src/views/host_new.vue b/src/views/host_new.vue index de1e8f5..0a7f642 100644 --- a/src/views/host_new.vue +++ b/src/views/host_new.vue @@ -233,7 +233,21 @@ const startMeeting = async (signature) => { userEmail: meetingConfig.userEmail, tk: meetingConfig.registrantToken, }); + document.querySelector("#suspension-view-tab-thumbnail-gallery").click(); + initDesktopLayout(); + const safeButton = document.querySelector('button[title="安全"]'); + if (safeButton) { + safeButton.click(); + const allowScreenShare = document.querySelectorAll( + ".zmwebsdk-MuiButtonBase-root.zmwebsdk-MuiListItem-root.zmwebsdk-MuiMenuItem-root.zmwebsdk-MuiMenuItem-gutters.zmwebsdk-MuiListItem-gutters.zmwebsdk-MuiListItem-button" + )[1]; + if (allowScreenShare.childElementCount === 0) { + allowScreenShare.click(); + } + console.log(allowScreenShare); + } + isMeetingLoading.value = false; } catch (error) { isMeetingLoading.value = false; @@ -248,32 +262,28 @@ onMounted(() => { // 初始化 const initDesktopLayout = () => { // 切换到 gallery view - document.querySelector("#suspension-view-tab-thumbnail-gallery").click(); // 初始化高度 - const heightEl = - document.querySelector( - ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170" - ) || - document.querySelector( - ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176.zmwebsdk-makeStyles-root-252" - ); + + const heightEl = document.querySelectorAll( + ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root" + )[2]; heightEl.style.height = `${meetingHeight.value - 45}px`; console.log(meetingHeight.value); // 初始化宽度 // zmwebsdk-MuiPaper-root zmwebsdk-makeStyles-root-21 zmwebsdk-MuiPaper-elevation1 zmwebsdk-MuiPaper-rounded - document.querySelector( - ".zmwebsdk-MuiPaper-root.zmwebsdk-makeStyles-root-21.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded" - ).style.width = `${meetingWidth.value - 4}px`; - console.log(`${meetingWidth.value - 4}px`); + document.querySelectorAll( + ".zmwebsdk-MuiPaper-root.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded" + )[1].style.width = `${meetingWidth.value - 4}px`; // 加载完成显示 video element document.querySelector("#video-element").style.visibility = "visible"; }; // 检测屏幕共享开启状态变化 const inSharing = ref(false); // 是否开启屏幕共享 setInterval(() => { - const elSharing = document.querySelector(".zmwebsdk-makeStyles-inSharing-46"); - // console.log(elSharing); + const elSharing = document.querySelector( + "div[class*=zmwebsdk-makeStyles-inSharing]" + ); if (elSharing) { inSharing.value = true; } else { @@ -281,24 +291,52 @@ setInterval(() => { } }, 500); +const avatarList = ref(""); +setInterval(() => { + const avatarElList = document.querySelectorAll( + 'ul[class^="zmwebsdk-makeStyles-avatarList"] li' + ); + const arr = []; + avatarElList.forEach((el) => { + arr.push({ + videoOn: el.className.includes("videoOn"), + }); + }); + avatarList.value = arr + .map((el) => { + return el.videoOn ? "on" : "off"; + }) + .join(","); + // console.log(avatarList.value); +}, 500); +watch(avatarList, (val) => { + if (inSharing.value) { + document + .querySelectorAll(`ul[class^="zmwebsdk-makeStyles-avatarList"] li`) + .forEach((el) => { + if (el.className.includes("videoOn")) { + el.style.visibility = "visible"; + } else { + el.style.visibility = "hidden"; + } + }); + } +}); + // 根据id设置布局 const setLayout = (templateId) => { console.log(templateId); - const v_s_wrap_el = - document.querySelector( - ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166" - ) || - document.querySelector( - ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176" - ); // 包含视频和课件的容器 + const v_s_wrap_el = document.querySelectorAll( + ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root" + )[2]; // 包含视频和课件的容器 v_s_wrap_el.style.flexDirection = ""; - const v_wrap_el = - document.querySelector(".zmwebsdk-makeStyles-wrap-167") || - document.querySelector(".zmwebsdk-makeStyles-wrap-177"); + const v_wrap_el = v_s_wrap_el.lastChild; if (!inSharing.value) return; - const s_wrap_el = document.querySelector(".zmwebsdk-makeStyles-inSharing-46"); + const s_wrap_el = document.querySelector( + `div[class*="zmwebsdk-makeStyles-inSharing"]` + ); if (templateId === "1") { // 课件|视频 对半分 v_wrap_el.style.width = `${meetingWidth.value / 2 - 2}px`; @@ -330,18 +368,13 @@ watch(inSharing, (newVal) => { const galleryViewButton = document.querySelector( "#suspension-view-tab-thumbnail-gallery" ); - galleryViewButton.click(); - const v_wrap_el = - document.querySelector(".zmwebsdk-makeStyles-wrap-167") || - document.querySelector(".zmwebsdk-makeStyles-wrap-177"); + if (galleryViewButton) galleryViewButton.click(); + const v_s_wrap_el = document.querySelectorAll( + ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root" + )[2]; + if (!v_s_wrap_el) return; + const v_wrap_el = v_s_wrap_el.lastChild; v_wrap_el.style.width = ""; - const v_s_wrap_el = - document.querySelector( - ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166" - ) || - document.querySelector( - ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176" - ); v_s_wrap_el.style.flexDirection = ""; } }); @@ -547,6 +580,10 @@ onUnmounted(() => { // background-color: transparent; padding: 0; } +:deep(.zmwebsdk-MuiPaper-root.zmwebsdk-makeStyles-root-50.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded) { + width: 20%; + background: #ccc; +} .fullscreen-btn { position: absolute; right: 0; diff --git a/src/views/host.vue b/src/views/host_old.vue similarity index 99% rename from src/views/host.vue rename to src/views/host_old.vue index a1fb7fc..39b47dd 100644 --- a/src/views/host.vue +++ b/src/views/host_old.vue @@ -171,7 +171,7 @@ const meetingConfig = reactive({ passWord: store.state.password, role: route.name === "Host" ? 1 : 0, // signatureEndpoint: "http://120.26.107.74:4000", - userEmail: "webinartest@126.com", + // userEmail:store.getters, userName: joinName.value, // pass in the registrant's token if your meeting or webinar requires registration. More info here: // Meetings: https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/meetings#join-registered diff --git a/src/views/meeting.vue b/src/views/meeting.vue index 03baab8..c3aa3e0 100644 --- a/src/views/meeting.vue +++ b/src/views/meeting.vue @@ -89,9 +89,17 @@