Error using Web SDK CDN in nuxt

dhernandez · April 26, 2021, 11:27pm

Description
Hi, I have implemented the Web SDK CDN as indicated in a previous section:

but I am getting a new error

Error
The error occurs as soon as I enter the part where the sdk is implemented

Which Web Client SDK version?
1.9.1

To Reproduce(If applicable)
Steps to reproduce the behavior:

Go to ‘…’
Click on ‘…’
Scroll down to ‘…’
See error

Screenshots
If applicable, add screenshots to help explain your problem.

Device (please complete the following information):
All

Additional context
It is worth mentioning that I want to use the sdk only in one page and I should not use it inside nuxt.config since it affects everything else, I attach the repository where I have the sdk section, thank you very much

tommy · April 27, 2021, 6:13pm

Hey @dhernandez ,

I believe the issue is how you are defining “ZoomMtg”.

github.com

Cuervo20/testZoom/blob/main/components/ZoomWindow.vue#L27


let logueo
let signature
let NAME = "nombre"
/*Esto es como el problema con el cliente y servidor*/
if (process.browser) {
    //const {ZoomMtg} = require('@zoomus/websdk');
    
    
    //ZoomMtg.setZoomJSLib('https://dmogdx0jrul3u.cloudfront.net/1.3.7/lib', '/av'); 
    //ZoomMtg.setZoomJSLib('https://dmogdx0jrul3u.cloudfront.net/1.9.1/lib', '/av');
    this.ZoomMtg.setZoomJSLib('https://source.zoom.us/1.9.1/lib', '/av'); 
    
    this.ZoomMtg.preLoadWasm();


    this.ZoomMtg.prepareJssdk();


     signature = this.ZoomMtg.generateSignature({


      meetingNumber: MEETING_ID,


      apiKey: API_KEY,

Checkout how we are defining “ZoomMtg” to the window in our Vue sample app:

github.com

zoom/websdk-sample-vuejs/blob/master/src/main.js#L6


import Vue from 'vue'
import App from './App.vue'


Vue.config.productionTip = false


Vue.prototype.ZoomMtg = window.ZoomMtg;


new Vue({
  render: h => h(App),
}).$mount('#app')

CC @MaxM

Thanks,
Tommy

dhernandez · April 27, 2021, 6:45pm

Hi @tommy thank you very much for answering I have to solve this problem urgently, as you tell me I am doing it, within the github repository I mention what you indicate but it still does not work, please what can I do since I have tried everything they indicated but it does not work.

github.com

Cuervo20/testZoom/blob/main/pages/main.js

import Vue from 'vue'
import Transmision from './transmision.vue'

Vue.config.productionTip = false

Vue.prototype.ZoomMtg = window.ZoomMtg;

new Vue({
  render: h => h(Transmision),
}).$mount('#transmision')

github.com

Cuervo20/testZoom/blob/main/pages/transmision.vue

<template>
<div id="transmision">
    <zoom-window/> 
</div>
 

</template>


<script>
import ZoomWindow from '../components/ZoomWindow'

export default {
  name: 'Transmision',
  components: {
    ZoomWindow
  },

}

This file has been truncated. show original

github.com

Cuervo20/testZoom/blob/main/components/ZoomWindow.vue


<template>


    <div>

    </div>

    

</template>


<script> 

import {MEETING_ID, API_KEY, API_SECRET} from '../static/credencialesZoom'
let logueo
let signature
let NAME = "nombre"
/*Esto es como el problema con el cliente y servidor*/

This file has been truncated. show original

MaxM · April 28, 2021, 10:15pm

Hey @dhernandez,

Thank you for providing more detail. First, I noticed that package.json still references the Web SDK package. This likely isn’t the issue but it can be removed:

github.com

Cuervo20/testZoom/blob/73b46062271b9e87bc04a5ed3ace817084f50268/package.json#L12


  "name": "PrjZoom",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@zoomus/websdk": "^1.9.1",
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3",
    "vue": "^2.6.12"
  },
  "devDependencies": {}
}

Further, I noticed that the main.js file is placed in the pages directory. With Vue.js, this won’t allow main.js to have the effect we want. Further, with Nuxt.js, the main.js file isn’t used.

It looks like the pattern for setting an object on the Vue Instance with Nuxt.js is to use a plugin. I found some documentation that might help below:

I hope that helps!

Thanks,
Max

system · May 29, 2021, 8:15am

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Black screen and no responsive in nuxtjs Web	12	853	May 28, 2021
Black screen and no responsive in nuxtjs with recent version Web	2	388	April 24, 2021
Getting a Black Screen whenever I import the zoom web client sdk through cdn to my website Web	8	2388	August 21, 2020
Zoom for Nuxt JS (Vue JS) Web	13	6373	August 21, 2020
Zoom WebSDK for Nuxt.js Web	9	2196	August 12, 2020

Related Topics