I am using Nuxt JS (Vue JS) and I have integrated the zoom sdk in Nuxt JS but give an error as “Window not define”. And website goes to black screen.
NPM SDK: zoomus-websdk
Hey @dhanushka.sandaruwan, thanks for posting and using Zoom!
Please share your code, and steps to reproduce the issue so we can debug.
Thanks,
Tommy
Hi @tommy Thanks for replying.
We come up with the solution of “Window not define issue” using below code.
And the come up with the solution of “Black screen” using below post.
Now the issue is this.
zoomus-websdk.umd.min.js?478e:2 Uncaught TypeError: $.ajax is not a function
at i (zoomus-websdk.umd.min.js?478e:2)
at y (zoomus-websdk.umd.min.js?478e:2)
at Object.join (zoomus-websdk.umd.min.js?478e:2)
at Object.success (ZoomWindow.vue?2b25:33)
at z (zoomus-websdk.umd.min.js?478e:2)
at t.value (zoomus-websdk.umd.min.js?478e:2)
at m (zoomus-websdk.umd.min.js?478e:2)
at Object.init (zoomus-websdk.umd.min.js?478e:2)
at VueComponent.mounted (ZoomWindow.vue?2b25:29)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
Below is the code
zoom.client.js
import Vue from 'vue'
import { ZoomMtg } from '@zoomus/websdk';
console.log("checkSystemRequirements");
console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));
// CDN version default
ZoomMtg.setZoomJSLib('https://dmogdx0jrul3u.cloudfront.net/1.3.7/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
var API_KEY = "we use our own key";
var API_SECRET = "we use our own key";
const MeetingCfg = (meetingId, nickname) => ({
apiKey: API_KEY,
apiSecret: API_SECRET,
meetingNumber: meetingId,
userName: nickname,
passWord: "we use meeting crated password",
leaveUrl: "https://zoom.us",
role: 0
})
// what variable you hook into Vue's prototype will be available on ANY vue component
Vue.prototype.$ZoomMtg = ZoomMtg
Vue.prototype.$MeetingCfg = MeetingCfg
ZoomWindow.vue
<template>
<div>
</div>
</template>
<script>
export default {
props: {
nickname: String,
meetingId: String
},
mounted () {
const meetConfig = this.$MeetingCfg(this.meetingId, this.nickname)
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: "http://www.zoom.us",
isSupportAV: true,
success: () => {
ZoomMtg.join({
meetingNumber: meetConfig.meetingNumber,
userName: meetConfig.userName,
signature: signature,
apiKey: meetConfig.apiKey,
userEmail: "email@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>
zoom.vue
<template>
<zoom-window />
</template>
<script>
import ZoomWindow from '~/components/ZoomWindow'
export default {
components: {
ZoomWindow
}
}
</script>
nuxt.config.js
plugins: [
'~/plugins/zoom.client.js'
],
Hey @dhanushka.sandaruwan, glad to hear you are making progress!
Can you try importing jquery to your app?
Thanks,
Tommy
Hay @tommy Thanks for quick reply.
Applied the code. That works grate. Thank you very much.
You save my day.
Another thing to ask from you. Is there any option to set the window size of the zoom view. Because that appears in whole window.
Thanks
Danushka
1 Like
Hey @dhanushka.sandaruwan, happy to hear that solved the issue! 
Currently the only was to do this would be via CSS.
Thanks,
Tommy
Hi, @tommy Thanks for the solution.
Another issue occurred of video showing. Used https localhost but no luck. Video can show when using windows app and the web sdk.
Below error found.
Uncaught TypeError: t.initSharingEncode is not a function
at o.connect_socket (zoomus-websdk.umd.min.js?478e:2)
at ie (zoomus-websdk.umd.min.js?478e:2)
at N (zoomus-websdk.umd.min.js?478e:2)
at eval (zoomus-websdk.umd.min.js?478e:2)
at eval (index.js?4dd3:11)
at onTick (zoomus-websdk.umd.min.js?478e:2)
at eval (zoomus-websdk.umd.min.js?478e:2)
at Map.forEach ()
at eval (zoomus-websdk.umd.min.js?478e:2)
Can you please share more details like device, browser, and steps to reproduce the error, with screenshots.
Thanks,
Tommy
Hey @tommy Firstly, thank you for your support and really appreciate that.
I used android vivo device which version is 8.0 with google chrome browser.
Other one is the lenovo windows laptop with chrome browser.
I have hosted the above code in https localhost.
nuxt.config.js
server: {
https: {
key: fs.readFileSync(path.resolve("./", 'server.key')),
cert: fs.readFileSync(path.resolve("./", 'server.crt'))
}
},
Then access via IP address in same network.
The audio and video not working in windows site.
But the android device side that is working but we cant see the video rending and sound hearing. Below is the image.
Regards,
Danushka
Thanks for these details. What happens when you click the start video button on Windows Chrome?
Make sure you are allowing your browser to access the mic and camera.
-Tommy
Hi @tommy,
I found the issue. I didn’t use the latest SDK. I was use the 1.3.0 one and latest is 1.7.0.
Issue solved. Thank for your support.
Danushka
1 Like
Hey @dhanushka.sandaruwan, happy to hear you upgraded to fix the issue!
Let us know if you have other questions! 
Thanks,
Tommy