Web SDK via Vue (Black Screen)

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.

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

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.

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

Hi.

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

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.

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

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

Hey @mattbrand,

Can you try upgrading to version 1.7.10?

If that does not work, feel free to email your Web SDK code snippet to developersupport@zoom.us for us to take a look.

Thanks,
Tommy

Now its telling me the signature is invalid.

If I “retry” a few times, it sometimes eventually joins (but only as the host). The participant, after a few retries, I get a Captcha button, that when clicked, pops up a window that doesn’t actually have a captcha, but rather just a confirm button. When I click that, the pop up goes away and I get a “Failed to join the meeting” message.

In the console, I see this error:

{method: "join", status: false, result: "The current sdk version doesn't support register m…ng/webinar, please upgrade to the latest version.", errorMessage: "Fail to join the meeting.", errorCode: 1}
errorCode: 1
errorMessage: "Fail to join the meeting."
method: "join"
result: "The current sdk version doesn't support register meeting/webinar, please upgrade to the latest version."
status: false

I will email the code I’m using to create the signature and start the meeting.

Hey @mattbrand,

That error means that the Web SDK does not support joining meetings/webinars with registration required.

This will be available in version 1.8.0:

Thanks,
Tommy