Zoom meeting SDK showing black screen after join in sample app

Meeting SDK Web
1

Hello. I’m facing issue with meeting sdk, it is showing a black screen after calling ZoomMtg.join. Same problem in my app and in sample app GitHub - zoom/meetingsdk-react-sample: Use the Zoom Meeting SDK in React

Meeting SDK Type and Version

  "dependencies": {
    "@zoom/meetingsdk": "^3.1.6",
    "react": "16.14.0",
    "react-dev-utils": "^12.0.1",
    "react-dom": "16.14.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^3.5.0"
  }

My code

import React from 'react';
import './App.css';
import { ZoomMtg } from '@zoom/meetingsdk';

ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();

function App() {
  function startMeeting() {
    document.getElementById('zmmtg-root').style.display = 'block'

    ZoomMtg.init({
      leaveUrl: 'http://localhost:3000',
      success: (success) => {
        console.log(success)

        // add correct values
        const sdkKey = ''; 
        const signature = ''; 
        const number = '';
        const password = '';

        ZoomMtg.join({
          sdkKey: sdkKey,
          signature: signature,
          meetingNumber: number,
          passWord: password,
          userName: "Username",
          userEmail: "test@test.com",
          success: (success) => {
            console.log(success)
          },
          error: (error) => {
            console.log(error)
          }
        })

      },
      error: (error) => {
        console.log(error)
      }
    })
  }

  return (
    <div className="App">
      <main>
        <h1>Zoom Meeting SDK Sample React</h1>
        <button onClick={startMeeting}>Join Meeting</button>
      </main>
    </div>
  );
}

export default App;

Two errors in console:

  1. zoomus-websdk-main-client.umd.min.js:2 Warning: Each child in a list should have a unique "key" prop.
  2. localhost/:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
2

Hi there @rust !

The react sample app should work straight out of the box once configured properly.

Can you explain a bit more what you use to generate the JWT/signature?

E.g. When I run the sample react app on my local machine I use this app alongside it to generate a JWT/signature: GitHub - zoom/meetingsdk-auth-endpoint-sample: Generate a Meeting SDK JWT to join Zoom meetings and webinars with the Meeting SDK.

For testing purposes I typically start the personal meeting number + passcode for the account I used to create the app on the marketplace (https://marketplace.zoom.us/) and then work to more complex scenarios from there once that works.

Let me know if this helps.

3

Forgot to close the topic. Yes, the problem was in the signature. Everything is working. Thanks.

Correct ruby code to generate signature

JWT.encode({
  sdkKey: sdk_key,
  mn: meeting_number,
  role: 0,
  iat: Time.now.to_i
  exp: 1.day.since.to_i,
  tokenExp: 3.days.since.to_i
}, client_secret, "HS256", { alg: 'HS256', typ: 'JWT' })
4

Great to hear it’s working for you now, feel free to reach out here in case you have additional questions or challenges.

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.