Web SDK via Vue (Black Screen)

Meeting SDK Web
1

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.

2

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

3

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

4

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?

5

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.

6

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>
7

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.

8

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

9

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
10
  • 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.
11

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

12 
      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"
}
13

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

14

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.

15

Hey @mattbrand,

It is most likely an issue with your ZoomMtg.join() code. Can you make sure it matches the same format as the sample app and docs?

ZoomMtg.join({
          signature: signature,
          meetingNumber: this.meetingNumber,
          userName: this.userName,
          apiKey: this.apiKey,
          userEmail: this.userEmail,
          passWord: this.passWord,
          success: (success) => {
            console.log(success)
          },
          error: (error) => {
            console.log(error)
          }
        })

Thanks,
Tommy

16

A bit of progress…

I think part of the issue was that for my meeting, there is no password - so it was, at first, saying it couldn’t toString null…so I tried passing in passWord: "" and then it got beyond that…now, I am getting 2 different errors (one for the host and one for the participant):

host: “Your connection has timed out and you cannot join the meeting. Verify your network connectivity and try again.”

The participant (a different browser) is getting this error in the console:

{ method: "join", status: false, result: null, errorMessage: "participantId length > 16", errorCode: 4003 }

To generate that ID, I’m using the "meetings/#{zoom_meeting_id}/registrants" endpoint - and getting a string back that is 22 characters long.

17

Hey @mattbrand,

Happy to hear you are making progress! :slight_smile:

Can you share your Web SDK signature so I can debug?

The participantId field is no longer supported, so not using it will fix the issue. :slight_smile:

Thanks,
Tommy

18

Hi.

Thanks for the tip on removing participantId. Now I’m only getting the timeout error. Here is an example of the signature:
``

I am testing with Chrome and Firefox. In Chrome, I am logged in as the “participant” and in Firefox I’m logged in as the “host”. Occasionally, but not always, the host seems to almost work. In the participant case, how does the SDK know its the participant wiithout the participantId parameter?

The only difference in the signature is the role:

        role = user.host? ? 1 : 0
        data = Base64.urlsafe_encode64(ENV['ZOOM_API_KEY'] + @meeting["id"].to_s + time + role.to_s)
        hash = Base64.urlsafe_encode64(OpenSSL::HMAC.digest(OpenSSL::Digest.new('sha256'), ENV['ZOOM_API_SECRET'], data))
        tempStr = ENV['ZOOM_API_KEY'] + '.' + @meeting["id"].to_s  + '.' + time + '.' + role.to_s + '.' + hash
        @signature = Base64.urlsafe_encode64(tempStr).gsub('+', '-').gsub('/', '_').gsub(/#{Regexp.escape('=')}+$/, '')

Am I do something wrong or missing something that I didn’t see in the documentation?

Thanks again.

19

Hey @mattbrand,

Do you mind sharing your code in a github repo so I can debug?

The Web SDK assigns it’s own participant ID to each participant.

Can you try turning off the waiting room setting for the meeting and try again?

Thanks,
Tommy

20

Hi. I tried setting the waiting_room to false where I create the meeting but that had the same result.

It seems that if I click “retry” enough times, it might eventually connect…but not in a pattern I can figure out.

If you have an email address I can use, I’ll send some code to look at but I’m not comfortable sharing in a public forum.

Thanks