Description
I’ve installed "@zoomus/websdk": "^1.9.1", on Vue/Nuxt JS App and configured zoom-sdk.js on nuxt.config.js file with client mode (No SSR).
In My meetings.vue file:
<template>
<div class="meeting">
<div class="container-zoom">
<ZoomFrame :nickname="nickname" :meetingId="meetingId" :password="password" />
</div>
</div>
</template>
<script>
import ZoomFrame from "~/components/Zoom/ZoomFrame.vue";
export default {
name: "app",
data: function () {
return {
nickname: "My Nick Name",
meetingId: "MY MEETING ID",
password: "MEETING PASSWORD",
};
},
components: {
ZoomFrame,
},
};
</script>
<style scoped>
.container-zoom {
width: 70%;
height: 100%;
}
</style>
In My ZoomFrame.vue file:
<template>
<div>
<div id="zmmtg-root"></div>
<div id="aria-notify-area"></div>
</div>
</template>
<script>
export default {
props:['nickname','meetingId','password'],
created() {
const meetConfig = this.$MeetingCfg(this.meetingId, this.nickname, this.password);
const ZoomMtg = this.$ZoomMtg;
// Generate Signature function
const signature = ZoomMtg.generateSignature({
meetingNumber: meetConfig.meetingNumber,
apiKey: meetConfig.apiKey,
apiSecret: meetConfig.apiSecret,
role: meetConfig.role,
success: function (res) {
// eslint-disable-next-line
console.log("success signature: " + res.result);
},
});
// join function
ZoomMtg.init({
leaveUrl: "https://zoom.us",
isSupportAV: true,
success: () => {
ZoomMtg.join({
meetingNumber: meetConfig.meetingNumber,
userName: meetConfig.userName,
signature: signature,
apiKey: meetConfig.apiKey,
userEmail: "spotverge1@gmail.com",
passWord: meetConfig.passWord,
success: function (res) {
// eslint-disable-next-line
console.log("join meeting success");
},
error: function (res) {
// eslint-disable-next-line
console.log(res);
},
});
},
error: function (res) {
// eslint-disable-next-line
console.log(res);
},
});
},
};
</script>
Finally, in my zoom-sdk.js file:
import JQuery from "JQuery";
var $=JQuery;
const { ZoomMtg } = require("@zoomus/websdk");
// what variable you hook into Vue's prototype will be available on ANY vue component
import Vue from "vue";
console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));
// CDN version default
ZoomMtg.setZoomJSLib("https://dmogdx0jrul3u.cloudfront.net/1.9.1/lib", "/av");
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
const MeetingCfg = (meetingId, nickname, password) => ({
apiKey: "MY_API_KEY",
apiSecret: "MY_API_SECRET",
meetingNumber: meetingId,
userName: nickname,
passWord: password,
leaveUrl: "https://zoom.us",
role: 0
});
Vue.prototype.$ZoomMtg = ZoomMtg;
Vue.prototype.$MeetingCfg = MeetingCfg;
Error
The application starts loading indicator that shows “Joining Meeting” and then returns the black screen with no errors. However, I get the following warning in console:
DevTools failed to load SourceMap: Could not load content for https://dmogdx0jrul3u.cloudfront.net/1.9.1/lib/webim.min.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE
Which Web Client SDK version?
1.9.1
To Reproduce(If applicable)
Steps to reproduce the behavior:
- Visit website URL
- Meeting Id, Nickname and Password were already defined by the backend
- Wait for it to connect
- See black screen with no errors
Screenshots
Device:
- Device: [PC (1366x768 resolution)]
- OS: [Windows 10]
- Browser: [Chrome]
- Browser Version [Version 91.0.4464.5 (Official Build) dev (64-bit)]
Additional context
In network requests, the following URL https://zoom.us/api/v1/wc/info?meetingNumber=9.... results in the response containing errorCode: 0.
