Zoomtopia is here. Unlock the transformative power of generative AI, helping you connect, collaborate, and Work Happy with AI Companion.
Register nowEmpowering you to increase productivity, improve team effectiveness, and enhance skills.
Learn moreKeep your Zoom app up to date to access the latest features.
Download Center Download the Zoom appDownload hi-res images and animations to elevate your next Zoom meeting.
Browse Backgrounds Zoom Virtual BackgroundsEmpowering you to increase productivity, improve team effectiveness, and enhance skills.
Zoom AI Companion2021-07-07 11:01 AM - last edited on 2022-01-25 09:51 AM by Bri
I am integrating @ zoomus / websdk in Vue3 guided by the project loaded in Vue2 Github, when loading everything making the corresponding version adaptations it throws an error in the browser console and does not allow me to continue with the development, I am realizing that The error throws it to me when adding the ZoomMtg.prepareJssdk () component, after this it stays on a black screen and does not allow to perform any operation, I cannot even see what ZoomMtg.init () throws in the console.
Annex the code used in the project:
<template>
<h1>Zoom WebSDK Sample Vue.js 2</h1>
<button @click="getSignature">Join Meeting</button>
<div id="zmmtg-root"></div>
<div id="aria-notify-area"></div>
</template>
<script>
import {
ZoomMtg
} from '@zoomus/websdk';
import axios from "axios";
ZoomMtg.setZoomJSLib('node_modules/@zoomus/websdk/dist/lib', '/av')
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
export default {
data() {
return {
apiKey: "",
leaveUrl: "http://localhost:8080",
meetingNumber: "123456789",
passWord: "",
role: 0,
signatureEndpoint: "http://localhost:3000/zoom",
userEmail: "",
userName: "Vue.js"
}
},
methods: {
getSignature() {
axios.post(this.signatureEndpoint, {
meetingNumber: this.meetingNumber,
role: this.role
})
.then(res => {
this.startMeeting(res.data);
})
.catch(error => {
console.log(error);
});
},
startMeeting(signature) {
document.getElementById("zmmtg-root").style.display = "block";
ZoomMtg.init({
leaveUrl: this.leaveUrl,
isSupportAV: true,
success: (success) => {
console.log(success);
ZoomMtg.join({
meetingNumber: this.meetingNumber,
userName: this.userName,
signature: signature,
apiKey: this.apiKey,
userEmail: this.userEmail,
passWord: this.passWord,
success: (success) => {
console.log(success);
},
error: (error) => {
console.log(error);
}
});
},
error: (error) => {
console.log(error);
}
});
}
}
}
</script>
<style>
#zmmtg-root {
display: none;
position: absolute;
}
</style>
2021-07-12 02:53 PM
Hello Yeifer, and welcome to the Zoom Community!
I have to guess as to what might be going on since the error doesn't typically appear. Based on similar posts in devforum.zoom.us, which is another location you can use to chat with other developers, including the Zoom Developer Advocates, the most likely cause of this error is that the init is getting processed before the resources are loaded. Can you please try putting in a few second timeout before the init to see if that resolves your issue?
Thanks.