Web SDK via Vue (Black Screen)

Hello.

I’m having a hard time getting beyond a black screen trying to ZoomMtg.join() in a Vue app.

I am passing in a meeting config object that looks like this:

{ apiKey: "my-key", leaveUrl: "a url", meetingNumber: 12345, signature: "generated signature", userEmail: "email address", userName: "a name" }

via:

ZoomMtg.init({ leaveUrl: meetConfig.leaveUrl, isSupportAV: true, success: function() { console.log("Successfully initialized meeting. Config:"); console.log(meetConfig); ZoomMtg.join(meetConfig); }

Initially I was seeing this error in my console:
webim.min.js:1 Uncaught SyntaxError: Unexpected token '<'
js_media.min.js:1 Uncaught SyntaxError: Unexpected token '<'

I then tried adding this line:

ZoomMtg.setZoomJSLib( "https://dmogdx0jrul3u.cloudfront.net/1.7.8/lib", "/av" );

above where I do this:

ZoomMtg.preLoadWasm(); ZoomMtg.prepareJssdk();

and now the JS error goes away but is replaced by:
DevTools failed to load SourceMap: Could not load content for https://dmogdx0jrul3u.cloudfront.net/1.7.8/lib/webim.min.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE (Which might just be a chrome thing)

In any case I continue to only see a black screen but I noticed that my #zmmtg-root div is now:
<div id="zmmtg-root"><div class="meeting-app"><span></span><div class="loading-layer">0</div></div></div> but nothing else.

Also, within my Vue component, I added my own <div id="zoom-holder"></div> and in the code did this: $("#zoom-holder").append($("#zmmtg-root")); to move the zmmtg-root into the component and not directly on the body.

Any ideas? I’ve searched around in this forum for other people doing Vue integrations but haven’t found anything that looks like a solution.

Thanks in advance.

Which version?
I’m using zoomus/websdk version “1.7.8” and trying to get it working on Chrome at the moment.

Hey @mattbrand,

Not super familiar with view, can you use npm to install the Web SDK?

Also, checkout the sample app so you can see the code snippets and the dependencies:

Thanks,
Tommy

Yup, I used npm to install the package. Vue is node-based.

Hey @mattbrand I would agree with Tommy that using the Sample App as a way to isolate the issue to determine if it is a Vue.js related item, or not would be a good first step.

Could you test this and let us know please sir?

I just ran the sample app and it “mostly worked.” I get most of the embedded Zoom UI and can join the meeting (it told me that it couldn’t find a camera so I couldn’t start video) but seemed to generally be ok.

I’m going to try and compare dependencies and the libraries that are being used to see if that’s what’s going on.

I’m wondering how much of this might be the dependencies. I see there are dependencies on react and redux for example. Vue wouldn’t have react I don’t think and in Vue, its more common to use Vuex instead of redux (I think).

The ZoomMtg.join(meetConfig) method doesn’t return anything so I can’t tell if there’s an error.

All I see in the source is:

<div id="zmmtg-root">
   <div class="meeting-app">
      <span></span>
      <div class="loading-layer">0</div>
   </div>
</div>

Hey @mattbrand ,
Were you able to solve this issue?
I’m facing exactly the same problem.
No matter what I do, I see a black screen and no error messages in my Console whatsoever. I also see the DevTools warning message that you have.

Unfortunately not yet. I’m still waiting for help from Zoom and/or figure it out…

Hey @mattbrand and @susankya could you each provide additional information about your development/testing environment please?

  • OS / version
  • Browser / version
  • Any console.log errors
  • Any network errors (in devtools)
  • Recreation steps we can use to reproduce the black screen issue
  • MacOS Catalina (10.15.2)
  • Chrome (latest)
  • No console.log() errors. No output beyond the HTML output I posted previously.
  • No network errors that I can see
  • The steps are what I posted previously. The code I put it gets executed when the page is loaded. ZoomMtg.init() seems to work and then ZoomMtg.join(meetConfig) seems to do nothing but show the black screen. When I pass the values of meetConfig directly (without using the meetConfig variable, I get that syntax error from my original post.

Hey @mattbrand, @susankya,

Make sure you have the preload functions:

Can you share your code snippet of using the Web SDK so I can debug?

Thanks,
Tommy

      let meetConfig = response.data.meetConfig;
      ZoomMtg.setZoomJSLib(
        "https://dmogdx0jrul3u.cloudfront.net/1.7.8/lib",
        "/av"
      );
      ZoomMtg.preLoadWasm();
      ZoomMtg.prepareJssdk();
      $("#zoom_holder").append($("#zmmtg-root"));
      $("#zmmtg-root").show();
      ZoomMtg.init({
        leaveUrl: meetConfig.leaveUrl,
        isSupportAV: true,
        success: function() {
          console.log("Successfully initialized meeting");
          let methods = {
            success: function(res) {
              console.log(res);
            },
            error: function(res) {
              console.log(res);
            }
          };
          if (localUser.therapist) {
            ZoomMtg.join(Object.assign(meetConfig, methods));
          } else {
            Object.assign(methods, {
              participantId: meetConfig.participantId
            });
            ZoomMtg.join(Object.assign(meetConfig, methods));
          }
        }
      });

The preload functions are happening. meetConfig comes from the server before and looks like this:

{
  signature: "asdasdasdasd",
  meetingNumber: "1231431",
  apiKey: "1234123",
  userEmail: "foo@foo.com",
  userName: "Matt",
  leaveUrl: "http://...",
  participantId: "asdakjlkj231312"
}

Hey @mattbrand,

Are you removing the zmmtg-root element by default?

$("#zoom_holder").append($("#zmmtg-root"));
$("#zmmtg-root").show();

Please try not modifying the display properties of how the Zoom Web SDK gets placed in the page and let me know if that fixes the issue.

Thanks,
Tommy

No difference.

Same black screen. I see my message that the ZoomMtg.init() worked and I can see that ZoomMtg.join() is about to happen but there is no output from that at all.