I am having an issue with the web sdk inside a react app. I have a complete blank page where I am loading the zoom player. The UI breaks and it doesn’t work well, I can’t open the chat properly, the more menu doesn’t work and if I open the page in a mobile using chrome it won’t work. Can you hint me on how to fix this?
import React, { Component } from 'react'
import { ZoomMtg } from '@zoomus/websdk'
class ZoomPlayer extends Component {
componentDidMount() {
const API_KEY = 'x'
const API_SECRET = 'x'
const meetConfig = {
meetingNumber: x,
userName: 'Student' + String(Math.round(Math.random() * 100)),
passWord: x,
leaveUrl: ''
}
ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.4/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
ZoomMtg.generateSignature({
meetingNumber: meetConfig.meetingNumber,
apiKey: API_KEY,
apiSecret: API_SECRET,
role: 1,
success (res) {
console.log('signature', res.result)
ZoomMtg.init({
leaveUrl: meetConfig.leaveUrl,
disableCallOut: true,
disableRecord: true,
isSupportQA: false,
isSupportCC: false,
showPureSharingContent: false,
screenShare: false,
disableJoinAudio: false,
audioPanelAlwaysOpen: false,
isSupportChat: true,
videoDrag: false,
disableInvite: true,
success () {
ZoomMtg.join(
{
meetingNumber: meetConfig.meetingNumber,
userName: meetConfig.userName,
signature: res.result,
apiKey: API_KEY,
passWord: meetConfig.passWord,
success () {
console.log('join meeting success')
},
error (res) {
console.log('Error generating signature')
console.log(res)
}
}
)
},
error (res) {
console.log(res)
}
})
}
})
}
render () {
return (
<div id="zmmtg-root"></div>
)
}
}
export default ZoomPlayer