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) {
// 检测输入的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) {

109
src/views/host_new.vue
View File

@ -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;

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

@ -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

137
src/views/meeting.vue
View File

@ -89,9 +89,17 @@
</div>
</template>
<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 axios from "axios";
import { signMeeting, generateSignature } from "@/api/meeting";
import questions from "@/components/questions";
import messageList from "@/components/messageList";
@ -253,6 +261,7 @@ const startMeeting = async (signature) => {
userEmail: meetingConfig.userEmail,
tk: meetingConfig.registrantToken,
});
document.querySelector("#suspension-view-tab-thumbnail-gallery").click();
initDesktopLayout();
isMeetingLoading.value = false;
} catch (error) {
@ -267,33 +276,27 @@ 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 {
@ -301,24 +304,79 @@ 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";
}
});
}
});
// 当观众被设为嘉宾时，摄图会自动改为 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设置布局
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`;
@ -350,18 +408,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 = "";
}
});
@ -578,6 +631,10 @@ const showQuestionnaireDialog = ref(false);
// 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;