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

fullscreen

Browse Source
This commit is contained in:
cxc
2022-06-01 17:34:55 +08:00
parent 275ed2133d
commit bb44994439
1 changed files with 97 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/views/meeting.vue
View File

@ -2,13 +2,17 @@
<div id="app-container" ref="appContainerRef">
<!-- zoom 会议组件 -->
<div id="meeting-chat-row">
<div id="meeting-container" ref="meetingContainerRef">
<div
id="meeting-container"
ref="meetingContainerRef"
:class="{ fullscreen: isFullScreen }"
>
<div
id="video-element"
class="layout-template-4"
:class="`layout-template-${templateId}`"
ref="videoElementRef"
></div>
<el-button :icon="FullScreen" @click="setFullScreen"></el-button>
<el-button :icon="FullScreen" circle @click="setFullScreen"></el-button>
</div>
<div id="right-chat">
<Chat
@ -79,7 +83,15 @@
</template>
<script setup>
import { computed, onMounted, onUnmounted, reactive, ref, watch } from "vue";
import {
computed,
nextTick,
onMounted,
onUnmounted,
reactive,
ref,
watch,
} from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
@ -117,7 +129,8 @@ const videoElementRef = ref(null); // zoom会议组件
const meetingWidth = ref(0); // 视频和共享屏幕宽度
const meetingHeight = ref(0); // 视频和共享屏幕高度
const isMeetingLoading = ref(false);
const templateId = ref(1);
const templateId = ref(0);
templateId.value = store.getters.templateId;
/* 会议配置 */
const meetingConfig = reactive({
client: ZoomMtgEmbedded.createClient(),
@ -130,20 +143,8 @@ const meetingConfig = reactive({
registrantToken: route.name === "Host" ? "" : store.getters.token,
});
// /* 初始化尺寸 */
// const initDesktopLayout = () => {
// // 初始化高度
// document.querySelectorAll(
// ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
// )[2].style.height = `${meetingHeight.value}px`;
// // 初始化宽度
// document.querySelectorAll(
// ".zmwebsdk-MuiPaper-root.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded"
// )[1].style.width = `${meetingWidth.value}px`;
// };
// 开始会议
const isJoinFirstTime = ref(true);
const startMeeting = async () => {
const { sign } = await generateSignature({
meetingNumber: store.getters.meetingNumber,
@ -158,7 +159,7 @@ const startMeeting = async () => {
language: "zh-CN",
customize: {
video: {
isResizable: true,
isResizable: false,
popper: {
disableDraggable: true,
},
@ -169,17 +170,17 @@ const startMeeting = async () => {
},
},
},
meetingInfo: [
"topic",
"host",
"mn",
"pwd",
"telPwd",
"invite",
"participant",
"dc",
"enctype",
],
// meetingInfo: [
// "topic",
// "host",
// "mn",
// "pwd",
// "telPwd",
// "invite",
// "participant",
// "dc",
// "enctype",
// ],
},
});
@ -193,7 +194,7 @@ const startMeeting = async () => {
userEmail: meetingConfig.userEmail,
tk: meetingConfig.registrantToken,
});
isJoinFirstTime.value = false;
console.log(meetingConfig.client.getAttendeeslist());
document.querySelector("#suspension-view-tab-thumbnail-gallery").click();
@ -217,14 +218,22 @@ const startMeeting = async () => {
};
window.client = meetingConfig.client;
window.startMeeting = startMeeting;
// 根据id设置布局
const setLayout = (templateId) => {
videoElementRef.value.className = `layout-template-${templateId}`;
// if (templateId === "1") {
// } else if (templateId === "2") {
// } else if (templateId === "3") {
// }
// 使摄像头窗口显示在右上角，当切换布局或resize、横屏时执行
const makeVideoTop = () => {
const screenShareEl = document.querySelector(
'div[id*="suspension-view-tabpanel"]>div.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root>div[class*="inSharing"]>div'
);
if (screenShareEl) console.log(screenShareEl.offsetTop);
};
// 根据id设置布局
// const setLayout = (templateId) => {
// videoElementRef.value.className = `layout-template-${templateId}`;
// if (templateId === "1") {
// } else if (templateId === "2") {
// } else if (templateId === "3") {
// }
// };
// const setLayout = (templateId) => {
// console.log(templateId);
// const videoScreenWrapEl = document.querySelectorAll(
@ -368,7 +377,8 @@ setInterval(() => {
watch(inSharing, (val) => {
console.log(val);
if (val) {
setLayout(templateId.value);
// setLayout(templateId.value);
makeVideoTop();
} else {
const galleryViewButton = document.querySelector(
"#suspension-view-tab-thumbnail-gallery"
@ -394,19 +404,20 @@ watch(attendeeslist, (val) => {
// 点击进入全屏模式
const setFullScreen = async () => {
meetingContainerRef.value.requestFullscreen();
// meetingContainerRef.value.className =
// meetingContainerRef.value.className + " fullscreen";
// meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
// meetingHeight.value = (meetingWidth.value * 9) / 16;
// console.log(meetingWidth.value, meetingHeight.value);
// videoElementRef.value.style.width = `${meetingWidth.value}px`;
// videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
// await meetingConfig.client.leaveMeeting();
// startMeeting();
// setTimeout(() => {
// startMeeting();
// }, 5000);
// startMeeting();
isFullScreen.value = true;
document
.querySelectorAll(
"div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
)
.forEach((el) => {
el.setAttribute(
`style`,
`height: ${screen.height - screen.width * 0.08 - 42}px !important`
);
// el.style.height = `${
// screen.height - screen.width * 0.08 - 42
// }px !important;`;
});
};
// 是否显示考试和问卷弹窗
const showExamDialog = ref(false);
@ -486,9 +497,9 @@ const initWebSocket = () => {
// 会议信息更新时
if (data.type === "isRefreshMeeting") {
await store.dispatch("getMeetingInfo", store.getters.meetingId);
meetingContainerRef.value.style.background = ` url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`;
meetingContainerRef.value.style.background = `url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`;
templateId.value = store.getters.templateId;
setLayout(templateId.value);
// setLayout(templateId.value);
setTextLabel();
}
// 收到聊天消息时
@ -573,12 +584,36 @@ const getStageQuestionnaireAnswer = (val) => {
questionnaireQuestionsList.value = val.map((el) => el);
};
const isFullScreen = ref(false);
onMounted(() => {
meetingContainerRef.value.style.background = ` url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`;
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
meetingHeight.value = (meetingWidth.value * 9) / 16;
videoElementRef.value.style.width = `${meetingWidth.value}px`;
videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
// 当退出全屏模式时
meetingContainerRef.value.addEventListener("fullscreenchange", () => {
if (document.fullscreenElement) {
isFullScreen.value = true;
} else {
isFullScreen.value = false;
nextTick(() => {
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
meetingHeight.value = (meetingWidth.value * 9) / 16;
videoElementRef.value.style.width = `${meetingWidth.value}px`;
videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
document
.querySelectorAll(
"div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
)
.forEach((el) => {
el.style.height = `${meetingHeight.value}px`;
});
});
}
});
setTextLabel();
startMeeting();
});
@ -783,6 +818,8 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
> div[class*="inSharing"]
+ div) {
width: $meetingComponentWitdh * 0.5;
height: $meetingComponentWitdh * 0.5 * 9 / 14;
align-self: center;
}
}
.layout-template-2 {
@ -795,6 +832,8 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
> div[class*="inSharing"]
+ div) {
width: $meetingComponentWitdh * 0.5;
height: $meetingComponentWitdh * 0.5 * 9 / 14;
align-self: center;
}
}
.layout-template-3 {
@ -807,7 +846,8 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
> div[class*="inSharing"]
+ div) {
width: $meetingComponentWitdh * 0.2;
height: $meetingComponentWitdh * 0.2 * 9 / 16;
height: $meetingComponentWitdh * 0.2 * 9 / 14;
align-self: center;
}
}
.layout-template-4 {
@ -820,7 +860,8 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
> div[class*="inSharing"]
+ div) {
width: $meetingComponentWitdh * 0.2;
height: $meetingComponentWitdh * 0.2 * 9 / 16;
height: $meetingComponentWitdh * 0.2 * 9 / 14;
align-self: center;
}
}
}