Getting Error JsMediaSDK_Instance is not defined in Zoom Integration To Reactjs

Meeting SDK Web
1

I Have Integrated to ReactJs With local installation of ZoomSDK.

Link followed.

As i am joining the meeting I am getting below error.
Uncaught ReferenceError: JsMediaSDK_Instance is not defined
at new e (zoomus-websdk.umd.min.js:2)
at C.value (zoomus-websdk.umd.min.js:2)
at C.value (react-hot-loader.development.js:714)
at C.value (zoomus-websdk.umd.min.js:2)
at C.value (react-hot-loader.development.js:704)
at commitLifeCycles (react-dom.development.js:19848)
at commitLayoutEffects (react-dom.development.js:22835)
at HTMLUnknownElement.callCallback (react-dom.development.js:189)
at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
at invokeGuardedCallback (react-dom.development.js:293)

Version:-
React Version : 16.13.1
ZoomSDK version 1.8.0

I have tried all the Methods Provider but didn’t help.

please help me on this ASAP.

2

Hey @muna.sethi,

Can you please share your Web SDK code snippet and steps to reproduce the issue so we can help?

Thanks,
Tommy

3

Hi,
Please find below is the code snippet for Web SDK. it’s running fine till Zoom init function . but giving issue when control reaches Join . and as i have mentioned in previous post it’s giving below error.
JsMediaSDK_Instance is not defined

const beginJoin = (meetingConfig) => {
ZoomMtg.init({
leaveUrl: window.location.href,
webEndpoint: meetingConfig.webEndpoint,
success: function () {
console.log(meetingConfig);
$.i18n.reload(meetingConfig.lang);
ZoomMtg.join({
meetingNumber: meetingConfig.mn,
userName: meetingConfig.name,
signature: meetingConfig.signature,
apiKey: meetingConfig.apiKey,
userEmail: meetingConfig.email,
passWord: meetingConfig.pwd,
success: function (res) {
console.log(“join meeting success”);
console.log(“get attendeelist”);
ZoomMtg.getAttendeeslist({});
ZoomMtg.getCurrentUser({
success: function (res) {
console.log(“success getCurrentUser”, res.result.currentUser);
},
});
},
error: function (res) {
alert(res.result);
},
});
},
error: function (res) {
console.log(res);
},
});

        ZoomMtg.inMeetingServiceListener('onUserJoin', function (data) {
            console.log('inMeetingServiceListener onUserJoin', data);
        });

        ZoomMtg.inMeetingServiceListener('onUserLeave', function (data) {
            console.log('inMeetingServiceListener onUserLeave', data);
        });

        ZoomMtg.inMeetingServiceListener('onUserIsInWaitingRoom', function (data) {
            console.log('inMeetingServiceListener onUserIsInWaitingRoom', data);
        });

        ZoomMtg.inMeetingServiceListener('onMeetingStatus', function (data) {
            console.log('inMeetingServiceListener onMeetingStatus', data);
        });
}

const onClickJoinMeeting = () => {
    let API_KEY = "KEY";
    let API_SECRET = "SECRET";
    var meetingConfig = testTool.getMeetingConfig();
    if (!meetingConfig.mn || !meetingConfig.name) {
        alert("Meeting number or username is empty");
        return false;
    }

    testTool.setCookie("meeting_number", meetingConfig.mn);
    testTool.setCookie("meeting_pwd", meetingConfig.pwd);

        var signature = ZoomMtg.generateSignature({
            leaveUrl: "/",
            meetingNumber: meetingConfig.mn,
            apiKey: API_KEY,
            apiSecret: API_SECRET,
            role: meetingConfig.role,
            success: function (res) {
                console.log(res.result);
                meetingConfig.signature = res.result;
                meetingConfig.apiKey = API_KEY;
                if (meetingConfig.china == "1") {
                    ZoomMtg.setZoomJSLib("https://jssdk.zoomus.cn/1.7.10/lib", "/av"); // china cdn option
                }                                      
                ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.10/lib', '/av');
                ZoomMtg.preLoadWasm();
                ZoomMtg.prepareJssdk();
                beginJoin(meetingConfig);
            },
        });
}

Also in my case i am not using all the script include of the dependent modules like React , React-dom .
because that is already installed through npm .

below is the Html file.

added in Header

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

Added in Body

  <script src="https://source.zoom.us/1.7.10/lib/vendor/jquery.min.js"></script>
4

Hey @muna.sethi,

Please try loading the files / scripts on page load instead of right before calling the join function.

Here is a good example using the Angular sample app:

Thanks,
Tommy

5

Tried giving it before the loading of files.

but still getting same error.

image
image1022×256 22.6 KB

React Code FYR :-

ZoomMtg.setZoomJSLib(‘https://source.zoom.us/1.7.10/lib’, ‘/av’);
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

const ZoomSample = () => {
…
const JoinMeeting = () => {
let API_KEY = “";
let API_SECRET = "”;
var meetingConfig = testTool.getMeetingConfig();
if (!meetingConfig.mn || !meetingConfig.name) {
alert(“Meeting number or username is empty”);
return false;
}

    testTool.setCookie("meeting_number", meetingConfig.mn);
    testTool.setCookie("meeting_pwd", meetingConfig.pwd);

        var signature = ZoomMtg.generateSignature({
            leaveUrl: "/",
            meetingNumber: meetingConfig.mn,
            apiKey: API_KEY,
            apiSecret: API_SECRET,
            role: meetingConfig.role,
            success: function (res) {
                console.log(res.result);
                meetingConfig.signature = res.result;
                meetingConfig.apiKey = API_KEY;
               
                let objDefaultDiv = document.getElementById("zmmtg-root");
                if (objDefaultDiv) {
                    objDefaultDiv.hidden = false;
                }
                console.log(joinUrl);
                beginJoin(meetingConfig);
            },
        });
}

}

also tried keeping in useEffect

const ZoomSample = () => {

  useEffect(() => {
        ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.10/lib', '/av');
        ZoomMtg.preLoadWasm();
        ZoomMtg.prepareJssdk();
}, []);
..............
const JoinMeeting = () => {
    let API_KEY = "********";
    let API_SECRET = "********";
    var meetingConfig = testTool.getMeetingConfig();
    if (!meetingConfig.mn || !meetingConfig.name) {
        alert("Meeting number or username is empty");
        return false;
    }

    testTool.setCookie("meeting_number", meetingConfig.mn);
    testTool.setCookie("meeting_pwd", meetingConfig.pwd);

        var signature = ZoomMtg.generateSignature({
            leaveUrl: "/",
            meetingNumber: meetingConfig.mn,
            apiKey: API_KEY,
            apiSecret: API_SECRET,
            role: meetingConfig.role,
            success: function (res) {
                console.log(res.result);
                meetingConfig.signature = res.result;
                meetingConfig.apiKey = API_KEY;
               
                let objDefaultDiv = document.getElementById("zmmtg-root");
                if (objDefaultDiv) {
                    objDefaultDiv.hidden = false;
                }
                console.log(joinUrl);
                beginJoin(meetingConfig);
            },
        });
}

}

6

Hey @muna.sethi,

Can you please share a sample GitHub repo with the issue so we can reproduce the issue and debug locally?

Thanks,
Tommy

7

Hi,
the Problem appears only when i keep the node_modules in different folder.

8

Hey @muna.sethi,

Yes, all the Web SDK files need to be accessible, as mentioned here:

Thanks,
Tommy

9

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