Reactjs Websdk importing causes black screen entire project

While importing websdk in react it’s showing a black in entire project

import React,{useEffect} from “react”;

import {ZoomMtg} from ‘@zoomus/websdk’;

function App() {

var signatureEndpoint = ‘’

var apiKey = ‘’

var meetingNumber = ‘’

var role = 0

var leaveUrl = ‘http://localhost:3000

var userName = ‘React’

var userEmail = ‘’

var passWord = ‘’

useEffect(()=>{

ZoomMtg.preLoadWasm();

ZoomMtg.prepareWebSDK();

},)

function getSignature(e) {

e.preventDefault();

fetch(signatureEndpoint, {

  method: 'POST',

  headers: { 'Content-Type': 'application/json' },

  body: JSON.stringify({

    meetingNumber: meetingNumber,

    role: role

  })

}).then(res => res.json())

.then(response => {

  startMeeting(response.signature)

}).catch(error => {

  console.error(error)

})

}

function startMeeting(signature) {

document.getElementById('zmmtg-root').style.display = 'block'

ZoomMtg.init({

  leaveUrl: leaveUrl,

  isSupportAV: true,

  success: (success) => {

    console.log(success)

    ZoomMtg.join({

      signature: signature,

      meetingNumber: meetingNumber,

      userName: userName,

      apiKey: apiKey,

      userEmail: userEmail,

      passWord: passWord,

      success: (success) => {

        console.log(success)

      },

      error: (error) => {

        console.log(error)

      }

    })

  },

  error: (error) => {

    console.log(error)

  }

})

}

return (

<div >

    <h1>Zoom WebSDK Sample React</h1>

    <button onClick={getSignature}>Join Meeting</button>

</div>

);

}

export default App;

Error
showing a black screen ,ui hidden with that and while inpspect i can see that

have some css property width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: black; and when i change the delete position property i can see the ui

Which Web Client SDK version?
@zoomus/websdk”: “^1.9.1”,

To Reproduce(If applicable)
Steps to reproduce the behavior:

Screenshots

Device (please complete the following information):

  • Browser: Chrome

Hi @teamayka,

I can see from your screenshot that there are 3x console errors. Please could you share them with us?

Many thanks,
Alex

Hey @teamayka ,

Here is our Web SDK React sample app if you would like to see a working example of how to use the Web SDK with react:

CC @alexmayo ,

Thanks,
Tommy

1 Like