Black screen and no responsive in nuxtjs

dhernandez · April 21, 2021, 9:20pm

Description
Hello, I have a problem when implementing the sdk zoom web in nuxtjs, at the time of doing it I get two warnings and the screen is black, I must update the page again and I can only enter there. Also, the responsive does not work and I get two errors, according to the forum says that I must enter the links and scripts correctly, I have already done that but it still does not work

Error
It does not enter until the page is refreshed again and the responsive does not work

Which Web Client SDK version?
I am using version 1.8.1 for css and version 1.9.0 in script, since if I use 1.9.1 the camera does not close until I give a next click

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

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

Screenshots

Device (please complete the following information):
All

donte.zoom · April 22, 2021, 1:36pm

Hi, @dhernandez,

Thank you for posting in the Developer Forum. We recommend using the latest version of the SDK 1.9.1, please can you try upgrading from 1.8.1 and see if the issue persists? There have been multiple bug fixes since your version of the SDK. The behavior you are experiencing seems to be because of the use of different version in your implementation. Our latest version 1.9.1 has the latest improvements and we strongly recommend that you update for the most robust support.

Please let me know if this helps.

Best,
Donte

dhernandez · April 22, 2021, 3:55pm

Hi, I am using version 1.8.1 for css and scripts with version 1.9.1 because the camera does not close until I give a next click if I only use version 1.9.1, this problem I am already commenting on above, but it does not respond to the problem I have at the moment. Please can you help me with this problem, since if I use everything with version 1.9.1 I still have the problems that I described above? Thanks

dhernandez · April 22, 2021, 4:47pm

Current bugs with version 1.9.0
issue2

MaxM · April 23, 2021, 9:27pm

Hey @dhernandez,

Thank you for providing more information. First, I’ll note that version 1.8.5 brought with it a required update so you’ll want to make sure that you are using the latest version of the Web SDK (1.9.1).

Further, it looks like the errors that you’re seeing are related to issues importing dependencies within Vue. Please see our Sample Vue.js App and use that as a reference when building with Nuxt.js.

I encountered those same issues when writing the Sample App. It was due to the fact that I was attempting to import dependencies through NPM (package.json) when the CDN method is what works with Vue.js.

Specifically, we can see that dependencies are imported in index.html:

github.com

zoom/websdk-sample-vuejs/blob/4388d5160c030f94b05fa475d800ebb43ab3c548/public/index.html#L10-L11


<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.9.1/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.9.1/css/react-select.css" />

github.com

zoom/websdk-sample-vuejs/blob/master/public/index.html#L18-L23


<script src="https://source.zoom.us/1.9.1/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/1.9.1/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/1.9.1/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/1.9.1/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/1.9.1/lib/vendor/lodash.min.js"></script>
<script src="https://source.zoom.us/zoom-meeting-1.9.1.min.js"></script>

Let me know if that helps.

Thanks,
Max

dhernandez · April 23, 2021, 10:05pm

Hi @MaxM I have linked the dependencies in different ways and the problem is the same, either with version 1.9.0 and 1.9.1, I do not use NPM, only CDN and the problem persists and I do not know what is the reason for these errors?

dhernandez · April 23, 2021, 10:14pm

One more thing, I do not link the dependencies in the nuxt.config since when I do that the rest of my application does not work, which led me to link locally as you indicate, but it does not work

MaxM · April 23, 2021, 10:36pm

Hey @dhernandez,

Thank you for the update. If you’re able to provide a git repo or a URL for your codebase where you see this issue, I’m happy to take a look and see if I can spot any issues there.

If you don’t want to share that information here, you can send an email to developersupport@zoom.us with a link to this thread and that information.

Thanks,
Max

dhernandez · April 23, 2021, 11:12pm

Thank you very much @MaxM I attach the repository of the part of the problem with the sdk zoom so that you can help me to verify if the links and the structure in the code are correct, I await your prompt response, thank you.

MaxM · April 23, 2021, 11:51pm

Hey @dhernandez,

Thanks for providing that, I can see that you are explicitly rendering the Web SDK client side, that’s a good practice with Nuxt.js. Here are a couple of things I noticed, let me know if they are helpful:

On the following line, you are importing the Web SDK from a local path:

github.com

Cuervo20/testZoom/blob/2b57c308401b78428eb25ebd35472b8898a1e9a8/components/ZoomWindow.vue#L23




<script> 
import Cookie from 'js-cookie'
import {MEETING_ID, API_KEY, API_SECRET} from '../static/credencialesZoom'
let logueo
let signature
let NAME = Cookie.get('nm')
/*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');
    ZoomMtg.setZoomJSLib('https://source.zoom.us/1.9.1/lib', '/av'); 
    
    ZoomMtg.preLoadWasm();

    ZoomMtg.prepareJssdk();

However, at the end of the file, you are also importing the Web SDK from the CDN:

github.com

Cuervo20/testZoom/blob/2b57c308401b78428eb25ebd35472b8898a1e9a8/components/ZoomWindow.vue#L151


       /*
        EQUIVALENT TO 
        <script src="...">
      */
      script: [
        { sameSite:"None",src: "https://source.zoom.us/1.9.1/lib/vendor/react.min.js" },
        { sameSite:"None",src: "https://source.zoom.us/1.9.1/lib/vendor/react-dom.min.js" },
        { sameSite:"None",src: "https://source.zoom.us/1.9.1/lib/vendor/redux.min.js" },
        { sameSite:"None",src: "https://source.zoom.us/1.9.1/lib/vendor/redux-thunk.min.js" },
        { sameSite:"None",src: "https://source.zoom.us/1.9.1/lib/vendor/lodash.min.js" },
        { sameSite:"None",src: "https://source.zoom.us/zoom-meeting-1.9.1.min.js" },
      ],
    };
  },

  async mounted () {
      logueo
  }

};

This seems to indicate that files are being requested from both the local and CDN methods. I’ve seen the exact error you are encountering when making that mistake before too.

Next, I’m seeing that you add the zmmtg-root div element on your page but this should actually be injected by the Web SDK at runtime. Please try removing that div to avoid any conflicts.

github.com

Cuervo20/testZoom/blob/2b57c308401b78428eb25ebd35472b8898a1e9a8/components/ZoomWindow.vue#L7


<template>


    <div>


    <div id="zmmtg-root"></div>
    </div>

    

</template>


<script> 
import Cookie from 'js-cookie'
import {MEETING_ID, API_KEY, API_SECRET} from '../static/credencialesZoom'

Finally, once you are importing exclusively from the Web SDK, the best method to access the ZoomMtg object is by adding it to the Vue object prototype:

github.com

zoom/websdk-sample-vuejs/blob/4388d5160c030f94b05fa475d800ebb43ab3c548/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')

Then, within a component, you can reference the ZoomMtg object using this to refer to the Vue object:

github.com

zoom/websdk-sample-vuejs/blob/4388d5160c030f94b05fa475d800ebb43ab3c548/src/components/HelloWorld.vue#L14-L16


this.ZoomMtg.setZoomJSLib('https://source.zoom.us/1.9.1/lib', '/av');
this.ZoomMtg.preLoadWasm();
this.ZoomMtg.prepareJssdk();

With Nuxt.js, (I’m not a Nuxt expert but I have dabbled) I think that the Vue instance is actually contained within context.app

Let me know if that helps!

Thanks,
Max

dhernandez · April 26, 2021, 4:49pm

Hi @MaxM sorry for the delay in answering you, I was trying to implement all the changes you sent me but at the time of doing it I get the following error and I cannot identify why that happens, I have updated the github repository for you to help me review it, thank you very much

tommy · April 27, 2021, 5:00pm

Hey @dhernandez ,

I have seen you have created a new thread:

We will support you in that thread now.

Thanks,
Tommy

system · May 28, 2021, 3:01am

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 with recent version Web	2	388	April 24, 2021
Error using Web SDK CDN in nuxt Web	4	958	May 29, 2021
Zoom for Nuxt JS (Vue JS) Web	13	6369	August 21, 2020
NextJS and Web SDK - Stuck in a black screen Web	2	581	November 18, 2022
Recent Issues and Improvements to the Web SDK Web	8	2582	August 12, 2020

Related Topics