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