Error - Unable to load web SDK dependencies when deployed onto server which causes a black screen with no meeting

Description
When trying to use the web SDK on our website, the dependencies for the meeting fail to load with a 403 error on our AWS Amplify test server. This issue doesn’t occur on local testing.

Browser Console Error
GET https://source.zoom.us/2.2.0/lib/a](https://source.zoom.us/2.2.0/11b/av/1501_js_media.min.js net: :ERR_ABORTED

Devtools failed to load source map: Could not load content for https://source.zoom.us/2.2.0/lib/webim.min.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Which Web Meeting SDK version?
[2.2.0]

Meeting SDK Code Snippets
import { ZOOM_API_KEY, ZOOM_LEAVE_URL, ZOOM_SIGNATURE_ENDPOINT } from ‘@utils/constants’;

import React from ‘react’;

import { useAuth } from ‘@context/auth/authContext’;

import { useRouter } from ‘next/router’;

import axiosInstance from ‘@utils/axios’;

export default function JoinLive() {

const { user } = useAuth();

let meetId;

let meetPassword;

const role = 2;

const router = useRouter();

React.useEffect(async () => {

    const { ZoomMtg } = await import('@zoomus/websdk');

    // console.log('checkSystemRequirements');

    // console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));

    ZoomMtg.setZoomJSLib('https://source.zoom.us/2.2.0/lib', '/av');

    // ZoomMtg.preLoadWasm();

    ZoomMtg.prepareWebSDK();

    ZoomMtg.i18n.load('en-US');

    ZoomMtg.i18n.reload('en-US');

    console.log('loaded zoom sdk');

    let lsRequest = { livestreamId: router.query.livestreamId };

    console.log(lsRequest);

    let response = await axiosInstance.put('next/livestream/update', lsRequest).catch((error) => {

        console.log('livestream fetch error: ', error);

        return;

    });

    console.log('Response: ', response);

    if (response?.data?.isSuccessful) {

        meetId = response?.data?.meet?.meetId;

        meetPassword = response?.data?.meet?.meetPassword;

        console.log(response.data.meet);

    }

}, [ ]);


const getSignature = (data) => {

    var meet_id = data.meet_id;

    var password = data.password;

    var user = data.user;

    console.log('########', meet_id, password);

    fetch(ZOOM_SIGNATURE_ENDPOINT + (role === 1 ? '_host' : '_attendee'), {

        method: 'POST',

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

        body: JSON.stringify({

            meetingNo: meet_id,

            password: password,

        }),

    })

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

        .then((response) => {

            console.log('zoom signature response: ', response);

            startMeeting(response.signature, response?.meetingNumber, response?.password, user);

        })

        .catch((error) => {

            console.error('Afjja3######', error);

        });

};

const startMeeting = (signature, meeting_number, password, user) => {

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

    // eslint-disable-next-line

    ZoomMtg.init({

        leaveUrl: ZOOM_LEAVE_URL,

        isSupportAV: true,

        disableRecord: false,

        success: (success) => {

            console.log(success);

            console.log('ZoomMtg.join parameters: ', signature, meeting_number, password, user);

            // eslint-disable-next-line

            ZoomMtg.join({

                signature: signature,

                meetingNumber: meeting_number,

                userName: user.email,

                apiKey: ZOOM_API_KEY,

                userEmail: user.email,

                passWord: password,

                success: (success) => {

                    console.log(success);

                    // eslint-disable-next-line

                    ZoomMtg.record({

                        record: true,

                    });

                },

                error: (error) => {

                    console.log(error);

                },

            });

        },

        error: (error) => {

            console.log(error);

        },

    });

};

const handleLiveJoin = () => {

    getSignature({

        meet_id: meetId,

        password: meetPassword,

        user: user,

    });

};

return (

    <>

        \
            \<link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.2.0/css/bootstrap.css" />

            \<link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.2.0/css/react-select.css" />

            \<script src="https://source.zoom.us/2.2.0/lib/vendor/react.min.js"></script>

            \<script src="https://source.zoom.us/2.2.0/lib/vendor/react-dom.min.js"></script>

            \<script src="https://source.zoom.us/2.2.0/lib/vendor/redux.min.js"></script>

            \<script src="https://source.zoom.us/2.2.0/lib/vendor/redux-thunk.min.js"></script>

            \<script src="https://source.zoom.us/2.2.0/lib/vendor/lodash.min.js"></script>

            \<script src="https://source.zoom.us/zoom-meeting-2.2.0.min.js"></script>

        \</head>

        \<button onClick={handleLiveJoin}>Join live</button>

    </>

);

}

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

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

Screenshots


Screenshot below from local testing where it does work

Hi, @santanoo.m,
Welcome to the Zoom Developer Forum and thank you for posting. Are you able to confirm if your server is returning the correct cross-origin headers? Here is our help documentation for implementation guidance :

Also, I kindly ask can you share the exact steps to reproduce (if applicable):

Steps to reproduce the behavior:

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

Let me know if this helps.

Best,
Donte

Hi @donte.zoom,
Sorry for the late reply, I’m not very knowledgeable about CORS.

The screenshot below shows the response for when trying to access 1501_js_media.min.js

The steps to replicate the problem aren’t easy to describe because the process of creating a meeting on our application are complicated.

I’m noticing an “Error from cloudfront” in the response headers. I’m not sure if that means anything though.

Thank you for your response, @santanoo.m! Based on the screenshot, it is unclear if the correct headers are configured for your server. Could you also a screenshot of the request headers sections? Please note, you can use our Cross-Origin Isolation help documentation to verify if the headers are correct as well.

Implementing Cross-Origin guide

Have you checked out the AWS Configuring cross-origin resource sharing (CORS) help documentation:

Let me know if this helps.

Best,
Donte

Here’s a screenshot of the request headers

I noticed something while testing locally on another device that it was loading a dependency from https://source.zoom.us/2.2.0/lib/av/1501_js_media.min.js (Has 403 error, Present in previous screenshots)

While locally on my device it was loading from https://source.zoom.us/2.2.0/lib/av/1506_js_media.min.js

@santanoo.m,

Hi, @santanoo.m,

It looks like the appropriate CORS are not set, which helps to explain why the dependency is not loading.

As noted, it is highly recommend to implement one of these three options offered in our Web SDK Gallery View support documentation. Once implemented, you can verify that the changes were applied to your site by entering either of the following in your browser console:

typeof SharedArrayBuffer === 'function'; // returns true or false

Or 

crossOriginIsolated; // returns true or false

Best,
Donte

We managed to fix the issue with it by changing the ZoomMtg.setZoomJSLib(‘https://source.zoom.us/2.2.0/lib’, ‘/av’); line to
ZoomMtg.setZoomJSLib(‘https://source.zoom.us/2.3.0/lib’, ‘/av’);

But now it’s come to our notice that on clicking the Participants button the meeting screen suddenly switches to black and displays an error saying React not defined.

Screenshot of error message:

Gald you were able to resolve the dependency issue. Another developer reported a similar issue recently. I’ve linked the post which includes the solution for your reference:

Let me know if that helps.

Thanks,
Donte

Unfortunately, that didn’t help as we had already included

<script src=“https://source.zoom.us/2.2.0/lib/vendor/react.min.js”>

in our code and changing to 2.3.0 didn’t help.

For the time being, we have disabled the button. I hope a proper solution for this will be available.

@santanoo.m,

Perhaps the mix of V.2.2.0 and 2.3.0 dependencies is at the root of the behavior you are seeing. If you are able, please test with the latest build of the Web SDK 2.3.0.

On the other hand, it is also worth sharing you can stay up-to-date with the latest news, updates, and fixes with our change log.

Best,
Donte

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