cxc/meeting-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

bugfix

Browse Source
This commit is contained in:
cxc
2022-05-29 13:30:19 +08:00
parent 2eb9e43df2
commit 4f5f2475d7
4 changed files with 183 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/router/index.js
View File

@ -93,10 +93,15 @@ router.beforeEach(async (to) => {
if (store.state.joinUser.icCard) { if (store.state.joinUser.icCard) {
// 检测输入的IC卡号是否在白名单范围内，是则放行，否则返回原地址 // 检测输入的IC卡号是否在白名单范围内，是则放行，否则返回原地址
try { try {
const { meetingPassword } = await whitelistJoinMeeting({ const { meetingPassword, email } = await whitelistJoinMeeting({
meetingId: to.params.meetingId, meetingId: to.params.meetingId,
icCard: store.state.joinUser.icCard, icCard: store.state.joinUser.icCard,
}); });
store.commit("setJoinUser", {
...store.state.joinUser,
email: email.email,
token: email.token,
});
store.commit("setPassword", meetingPassword); store.commit("setPassword", meetingPassword);
return true; return true;
} catch (error) { } catch (error) {
@ -123,9 +128,14 @@ router.beforeEach(async (to) => {
}); });
store.commit("setPassword", meetingPassword); store.commit("setPassword", meetingPassword);
} else { } else {
const { meetingPassword } = await visitorJoinUser( const { meetingPassword, email } = await visitorJoinUser(
store.state.joinUser store.state.joinUser
); );
store.commit("setJoinUser", {
...store.state.joinUser,
email: email.email,
token: email.token,
});
store.commit("setPassword", meetingPassword); store.commit("setPassword", meetingPassword);
} }
return true; return true;
@ -133,10 +143,8 @@ router.beforeEach(async (to) => {
} }
} }
if (to.name === "Panelist") { if (to.name === "Panelist") {
console.log("Panelist");
// 如果要去的页面会议号于 vuex中的不一样，则清除数据 // 如果要去的页面会议号于 vuex中的不一样，则清除数据
if (to.params.meetingId !== store.state.joinUser.meetingId) { if (to.params.meetingId !== store.state.joinUser.meetingId) {
console.log('dis');
store.commit("setJoinUser", {}); store.commit("setJoinUser", {});
} }
if (store.state.joinUser.icCard) { if (store.state.joinUser.icCard) {

109
src/views/host_new.vue
View File

@ -233,7 +233,21 @@ const startMeeting = async (signature) => {
userEmail: meetingConfig.userEmail, userEmail: meetingConfig.userEmail,
tk: meetingConfig.registrantToken, tk: meetingConfig.registrantToken,
}); });
document.querySelector("#suspension-view-tab-thumbnail-gallery").click();
initDesktopLayout(); 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; isMeetingLoading.value = false;
} catch (error) { } catch (error) {
isMeetingLoading.value = false; isMeetingLoading.value = false;
@ -248,32 +262,28 @@ onMounted(() => {
// 初始化 // 初始化
const initDesktopLayout = () => { const initDesktopLayout = () => {
// 切换到 gallery view // 切换到 gallery view
document.querySelector("#suspension-view-tab-thumbnail-gallery").click();
// 初始化高度 // 初始化高度
const heightEl =
document.querySelector( const heightEl = document.querySelectorAll(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170" ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
) || )[2];
document.querySelector(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176.zmwebsdk-makeStyles-root-252"
);
heightEl.style.height = `${meetingHeight.value - 45}px`; heightEl.style.height = `${meetingHeight.value - 45}px`;
console.log(meetingHeight.value); console.log(meetingHeight.value);
// 初始化宽度 // 初始化宽度
// zmwebsdk-MuiPaper-root zmwebsdk-makeStyles-root-21 zmwebsdk-MuiPaper-elevation1 zmwebsdk-MuiPaper-rounded // zmwebsdk-MuiPaper-root zmwebsdk-makeStyles-root-21 zmwebsdk-MuiPaper-elevation1 zmwebsdk-MuiPaper-rounded
document.querySelector( document.querySelectorAll(
".zmwebsdk-MuiPaper-root.zmwebsdk-makeStyles-root-21.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded" ".zmwebsdk-MuiPaper-root.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded"
).style.width = `${meetingWidth.value - 4}px`; )[1].style.width = `${meetingWidth.value - 4}px`;
console.log(`${meetingWidth.value - 4}px`);
// 加载完成显示 video element // 加载完成显示 video element
document.querySelector("#video-element").style.visibility = "visible"; document.querySelector("#video-element").style.visibility = "visible";
}; };
// 检测屏幕共享开启状态变化 // 检测屏幕共享开启状态变化
const inSharing = ref(false); // 是否开启屏幕共享 const inSharing = ref(false); // 是否开启屏幕共享
setInterval(() => { setInterval(() => {
const elSharing = document.querySelector(".zmwebsdk-makeStyles-inSharing-46"); const elSharing = document.querySelector(
// console.log(elSharing); "div[class*=zmwebsdk-makeStyles-inSharing]"
);
if (elSharing) { if (elSharing) {
inSharing.value = true; inSharing.value = true;
} else { } else {
@ -281,24 +291,52 @@ setInterval(() => {
} }
}, 500); }, 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设置布局 // 根据id设置布局
const setLayout = (templateId) => { const setLayout = (templateId) => {
console.log(templateId); console.log(templateId);
const v_s_wrap_el = const v_s_wrap_el = document.querySelectorAll(
document.querySelector( ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166" )[2]; // 包含视频和课件的容器
) ||
document.querySelector(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176"
); // 包含视频和课件的容器
v_s_wrap_el.style.flexDirection = ""; v_s_wrap_el.style.flexDirection = "";
const v_wrap_el = const v_wrap_el = v_s_wrap_el.lastChild;
document.querySelector(".zmwebsdk-makeStyles-wrap-167") ||
document.querySelector(".zmwebsdk-makeStyles-wrap-177");
if (!inSharing.value) return; 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") { if (templateId === "1") {
// 课件|视频 对半分 // 课件|视频 对半分
v_wrap_el.style.width = `${meetingWidth.value / 2 - 2}px`; v_wrap_el.style.width = `${meetingWidth.value / 2 - 2}px`;
@ -330,18 +368,13 @@ watch(inSharing, (newVal) => {
const galleryViewButton = document.querySelector( const galleryViewButton = document.querySelector(
"#suspension-view-tab-thumbnail-gallery" "#suspension-view-tab-thumbnail-gallery"
); );
galleryViewButton.click(); if (galleryViewButton) galleryViewButton.click();
const v_wrap_el = const v_s_wrap_el = document.querySelectorAll(
document.querySelector(".zmwebsdk-makeStyles-wrap-167") || ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
document.querySelector(".zmwebsdk-makeStyles-wrap-177"); )[2];
if (!v_s_wrap_el) return;
const v_wrap_el = v_s_wrap_el.lastChild;
v_wrap_el.style.width = ""; 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 = ""; v_s_wrap_el.style.flexDirection = "";
} }
}); });
@ -547,6 +580,10 @@ onUnmounted(() => {
// background-color: transparent; // background-color: transparent;
padding: 0; padding: 0;
} }
:deep(.zmwebsdk-MuiPaper-root.zmwebsdk-makeStyles-root-50.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded) {
width: 20%;
background: #ccc;
}
.fullscreen-btn { .fullscreen-btn {
position: absolute; position: absolute;
right: 0; right: 0;

2
src/views/host.vue → src/views/host_old.vue
View File

@ -171,7 +171,7 @@ const meetingConfig = reactive({
passWord: store.state.password, passWord: store.state.password,
role: route.name === "Host" ? 1 : 0, role: route.name === "Host" ? 1 : 0,
// signatureEndpoint: "http://120.26.107.74:4000", // signatureEndpoint: "http://120.26.107.74:4000",
userEmail: "webinartest@126.com", // userEmail:store.getters,
userName: joinName.value, userName: joinName.value,
// pass in the registrant's token if your meeting or webinar requires registration. More info here: // 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 // Meetings: https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/meetings#join-registered

137
src/views/meeting.vue
View File

@ -89,9 +89,17 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { computed, reactive, watch, ref, onMounted, onUnmounted } from "vue"; import {
computed,
reactive,
watch,
ref,
onMounted,
onUnmounted,
nextTick,
} from "vue";
import { useStore } from "vuex"; import { useStore } from "vuex";
import axios from "axios";
import { signMeeting, generateSignature } from "@/api/meeting"; import { signMeeting, generateSignature } from "@/api/meeting";
import questions from "@/components/questions"; import questions from "@/components/questions";
import messageList from "@/components/messageList"; import messageList from "@/components/messageList";
@ -253,6 +261,7 @@ const startMeeting = async (signature) => {
userEmail: meetingConfig.userEmail, userEmail: meetingConfig.userEmail,
tk: meetingConfig.registrantToken, tk: meetingConfig.registrantToken,
}); });
document.querySelector("#suspension-view-tab-thumbnail-gallery").click();
initDesktopLayout(); initDesktopLayout();
isMeetingLoading.value = false; isMeetingLoading.value = false;
} catch (error) { } catch (error) {
@ -267,33 +276,27 @@ onMounted(() => {
}); });
// 初始化 // 初始化
const initDesktopLayout = () => { const initDesktopLayout = () => {
// 切换到 gallery view
document.querySelector("#suspension-view-tab-thumbnail-gallery").click();
// 初始化高度 // 初始化高度
const heightEl =
document.querySelector( const heightEl = document.querySelectorAll(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170" ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
) || )[2];
document.querySelector(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176.zmwebsdk-makeStyles-root-252"
);
heightEl.style.height = `${meetingHeight.value - 45}px`; heightEl.style.height = `${meetingHeight.value - 45}px`;
console.log(meetingHeight.value); console.log(meetingHeight.value);
// 初始化宽度 // 初始化宽度
// zmwebsdk-MuiPaper-root zmwebsdk-makeStyles-root-21 zmwebsdk-MuiPaper-elevation1 zmwebsdk-MuiPaper-rounded document.querySelectorAll(
document.querySelector( ".zmwebsdk-MuiPaper-root.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded"
".zmwebsdk-MuiPaper-root.zmwebsdk-makeStyles-root-21.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded" )[1].style.width = `${meetingWidth.value - 4}px`;
).style.width = `${meetingWidth.value - 4}px`;
console.log(`${meetingWidth.value - 4}px`);
// 加载完成显示 video element // 加载完成显示 video element
document.querySelector("#video-element").style.visibility = "visible"; document.querySelector("#video-element").style.visibility = "visible";
}; };
// 检测屏幕共享开启状态变化 // 检测屏幕共享开启状态变化
const inSharing = ref(false); // 是否开启屏幕共享 const inSharing = ref(false); // 是否开启屏幕共享
setInterval(() => { setInterval(() => {
const elSharing = document.querySelector(".zmwebsdk-makeStyles-inSharing-46"); const elSharing = document.querySelector(
// console.log(elSharing); "div[class*=zmwebsdk-makeStyles-inSharing]"
);
if (elSharing) { if (elSharing) {
inSharing.value = true; inSharing.value = true;
} else { } else {
@ -301,24 +304,79 @@ setInterval(() => {
} }
}, 500); }, 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";
}
});
}
});
// 当观众被设为嘉宾时，摄图会自动改为 ribbon,通过setInterval 监听变化，将其重新设为gallery view
const isRibbon = ref(null);
setInterval(() => {
isRibbon.value = document.querySelector(
"#suspension-view-tab-thumbnail-ribbon.zmwebsdk-MuiTab-selected"
);
}, 500);
watch(isRibbon, (val) => {
if (val) {
const galleryViewButton = document.querySelector(
"#suspension-view-tab-thumbnail-gallery"
);
if (galleryViewButton) galleryViewButton.click();
initDesktopLayout();
}
});
// 当被设为嘉宾时自动点击同意按钮
setInterval(() => {
const isSetAsGuest = document.querySelector(
".zmwebsdk-MuiButtonBase-root.zmwebsdk-MuiButton-root.zmwebsdk-MuiButton-contained.zmwebsdk-MuiButton-containedPrimary.zmwebsdk-MuiButton-containedSizeSmall.zmwebsdk-MuiButton-sizeSmall.zmwebsdk-MuiButton-disableElevation"
);
if (isSetAsGuest) {
isSetAsGuest.click();
}
}, 500);
// 根据id设置布局 // 根据id设置布局
const setLayout = (templateId) => { const setLayout = (templateId) => {
console.log(templateId); console.log(templateId);
const v_s_wrap_el = const v_s_wrap_el = document.querySelectorAll(
document.querySelector( ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166" )[2]; // 包含视频和课件的容器
) ||
document.querySelector(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176"
); // 包含视频和课件的容器
v_s_wrap_el.style.flexDirection = ""; v_s_wrap_el.style.flexDirection = "";
const v_wrap_el = const v_wrap_el = v_s_wrap_el.lastChild;
document.querySelector(".zmwebsdk-makeStyles-wrap-167") ||
document.querySelector(".zmwebsdk-makeStyles-wrap-177");
if (!inSharing.value) return; 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") { if (templateId === "1") {
// 课件|视频 对半分 // 课件|视频 对半分
v_wrap_el.style.width = `${meetingWidth.value / 2 - 2}px`; v_wrap_el.style.width = `${meetingWidth.value / 2 - 2}px`;
@ -350,18 +408,13 @@ watch(inSharing, (newVal) => {
const galleryViewButton = document.querySelector( const galleryViewButton = document.querySelector(
"#suspension-view-tab-thumbnail-gallery" "#suspension-view-tab-thumbnail-gallery"
); );
galleryViewButton.click(); if (galleryViewButton) galleryViewButton.click();
const v_wrap_el = const v_s_wrap_el = document.querySelectorAll(
document.querySelector(".zmwebsdk-makeStyles-wrap-167") || ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
document.querySelector(".zmwebsdk-makeStyles-wrap-177"); )[2];
if (!v_s_wrap_el) return;
const v_wrap_el = v_s_wrap_el.lastChild;
v_wrap_el.style.width = ""; 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 = ""; v_s_wrap_el.style.flexDirection = "";
} }
}); });
@ -578,6 +631,10 @@ const showQuestionnaireDialog = ref(false);
// background-color: transparent; // background-color: transparent;
padding: 0; padding: 0;
} }
:deep(.zmwebsdk-MuiPaper-root.zmwebsdk-makeStyles-root-50.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded) {
width: 20%;
background: #ccc;
}
.fullscreen-btn { .fullscreen-btn {
position: absolute; position: absolute;
right: 0; right: 0;