Description
I tried integrating the @zoomus/websdk to my React JS project and I’ve encountered several problems, managed to solve most of them but still encountered some problems that is very critical to our result. I installed the SDK with “npm install @zoomus/websdk” and import the module in the useEffect to prevent the Zoom CSS from overriding the CSS of my React app. I also add the required script and link components in the index.html header or wrapped between the Helmet component from the ‘react-helmet’ package in my own ZoomMeeting.js file to fix the Zoom Meeting CSS and be able to load the .min.js files that can’t be loaded from the node_modules, but from the following example URL:
“https://source.zoom.us/2.0.1/lib/av/1504_js_media.min.js”
“https://source.zoom.us/2.0.1/lib/av/1504_audio_simd.min.js”
I was able to launch the meeting successfully and be able to chat/message with other users, but neither them or me could see my Video and “Join Audio by Computer” button is disabled for me. I do not know how to debug this and requiring help to solve this as quickly as possible.
I also add the Cross-Origin-Trials token to my React project, but it’s still causing the no video problem. But when tried with the sample app, it is working fine.
Browser Console Error
The full error message or issue you are running into.
Which Web Meeting SDK version?
2.0.1
Meeting SDK Code Snippets
ZoomMeeting.js return div component:
return (
<div className="h-screen bg-black flex justify-center items-center">
<Helmet>
<script type="text/javascript" src="https://source.zoom.us/2.0.1/lib/av/1504_audio_simd.min.js"></script>
<script type="text/javascript" src="https://source.zoom.us/2.0.1/lib/av/1504_js_audio_process.min.js"></script>
<script type="text/javascript" src="https://source.zoom.us/2.0.1/lib/av/1504_js_audio_worklet.min.js"></script>
<script type="text/javascript" src="https://source.zoom.us/2.0.1/lib/av/1504_js_media_ie.min.js"></script>
<script type="text/javascript" src="https://source.zoom.us/2.0.1/lib/av/1504_js_media.min.js"></script>
<script type="text/javascript" src="https://source.zoom.us/2.0.1/lib/av/1504_sharing_m.min.js"></script>
<script type="text/javascript" src="https://source.zoom.us/2.0.1/lib/av/1504_sharing_mtsimd.min.js"></script>
<script type="text/javascript" src="https://source.zoom.us/2.0.1/lib/av/1504_sharing_s.min.js"></script>
<script type="text/javascript" src="https://source.zoom.us/2.0.1/lib/av/1504_sharing_simd.min.js"></script>
<script type="text/javascript" src="https://source.zoom.us/2.0.1/lib/av/1504_video_m.min.js"></script>
<script type="text/javascript" src="https://source.zoom.us/2.0.1/lib/av/1504_video_mtsimd.min.js"></script>
<script type="text/javascript" src="https://source.zoom.us/2.0.1/lib/av/1504_video_s.min.js"></script>
<script type="text/javascript" src="https://source.zoom.us/2.0.1/lib/av/1504_video_simd.min.js"></script>
<script type="text/javascript" src="https://source.zoom.us/2.0.1/lib/av/webim.min.js"></script>
{/* import local css for #zmmtg-root */}
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.0.1/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.0.1/css/react-select.css" />
</Helmet>
<div className="text-white">Loading</div>
</div>
);
Zoom import:
useEffect(() => {
loadZoomMeeting()
}, [])
const loadZoomMeeting = async () => {
// The import method below was used because for import { ZoomMtg } from '@zoomus/websdk', the ZoomMtg CSS will overide the project's React app global CSS and will cause full black screen throughout the web app and even after if you remove the black screen, it will also cause the web page to not be scrollable or buttons/text field to not be responsive. Hence, importing the module in useEffect.
await import("@zoomus/websdk")
.then(async (module) => {
try {
let module2 = await prepareLoadingWebSDK(module);
setZoomModule(module2)
}
catch (error) {
window.location.href = "/*"
}
})
}
const prepareLoadingWebSDK = async (module) => {
let ZoomMtg = module.ZoomMtg
await ZoomMtg.setZoomJSLib(`${process.env.REACT_APP_URL}/node_modules/@zoomus/websdk/dist/lib`, '/av');
// await ZoomMtg.setZoomJSLib('https://source.zoom.us/2.0.1/lib', '/av');
await ZoomMtg.preLoadWasm();
await ZoomMtg.prepareWebSDK();
return ZoomMtg;
}
const [zoomModule, setZoomModule] = useState(null)
const [courseData, setCourseData] = useState(null)
const history = useHistory()
const historyData = history.location.state
const param = useParams()
useEffect(() => {
if (zoomModule) {
onInitHandle()
}
}, [zoomModule])
const onInitHandle = () => {
zoomModule?.init({
leaveUrl: `${process.env.REACT_APP_URL}`,
isSupportAV: true,
disableCORP: !window.crossOriginIsolated,
screenShare: true,
disableRecord: false,
success: () => {
zoomModule?.join(
{
meetingNumber: courseData?.meeting_number,
userName: "Tony Stark",
signature: courseData?.signature,
apiKey: apiKey,
passWord: courseData?.pass_word,
success: () => {
console.log('join meeting success')
},
error: (res) => {
console.log('Error generating signature')
console.log(res)
}
}
)
},
error: (res) => {
console.log(res)
}
})
}
To Reproduce(If applicable)
Steps to reproduce the behavior:
- Go to ‘…’
- Click on ‘…’
- Scroll down to ‘…’
- See error
Screenshots
Could not upload screenshots of Code Snippets, UI and console/network tabs
Device (please complete the following information):
- Device: Macbook Pro
- OS: 11.4
- Browser: Chrome
- Browser Version: Version 94.0.4606.71 (Official Build) (x86_64)
Additional context
Add any other context about the problem here.
