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

changed padding, fixed media check issue

Browse Source
This commit is contained in:
cxc
2022-06-08 17:30:38 +08:00
parent 049d15340a
commit 35fe3df3fb
5 changed files with 189 additions and 1957 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
src/views/meeting.vue
View File

@ -80,62 +80,7 @@
</span>
</template>
</el-dialog>
<el-dialog
custom-class="check-media"
destroy-on-close
v-model="showCheckMediaVideo"
:close-on-click-modal="false"
title="摄像头和麦克风"
:fullscreen="screenWidth < 900"
width="60%"
>
<el-alert
v-if="isVideoAvailable === undefined || isAudioAvailable === undefined"
>检测中。</el-alert
>
<el-alert
v-else-if="isVideoAvailable === true && isAudioAvailable === true"
type="success"
>摄像头工作正常，麦克风工作正常。</el-alert
>
<el-alert
v-else-if="isVideoAvailable === true && isAudioAvailable === false"
type="warning"
>摄像头工作正常，麦克风无法正常工作。</el-alert
>
<el-alert
v-else-if="isVideoAvailable === false && isAudioAvailable === true"
type="warning"
>摄像头无法正常工作，麦克风工作正常。</el-alert
>
<el-alert v-else type="error"
>摄像头无法正常工作，麦克风无法正常工作。</el-alert
>
<!-- <div id="row"> -->
<div id="check-media-wrap" ref="checkMediaWrapRef">
<video id="check-media-video" ref="checkMediaVideoRef"></video>
<!-- <el-icon class="microphone-icon" :size="50"> -->
<Microphone
v-if="isAudioAvailable === undefined"
class="microphone-loading"
/>
<Microphone
v-else-if="isAudioAvailable === true"
class="microphone-on"
/>
<Mute v-else class="microphone-off" />
<!-- </el-icon> -->
</div>
<!-- </div> -->
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="showCheckMediaVideo = false"
>关闭</el-button
>
</span>
</template>
</el-dialog>
<mediaCheck />
<questions
mode="1"
@ -190,6 +135,7 @@ import {
} from "@element-plus/icons-vue";
import { signMeeting, generateSignature } from "@/api/meeting";
import Chat from "@/components/chat";
import mediaCheck from "@/components/mediaCheck.vue";
import questions from "@/components/questions";
import {
getQuestionsList,
@ -306,7 +252,7 @@ const startMeeting = async () => {
};
const setSize = () => {
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.96;
meetingHeight.value = (meetingWidth.value * 9) / 16;
// videoElementRef.value.style.width = `${meetingWidth.value}px`;
@ -328,41 +274,6 @@ const setSize = () => {
window.client = meetingConfig.client;
window.startMeeting = startMeeting;
const checkMediaVideoRef = ref(null);
const checkMediaWrapRef = ref(null);
const showCheckMediaVideo = ref(true);
const isVideoAvailable = ref(undefined);
const isAudioAvailable = ref(undefined);
// TODO:可能有摄像头占用问题。
onMounted(() => {
nextTick(() => {
const videoWidth = checkMediaWrapRef.value.offsetWidth;
const videoHeight = checkMediaWrapRef.value.offsetHeight;
console.log(checkMediaVideoRef.value);
navigator.mediaDevices
.getUserMedia({ video: { width: videoWidth, height: videoHeight } })
.then((stream) => {
checkMediaVideoRef.value.srcObject = stream;
checkMediaVideoRef.value.play();
isVideoAvailable.value = true;
})
.catch((err) => {
console.log(err);
isVideoAvailable.value = false;
});
});
navigator.mediaDevices
.getUserMedia({ audio: true })
.then((stream) => {
console.log(stream);
isAudioAvailable.value = true;
})
.catch((err) => {
console.log(err);
isAudioAvailable.value = false;
});
});
// 设置文本标签
const setTextLabel = () => {
document.querySelectorAll(".text-tag").forEach((el) => {
@ -544,7 +455,7 @@ const setFullScreen = async () => {
isFullScreen.value = true;
nextTick(() => {
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.96;
meetingHeight.value = (meetingWidth.value * 9) / 16;
// 当手机竖屏时
if (window.orientation === 0) {
@ -747,7 +658,7 @@ const getStageQuestionnaireAnswer = (val) => {
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;
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.96;
meetingHeight.value = (meetingWidth.value * 9) / 16;
videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
@ -759,7 +670,7 @@ onMounted(() => {
isFullScreen.value = false;
isVerticalFullScreen.value = false;
nextTick(() => {
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.96;
meetingHeight.value = (meetingWidth.value * 9) / 16;
// videoElementRef.value.style.width = `${meetingWidth.value}px`;
videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
@ -790,7 +701,7 @@ onMounted(() => {
// 当修改窗口尺寸时
window.addEventListener("resize", (e) => {
console.log(e);
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.9;
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.96;
meetingHeight.value = (meetingWidth.value * 9) / 16;
if (!document.fullscreenElement) {
videoElementRef.value.style.height = `${meetingHeight.value + 42}px`;
@ -832,7 +743,7 @@ onUnmounted(() => {
</script>
<style lang="scss" scoped>
$meetingComponentWitdh: 80vw * 0.9;
$meetingComponentWitdh: 80vw * 0.96;
$meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
:deep(#right-chat .chat-container .message-list) {
@ -852,7 +763,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
width: 80vw;
position: relative;
#video-element {
width: 72vw;
width: $meetingComponentWitdh;
:deep(div[id*="suspension-view-tabpanel"]
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
> div[class*="inSharing"]
@ -947,7 +858,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
> div
> .zmwebsdk-MuiPaper-root
> .zmwebsdk-MuiPaper-root:nth-child(1)) {
width: calc(80vw * 0.9);
width: $meetingComponentWitdh;
}
:deep(#video-element
> div
@ -958,7 +869,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
}
:deep(div[id*="suspension-view-tabpanel"]
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
height: calc(80vw * 0.9 * 9 / 16);
height: $meetingComponentWitdh * 9 / 16;
}
:deep(.zmwebsdk-MuiPaper-root) {
@ -971,44 +882,10 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
> .zmwebsdk-MuiBox-root) {
display: none;
}
:deep(.check-media) {
.el-dialog__body {
text-align: center;
#check-media-wrap {
display: inline-block;
margin: 1vw auto;
border-radius: 1vw;
overflow: hidden;
width: 36vw;
height: 24vw;
background-color: #000;
position: relative;
// #check-media-video {
// width: 100%;
// height: 100%;
// }
svg {
position: absolute;
left: 1vw;
bottom: 1vw;
width: 3vw;
height: 3vw;
}
.microphone-loading {
color: #fff;
}
.microphone-on {
color: springgreen;
}
.microphone-off {
color: indianred;
}
}
}
}
// 适配移动端 屏幕宽度小于 900px
@media screen and (max-width: 900px) {
$meetingComponentWitdh: 90vw;
$meetingComponentWitdh: 96vw;
// $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
#app-container {
@ -1017,7 +894,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
padding-top: calc(100vw * 0.08);
width: 100vw;
#video-element {
width: 90vw;
width: 96vw;
:deep(div[id*="suspension-view-tabpanel"]
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
> div[class*="inSharing"]
@ -1036,14 +913,14 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
}
:deep(div[id*="suspension-view-tabpanel"]
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root) {
height: calc(100vw * 0.9 * 9 / 16);
height: $meetingComponentWitdh * 9 / 16;
}
}
:deep(#video-element
> div
> .zmwebsdk-MuiPaper-root
> .zmwebsdk-MuiPaper-root:nth-child(1)) {
width: 90vw;
width: $meetingComponentWitdh;
}
}
}
@ -1051,20 +928,6 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
#right-chat {
display: none !important;
}
:deep(.check-media) {
.el-dialog__body {
#check-media-wrap {
margin: 2vw auto;
width: 80vw;
height: 54vw;
svg {
width: 6vw;
height: 6vw;
}
}
}
}
}
// 全屏样式
@ -1074,12 +937,15 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
width: 80vw;
#meeting-container.fullscreen {
$meetingComponentWitdh: 90vw;
padding-top: calc(80vw * 0.08);
$meetingComponentWitdh: 96vw;
padding-top: calc(100vw * 0.08);
@media screen and (max-width: 900px) {
padding-top: calc(80vw * 0.08);
}
width: 100vw;
height: 100vh;
#video-element {
width: 90vw;
width: $meetingComponentWitdh;
}
.layout-template-1 {
:deep(div[id*="suspension-view-tabpanel"]
@ -1123,7 +989,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
> div
> .zmwebsdk-MuiPaper-root
> .zmwebsdk-MuiPaper-root:nth-child(1)) {
width: 90vw;
width: 96vw;
}
:deep(#video-element
> div
@ -1138,7 +1004,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
}
#meeting-container.verticalFullScreen {
$meetingComponentWitdh: 90vh;
$meetingComponentWitdh: 96vh;
$meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
padding-top: calc(80vh * 0.08);
position: absolute;
@ -1149,7 +1015,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
width: 100vh !important;
height: 100vw;
#video-element {
width: 90vh;
width: $meetingComponentWitdh;
:deep(div[id*="suspension-view-tabpanel"]
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
> div[class*="inSharing"]
@ -1169,7 +1035,7 @@ $meetingComponentHeight: $meetingComponentWitdh * 9 / 16;
> .zmwebsdk-MuiPaper-root
> .zmwebsdk-MuiPaper-root:nth-child(1)) {
// width: calc(100vh * 0.9) !important;
width: 90vh;
width: $meetingComponentWitdh;
}
:deep(#video-element
> div