Description
Zoom Web SDK 2.1.1 trying to use new Component View (following docs) but the view showed is completely blacked, unable to resize, and no error on console inspector (beside GL_INVALID_VALUE : glViewport: negative width/height)
Browser Console Error
GL_INVALID_VALUE : glViewport: negative width/height
Which Web Meeting SDK version?
2.1.1
Meeting SDK Code Snippets
<template>
<div class="iframe-container">
<div id="meetingSDKElementDiv" ref="meetingSDKElementDiv">
<!-- Zoom Meeting SDK Rendered Here -->
</div>
<meta charset="utf-8">
<link
type="text/css"
rel="stylesheet"
href="https://source.zoom.us/2.1.1/css/bootstrap.css"
/>
<link
type="text/css"
rel="stylesheet"
href="https://source.zoom.us/2.1.1/css/react-select.css"
/>
<meta
name="format-detection"
content="telephone=no"
>
</div>
</template>
<script>
// import { ZoomMtg } from "@zoomus/websdk";
import ZoomMtgEmbedded from "@zoomus/websdk/embedded";
const client = ZoomMtgEmbedded.createClient();
console.log("checkSystemRequirements");
export default {
name: "ZoomFrame",
data() {
return {
src: "",
meetConfig: {},
signature: null,
API_KEY: null,
meetingSDKElement: null
};
},
props: {
nickname: String,
meetingId: String,
password: String,
hostId: String,
userRole: Number,
isUserInstructor: Boolean,
isUserLiveCourseTutor: Boolean,
},
created() {
},
mounted: function () {
this.meetingSDKElement = this.$refs.meetingSDKElementDiv;
console.log('zoom frame created');
this.zoomInite();
},
methods: {
whereToGoWhenLeavingMeeting() {
if (
this.userRole === 1 &&
!this.isUserInstructor &&
!this.isUserLiveCourseTutor
) {
return `/agency/live_courses_events`;
}
if (
this.userRole === 1 &&
this.isUserInstructor &&
!this.isUserLiveCourseTutor
) {
return `/dashboard/instructor`;
}
if (
this.userRole === 1 &&
!this.isUserInstructor &&
this.isUserLiveCourseTutor
) {
return `/dashboard/live_course_tutor`;
}
if (this.userRole === 0) {
return `/user/dashboard`;
}
},
zoomSignatureInit() {
if (this.API_KEY && this.signature) {
// Meeting config object
this.meetConfig = {
apiKey: this.API_KEY,
meetingNumber: this.meetingId,
userName: this.nickname,
passWord: this.password,
leaveUrl: this.whereToGoWhenLeavingMeeting(),
role: this.userRole,
};
// Zoom init and join function
client.init({
debug: true,
zoomAppRoot: this.meetingSDKElement,
language: 'it-IT',
customize: {
meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
toolbar: {
buttons: [
{
text: 'Custom Button',
className: 'CustomButton',
onClick: () => {
console.log('custom button');
}
}
]
}
}
});
client.join({
apiKey: this.meetConfig.apiKey,
signature: this.signature,
meetingNumber: Number(this.meetConfig.meetingNumber),
password: this.meetConfig.passWord,
userName: this.meetConfig.userName,
})
}
},
zoomInite() {
axios
.post(`/api/zoom_credentials/`, {
meeting_number: this.meetingId,
role: this.userRole,
})
.then((response) => {
this.API_KEY = response.data.zoomApiKey;
this.signature = response.data.zoomSignature;
this.zoomSignatureInit();
console.log("success signature: " + this.signature);
})
.catch((error) => {
console.log(error);
});
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>
To Reproduce(If applicable)
na
Screenshots
If applicable, add screenshots to help explain your problem.
Device (please complete the following information):
- Device: MacBook Pro (Retina, 15-inch, Mid 2015)
- OS: macOS Catalina
- Browser: Chrome
- Browser Version 96.0.4664.93 (Official Build) (x86_64)
Additional context
unable to use