Question
when loading ZoomMtg.prepareJssdk (); it sends me two errors in the browser console.
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>