Zoom web sdk shows blank screen after a loader "Joining meeting"

Description
Hi,
I’ve used zoom web sdk with react.js.
I tried joining in a meeting with zoom web sdk and then it is showing a loader that says “Joining meeting”, but nothing is happening after that except an empty black screen.

Which version?
version 1.8.3

Screenshots
Loader:
Screenshot (34)|690x387
Black Screen:

Device (please complete the following information):

  • Device: [Lenovo G50]
  • OS: [Windows]
  • Version: [10]
  • Browser:[Microsoft edge]

Additional context
My code:

import {ZoomMtg} from '@zoomus/websdk';

ZoomMtg.setZoomJSLib( "http://localhost:3000/node_modules/@zoomus/websdk/dist/lib", "/av" );

ZoomMtg.preLoadWasm();

ZoomMtg.prepareJssdk();

const API_KEY = "";

const API_SECRET = "";

let meetingConfig = window.location.hash.split("?")[1];

meetingConfig =  JSON.parse(decodeURI(meetingConfig).split("=")[1])

const signature = ZoomMtg.generateSignature({

    meetingNumber: meetingConfig.meeting_number,

    apiKey: API_KEY,

    apiSecret: API_SECRET,

    role: meetingConfig.meeting_role,

    success: function (res) {

      console.log('signature')

        meetingConfig.apiKey = API_KEY;

        joinMeet(res.result)

    },

});

function joinMeet (signature) {

  ZoomMtg.init({

      leaveUrl: 'http://localhost:3000/',

      success: function () {

        console.log(meetingConfig)

        ZoomMtg.join({

          meetingNumber: meetingConfig.meeting_number,

          userName: meetingConfig.display_name,

          signature: signature,

          apiKey: meetingConfig.apiKey,

          userEmail: meetingConfig.meeting_email,

          passWord: meetingConfig.meeting_pwd,

          success: function (res) {

            console.log("join meeting success");

            console.log("get attendeelist");

            ZoomMtg.getAttendeeslist({});

            ZoomMtg.getCurrentUser({

              success: function (res) {

                console.log("success getCurrentUser", res.result.currentUser);

              },

            });

          },

          error: function (res) {

            console.log(res);

          },

        });

      },

      error: function (res) {

        console.log(res);

      },

    });

  

    ZoomMtg.inMeetingServiceListener('onUserJoin', function (data) {

      console.log('inMeetingServiceListener onUserJoin', data);

    });

  

    ZoomMtg.inMeetingServiceListener('onUserLeave', function (data) {

      console.log('inMeetingServiceListener onUserLeave', data);

    });

  

    ZoomMtg.inMeetingServiceListener('onUserIsInWaitingRoom', function (data) {

      console.log('inMeetingServiceListener onUserIsInWaitingRoom', data);

    });

  

    ZoomMtg.inMeetingServiceListener('onMeetingStatus', function (data) {

      console.log('inMeetingServiceListener onMeetingStatus', data);

    });

}```

Hey @krrish,

Happy to help! Do you see any errors in the browser console?

Thanks,
Tommy

Hey @tommy,

I get about 20 errors as you can see in the screen shot, most of them occur in “zoomus-websdk.umd.min.js”

and this is the info I get in the log

Hey @krrish,

Since you are using the Web SDK in React, can you checkout this React sample app I have made:

Thanks,
Tommy

Hey @tommy,

Thank you for the help, I got it working now.
I’ve another question, I would like to let my users log into their zoom accounts through my website/app and then let them use zoom for creating or joining meetings.
Is there a way I could do that?

Hey @krrish,

Thank you for your question. Just to clarify, are you saying that you would like to log the users in through your website and create/join the meeting from the website too? Or, are you saying you would like to log in the user through your website and then continue to have them use the Zoom App creating and joining meetings?

I would like to let my users log into their zoom accounts through my website/app

In order to accomplish this, you can use an OAuth app flow. In this instance, when you send a user to the authorization endpoint, they will have the opportunity to log in or sign up before being redirected back to your website.

then let them use zoom for creating or joining meetings.

In terms of creating meetings, this can be done via the Create Meeting API. However, it’s important to note that the meeting cannot be started from the Web SDK unless the meeting is owned by the same owner of the JWT app. Instead, you’ll want to start meetings from the Zoom app itself. Once a meeting is started, you can join it from the Web SDK.

You can find more information on the forum:

I hope that helps! Let me know if you have any questions.

Thanks,
Max

Hey @MaxM,

Thanks for the reply.

Thank you for your question. Just to clarify, are you saying that you would like to log the users in through your website and create/join the meeting from the website too? Or, are you saying you would like to log in the user through your website and then continue to have them use the Zoom App creating and joining meetings?

I would like to do everything in my website itself.

In order to accomplish this, you can use an OAuth app flow. In this instance, when you send a user to the authorization endpoint, they will have the opportunity to log in or sign up before being redirected back to your website.

Is there any example code to start the meeting

Hey @krrish,

Thank you for providing additional information. I understand that you are looking to integrate Zoom with your website. If you would like to see an example of using the Web SDK with, please see our Sample App. We don’t have an example of authenticating user with OAuth in that example but I’ve included some information below that should be helpful.

To that end, I should note that we offer various integration capabilities, which include our API endpoints and our SDKs.

If you wish to embed Zoom on your site or app, you will likely want to use a combination of our APIs (for creating and scheduling live meetings) and our Web SDK (for embedding the Zoom Meeting/video experience on your site/app). Details below on each of these.

API and SDK Overview
We offer both APIs and SDKs for you to consider when planning an integration/implementation in an application. You may find the below information helpful for your web developer.

Here are some APIs which you can consider using within your application:
Create Meetings: To create a meeting (including instant meetings)
List Meetings: To Display the schedule Meetings
Retrieve Meeting: To get a specific meeting

We also have a Web SDK that you can consider integrating into your website:

Authentication Methods
We have two authentication types:

JSON Web Token (JWT):
JWT is an account-wide app and is available to all the admins and owners of the account. You can have only 1 JWT marketplace app registered in your account. You can generate multiple JWT tokens using the JWT keys, and the tokens operate independently of each other until expired or the credentials have been changed.

A JWT token will contain all the permissions, and there is no way to restrict it. A JWT token is only valid for your account.

To know more, please visit: https://marketplace.zoom.us/docs/guides/auth/jwt

OAuth 2.0:
You can use an OAuth App if you want to have limited permissions for your token. To set up access credentials and request scopes for your app, create an OAuth app on the Marketplace. Follow the Create an OAuth App guide for a full walkthrough.
OAuth2 endpoints are located at https://zoom.us/oauth/.

Depending on the App type (Account Level or User Managed), the app needs to be authorized by either the account admin or the user. To know more, please visit: https://marketplace.zoom.us/docs/guides/build#understanding-app-types

I hope that helps! Let me know if you have any questions.

Thanks,
Max