@zoomus/websdk 2.0.1 Video and audio is not working with black screen


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:


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?

Meeting SDK Code Snippets

ZoomMeeting.js return div component:

return (
        <div className="h-screen bg-black flex justify-center items-center">
                <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" />
            <div className="text-white">Loading</div>

Zoom import:

useEffect(() => {
    }, [])
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);
            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) {
    }, [zoomModule])
const onInitHandle = () => {
            leaveUrl: `${process.env.REACT_APP_URL}`,
            isSupportAV: true,
            disableCORP: !window.crossOriginIsolated,
            screenShare: true,
            disableRecord: false,
            success: () => {
                        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')
            error: (res) => {

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

  1. Go to ‘…’
  2. Click on ‘…’
  3. Scroll down to ‘…’
  4. See error


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.

1 Like

Help me Connection time out message is there
i have given below…
ZoomMtg.setZoomJSLib(‘https://dmogdx0jrul3u.cloudfront.net/1.9.5/lib’, ‘/av’);

This is the UI. ‘Join Audio by Computer’, ‘Start Video’, ‘Share Screen’ buttons are all disabled

Hey @adam199,

Thank you for reaching out to the Zoom Developer Forum. When you are running your app, are you serving over HTTPS?

You also mentioned that you implemented Cross Origin Isolation. When you run the command from our guide on Improving Web SDK Performance does it verify that SharedArrayBuffer is running?

typeof SharedArrayBuffer ==='function'


Hey @MaxM

For localhost, it’s on HTTP and my team also tested on the URL which serves over HTTPS. This function:

typeof SharedArrayBuffer ==='function'

For the command above, it was one of the first thing we ran to test the Cross Origin Trials and it returned true for our URL.

Initially for both, many of the features were not functioning so we considered a different approach on the architecture of using the Zoom Web SDK, so we changed our way of importing the Zoom Module like how we import our other React components. With this method, we had to override the CSS of Zoom Module, with the id of “zmmtg-root”.

After changing the architecture, my video and the client’s video were successfully displayed in the Zoom Meeting. The buttons were also functioning, but the CSS in the meeting might be a bit off for the pop up menu, which made part of it display off screen

Is there something that I might have missed which cause this?

This is also another one of the pop up menu for changing the view (Gallery/Speaker)

Hey @adam199 ,

Looks like you have not imported the Zoom Client View CSS:


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