Missing JsMediaSDK_Instance

Hi guys, i try use zoom in my react application.
I install via npm the zoomus-jssdk (npm install zoomus-jssdk).
In my project y install all of dependencys. But when a run my project, throw me an error of JsMediaSDK_Instance is not defined.



1 Like

Hi @rodrigo

What version of React are you using?

Hi @michael_p.zoom im using “react”: “15.6.1”. But i was try also with “react”: “^16.8.6”. In both versions i have the same problem.

@rodrigo https://marketplace.zoom.us/docs/sdk/native-sdks/Web-Client-SDK/getting-started/integrate-the-sdk , whether you use this tutorial?

if you do that

  1. check the network panel. whether the browser download the “js_media.min.js”

  2. if not, could be you don’t invoke two functions.

ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

https://zoom.github.io/sample-app-web/ZoomMtg.html#prepareJssdk
https://zoom.github.io/sample-app-web/ZoomMtg.html#preLoadWasm

Hi, @JackYang.

I hit the same issue as @rodrigo , I also checked if those functions are being called, and yes, they are.
But the ‘prepareJssdk’ raises the error.

Hope you can help us.

@joeumar sorry about that, can you provide a demo code to me. I can produce this issue.

Sure, @JackYang.

I imported the jQuery in the /public/index.html file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Then I’ve created a ZoomComponent, importing the sdk:

import React from 'react';
import { ZoomMtg } from 'zoomus-jssdk';

function ZoomComponent() {
  console.log('checkSystemRequirements');
...

And inside it, put the code from the tutorial link you pasted above, using the meeting ID that I previously created.

Inside my App.js I use my ZoomComponent:

render() {
    return (
      <ZoomComponent />
    );
  }

After this, I hit this issue:

And that’s it.

@JackYang i was try without the ZoomMtg.preLoadWasm(); ZoomMtg.prepareJssdk(); and i have the same problem.

@JackYang my component code are this:

https://pastebin.com/PdztP4Hs

in my /public/index.html y import the jquery script:

@rodrigo Please make sure use react 15.6.1,
react have some issue with unmatch version.
and i test you code base on 1.3.8 cdn version.
it works
notice: zoomjssdk is SPA, it use the whole page. it will cover you element if you don’t set z-index.

"dependencies": {
	"react": "15.6.1",
	"react-dom": "15.6.1",
	"redux": "3.7.2",
	"react-redux": "5.0.6",
	"jquery": "^3.2.0",
	"lodash": "^4.17.4",
	"redux-thunk": "2.2.0"
}

ZoomMeeting.js

import React from 'react';
import { ZoomMtg } from 'zoomus-jssdk';


ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();


const ZoomMeeting = ({
    meetingId, username, apiKey, apiSecret
}) => {
    const insideMeeting = () => {
        const API_KEY = apiKey;

        /**
            * NEVER PUT YOUR ACTUAL API SECRET IN CLIENT SIDE CODE, THIS IS JUST FOR QUICK PROTOTYPING
            * The below generateSignature should be done server side as not to expose your api secret in public
            * You can find an eaxmple in here: https://marketplace.zoom.us/docs/sdk/native-sdks/Web-Client-SDK/tutorial/generate-signature
            */
        const API_SECRET = apiSecret;

        const meetConfig = {
            apiKey: API_KEY,
            apiSecret: API_SECRET,
            meetingNumber: meetingId,
            userName: username,
            passWord: '',
            leaveUrl: 'https://zoom.us',
            role: 0
        };

        ZoomMtg.generateSignature({
            meetingNumber: meetConfig.meetingNumber,
            apiKey: meetConfig.apiKey,
            apiSecret: meetConfig.apiSecret,
            role: meetConfig.role,
            success(res) {
                console.log('signature', res.result);
                ZoomMtg.init({
                    leaveUrl: 'http://www.zoom.us',
                    isSupportAV: true,
                    success() {
                        ZoomMtg.join(
                            {
                                meetingNumber: meetConfig.meetingNumber,
                                userName: meetConfig.userName,
                                signature: res.result,
                                apiKey: meetConfig.apiKey,
                                userEmail: 'email@gmail.com',
                                passWord: meetConfig.passWord,
                                success() {
                                    console.log('join meeting success');
                                },
                                error(res) {
                                    console.log(res);
                                }
                            }
                        );
                    },
                    error(res) {
                        console.log(res);
                    }
                });
            }
        });
    };
    return (
        <button type="button" onClick={insideMeeting}>Inside</button>
    );
};

export default ZoomMeeting;

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import ZoomMeeting from './ZoomMeeting';

const ZoomConfig = {
    apiKey: '',
    apiSecret: '',
    username: '1.3.8',
    meetingNumber: ''
};

ReactDOM.render(<ZoomMeeting meetingId={ZoomConfig.meetingNumber} username={ZoomConfig.meetingNumber} apiKey={ZoomConfig.apiKey} apiSecret={ZoomConfig.apiSecret} />, document.querySelector('#myapp'));

index.html

<!DOCTYPE html>
<head>
    <title>Zoom JSSDK</title>
    <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="node_modules/zoomus-jssdk/dist/css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="node_modules/zoomus-jssdk/dist/css/react-select.css" />

    <meta name="format-detection" content="telephone=no">
</head>
<body>

<div id="myapp" style="z-index: 99999999999;"></div>
<script src="node_modules/react/dist/react.min.js"></script>
<script src="node_modules/react-dom/dist/react-dom.min.js"></script>
<script src="node_modules/redux/dist/redux.min.js"></script>
<script src="node_modules/redux-thunk/dist/redux-thunk.min.js"></script>
<script src="node_modules/lodash/lodash.min.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>

<script src="./static/app.min.js"></script>

<script>

</script>
</body>
</html>
1 Like

@joeumar I see you use React 16, I think could be this issue.
you can see my previous comment.

@rodrigo @joeumar for react 16 support, we plan to do that in few months.

1 Like

@JackYang i use React 15.6.1
My dependecies are the following:

“dependencies”: {
“jquery”: “^3.2.0”,
“lodash”: “^4.17.4”,
“react”: “15.6.1”,
“react-dom”: “15.6.1”,
“react-redux”: “5.0.6”,
“react-scripts”: “2.1.8”,
“redux”: “3.7.2”,
“redux-thunk”: “2.2.0”,
“zoomus-jssdk”: “^1.3.8”,
“webpack”: “^4.26.1”,
“webpack-cli”: “^3.1.2”,
“webpack-dev-server”: “^3.1.10”
},

I think we need troubleshooting, you can add me your contract, and send me, we can plan a meeting.

Hi, All. Has anyone got around this missing JsMediaSDK_Instance issue?

I’m building an app and I cannot get passed this missing JsMediaSDK_Instance issue. I run both ZoomMtg.preLoadWasm() and ZoomMtg.prepareJssdk(), and I’ve verified that the corresponding files are fetched:

I am successfully joining the meeting though, in that I can see myself show up in another users meeting (he started it from the web). This is where I’m stuck every time:

I’m essentially just copying the ES6 style code straight from the example.

Does anyone see the issue? Or has anyone figured out a way passed this?

I can successfully run the local web-app example from here: https://github.com/zoom/sample-app-web which makes me think it’s something with the webpack config or with the framework I’m using .

Hey @vincent.beltrani,

A work around to this issue I found is including this line above ZoomMtg.preLoadWasm() and ZoomMtg.prepareJssdk().

ZoomMtg.setZoomJSLib('https://dmogdx0jrul3u.cloudfront.net/1.4.2/lib', '/av')

Let me know if this works for you!

Thanks,
Tommy

1 Like

Hi @tommy,

We are still getting this error some times even when using your suggestion but with the 1.7.2 version like this.

ZoomMtg.setZoomJSLib('https://dmogdx0jrul3u.cloudfront.net/1.7.2/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk(); 

Is there any other suggestion to fix this issue, or is the cause known? What should we do in this case?

Thanks in advance.

Complete error trace in chrome js console
react-dom.min.js:117 ReferenceError: JsMediaSDK_Instance is not defined
    at t.value (zoom-meeting-1.7.2.min.js:2)
    at t.value (zoom-meeting-1.7.2.min.js:2)
    at qi (react-dom.min.js:130)
    at ui (react-dom.min.js:133)
    at react-dom.min.js:158
    at unstable_runWithPriority (react.min.js:27)
    at Vc (react-dom.min.js:158)
    at Sc (react-dom.min.js:158)
    at Z (react-dom.min.js:156)
    at Zg (react-dom.min.js:159)
Bg @ react-dom.min.js:117
c.callback @ react-dom.min.js:126
Ag @ react-dom.min.js:116
zg @ react-dom.min.js:116
qi @ react-dom.min.js:131
ui @ react-dom.min.js:133
(anonymous) @ react-dom.min.js:158
unstable_runWithPriority @ react.min.js:27
Vc @ react-dom.min.js:158
Sc @ react-dom.min.js:158
Z @ react-dom.min.js:156
Zg @ react-dom.min.js:159
notify @ zoom-meeting-1.7.2.min.js:2
t.notifyNestedSubs @ zoom-meeting-1.7.2.min.js:2
n.notifySubscribers @ zoom-meeting-1.7.2.min.js:2
t.handleChangeWrapper @ zoom-meeting-1.7.2.min.js:2
a @ redux.min.js:1
(anonymous) @ redux-thunk.min.js:1
dispatch @ redux.min.js:1
success @ zoom-meeting-1.7.2.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
l @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
load (async)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
(anonymous) @ zoom-meeting-1.7.2.min.js:2
(anonymous) @ zoom-meeting-1.7.2.min.js:2
(anonymous) @ redux-thunk.min.js:1
(anonymous) @ redux.min.js:1
value @ zoom-meeting-1.7.2.min.js:2
m @ zoom-meeting-1.7.2.min.js:2
b @ zoom-meeting-1.7.2.min.js:2
success @ zoom-meeting-1.7.2.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
l @ jquery.min.js:2
i @ jquery.min.js:2
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
load (async)
add @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
each @ jquery.min.js:2
each @ jquery.min.js:2
Ae @ jquery.min.js:2
on @ jquery.min.js:2
send @ jquery.min.js:2
ajax @ jquery.min.js:2
i @ zoom-meeting-1.7.2.min.js:2
y @ zoom-meeting-1.7.2.min.js:2
join @ zoom-meeting-1.7.2.min.js:2
success @ zoom.js:45
z @ zoom-meeting-1.7.2.min.js:2
value @ zoom-meeting-1.7.2.min.js:2
m @ zoom-meeting-1.7.2.min.js:2
init @ zoom-meeting-1.7.2.min.js:2
(anonymous) @ zoom.js:25
setTimeout (async)
(anonymous) @ zoom.js:10
(anonymous) @ zoom.js:70
react-dom.min.js:117 TypeError: h.a.getCanvasInfo is not a function
    at t.adjustActiveVideo (zoom-meeting-1.7.2.min.js:2)
    at t.onWindowResize (zoom-meeting-1.7.2.min.js:2)
    at t.value (zoom-meeting-1.7.2.min.js:2)
    at qi (react-dom.min.js:130)
    at ui (react-dom.min.js:133)
    at react-dom.min.js:158
    at unstable_runWithPriority (react.min.js:27)
    at Vc (react-dom.min.js:158)
    at Sc (react-dom.min.js:158)
    at Z (react-dom.min.js:156)
Bg @ react-dom.min.js:117
c.callback @ react-dom.min.js:126
Ag @ react-dom.min.js:116
zg @ react-dom.min.js:116
qi @ react-dom.min.js:131
ui @ react-dom.min.js:133
(anonymous) @ react-dom.min.js:158
unstable_runWithPriority @ react.min.js:27
Vc @ react-dom.min.js:158
Sc @ react-dom.min.js:158
Z @ react-dom.min.js:156
Zg @ react-dom.min.js:159
notify @ zoom-meeting-1.7.2.min.js:2
t.notifyNestedSubs @ zoom-meeting-1.7.2.min.js:2
n.notifySubscribers @ zoom-meeting-1.7.2.min.js:2
t.handleChangeWrapper @ zoom-meeting-1.7.2.min.js:2
a @ redux.min.js:1
(anonymous) @ redux-thunk.min.js:1
dispatch @ redux.min.js:1
success @ zoom-meeting-1.7.2.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
l @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
load (async)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
(anonymous) @ zoom-meeting-1.7.2.min.js:2
(anonymous) @ zoom-meeting-1.7.2.min.js:2
(anonymous) @ redux-thunk.min.js:1
(anonymous) @ redux.min.js:1
value @ zoom-meeting-1.7.2.min.js:2
m @ zoom-meeting-1.7.2.min.js:2
b @ zoom-meeting-1.7.2.min.js:2
success @ zoom-meeting-1.7.2.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
l @ jquery.min.js:2
i @ jquery.min.js:2
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
load (async)
add @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
each @ jquery.min.js:2
each @ jquery.min.js:2
Ae @ jquery.min.js:2
on @ jquery.min.js:2
send @ jquery.min.js:2
ajax @ jquery.min.js:2
i @ zoom-meeting-1.7.2.min.js:2
y @ zoom-meeting-1.7.2.min.js:2
join @ zoom-meeting-1.7.2.min.js:2
success @ zoom.js:45
z @ zoom-meeting-1.7.2.min.js:2
value @ zoom-meeting-1.7.2.min.js:2
m @ zoom-meeting-1.7.2.min.js:2
init @ zoom-meeting-1.7.2.min.js:2
(anonymous) @ zoom.js:25
setTimeout (async)
(anonymous) @ zoom.js:10
(anonymous) @ zoom.js:70
react-dom.min.js:117 TypeError: S.send_socket is not a function
    at t.value (zoom-meeting-1.7.2.min.js:2)
    at Dg (react-dom.min.js:119)
    at Eg (react-dom.min.js:123)
    at ni (react-dom.min.js:128)
    at ui (react-dom.min.js:133)
    at react-dom.min.js:158
    at unstable_runWithPriority (react.min.js:27)
    at Vc (react-dom.min.js:158)
    at Sc (react-dom.min.js:158)
    at Z (react-dom.min.js:156)
Bg @ react-dom.min.js:117
c.callback @ react-dom.min.js:126
Ag @ react-dom.min.js:116
zg @ react-dom.min.js:116
qi @ react-dom.min.js:131
ui @ react-dom.min.js:133
(anonymous) @ react-dom.min.js:158
unstable_runWithPriority @ react.min.js:27
Vc @ react-dom.min.js:158
Sc @ react-dom.min.js:158
Z @ react-dom.min.js:156
Zg @ react-dom.min.js:159
notify @ zoom-meeting-1.7.2.min.js:2
t.notifyNestedSubs @ zoom-meeting-1.7.2.min.js:2
n.notifySubscribers @ zoom-meeting-1.7.2.min.js:2
t.handleChangeWrapper @ zoom-meeting-1.7.2.min.js:2
a @ redux.min.js:1
(anonymous) @ redux-thunk.min.js:1
dispatch @ redux.min.js:1
success @ zoom-meeting-1.7.2.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
l @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
load (async)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
(anonymous) @ zoom-meeting-1.7.2.min.js:2
(anonymous) @ zoom-meeting-1.7.2.min.js:2
(anonymous) @ redux-thunk.min.js:1
(anonymous) @ redux.min.js:1
value @ zoom-meeting-1.7.2.min.js:2
m @ zoom-meeting-1.7.2.min.js:2
b @ zoom-meeting-1.7.2.min.js:2
success @ zoom-meeting-1.7.2.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
l @ jquery.min.js:2
i @ jquery.min.js:2
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
load (async)
add @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
each @ jquery.min.js:2
each @ jquery.min.js:2
Ae @ jquery.min.js:2
on @ jquery.min.js:2
send @ jquery.min.js:2
ajax @ jquery.min.js:2
i @ zoom-meeting-1.7.2.min.js:2
y @ zoom-meeting-1.7.2.min.js:2
join @ zoom-meeting-1.7.2.min.js:2
success @ zoom.js:45
z @ zoom-meeting-1.7.2.min.js:2
value @ zoom-meeting-1.7.2.min.js:2
m @ zoom-meeting-1.7.2.min.js:2
init @ zoom-meeting-1.7.2.min.js:2
(anonymous) @ zoom.js:25
setTimeout (async)
(anonymous) @ zoom.js:10
(anonymous) @ zoom.js:70
react-dom.min.js:157 Uncaught ReferenceError: JsMediaSDK_Instance is not defined
    at t.value (zoom-meeting-1.7.2.min.js:2)
    at t.value (zoom-meeting-1.7.2.min.js:2)
    at qi (react-dom.min.js:130)
    at ui (react-dom.min.js:133)
    at react-dom.min.js:158
    at unstable_runWithPriority (react.min.js:27)
    at Vc (react-dom.min.js:158)
    at Sc (react-dom.min.js:158)
    at Z (react-dom.min.js:156)
    at Zg (react-dom.min.js:159)
value @ zoom-meeting-1.7.2.min.js:2
value @ zoom-meeting-1.7.2.min.js:2
qi @ react-dom.min.js:130
ui @ react-dom.min.js:133
(anonymous) @ react-dom.min.js:158
unstable_runWithPriority @ react.min.js:27
Vc @ react-dom.min.js:158
Sc @ react-dom.min.js:158
Z @ react-dom.min.js:156
Zg @ react-dom.min.js:159
notify @ zoom-meeting-1.7.2.min.js:2
t.notifyNestedSubs @ zoom-meeting-1.7.2.min.js:2
n.notifySubscribers @ zoom-meeting-1.7.2.min.js:2
t.handleChangeWrapper @ zoom-meeting-1.7.2.min.js:2
a @ redux.min.js:1
(anonymous) @ redux-thunk.min.js:1
dispatch @ redux.min.js:1
success @ zoom-meeting-1.7.2.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
l @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
load (async)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
(anonymous) @ zoom-meeting-1.7.2.min.js:2
(anonymous) @ zoom-meeting-1.7.2.min.js:2
(anonymous) @ redux-thunk.min.js:1
(anonymous) @ redux.min.js:1
value @ zoom-meeting-1.7.2.min.js:2
m @ zoom-meeting-1.7.2.min.js:2
b @ zoom-meeting-1.7.2.min.js:2
success @ zoom-meeting-1.7.2.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
l @ jquery.min.js:2
i @ jquery.min.js:2
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
load (async)
add @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
each @ jquery.min.js:2
each @ jquery.min.js:2
Ae @ jquery.min.js:2
on @ jquery.min.js:2
send @ jquery.min.js:2
ajax @ jquery.min.js:2
i @ zoom-meeting-1.7.2.min.js:2
y @ zoom-meeting-1.7.2.min.js:2
join @ zoom-meeting-1.7.2.min.js:2
success @ zoom.js:45
z @ zoom-meeting-1.7.2.min.js:2
value @ zoom-meeting-1.7.2.min.js:2
m @ zoom-meeting-1.7.2.min.js:2
init @ zoom-meeting-1.7.2.min.js:2
(anonymous) @ zoom.js:25
setTimeout (async)
(anonymous) @ zoom.js:10
(anonymous) @ zoom.js:70
zoom-meeting-1.7.2.min.js:2 Uncaught TypeError: v.a.connect_socket is not a function
    at ie (zoom-meeting-1.7.2.min.js:2)
    at N (zoom-meeting-1.7.2.min.js:2)
    at zoom-meeting-1.7.2.min.js:2
    at redux-thunk.min.js:1
    at onTick (zoom-meeting-1.7.2.min.js:2)
    at zoom-meeting-1.7.2.min.js:2
    at Map.forEach (<anonymous>)
    at zoom-meeting-1.7.2.min.js:2
```

Hey @pmogollon, thanks for posting and using Zoom!

Can you try using the Global CDN:

// For Global use source.zoom.us:
ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.2/lib', '/av'); 

I’m wondering if the requested resources are not returned in time before you call:

ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk(); 

ZoomMtg.Init()
ZoomMtg.Join()

Maybe add a timeout to allow the request to finish first.


Or try hosting the files locally:

ZoomMtg.setZoomJSLib('node_modules/@zoomus/websdk/dist/lib', '/av');

Thanks,
Tommy

Hi @tommy,

Thanks for the fast response.

We where having more issues with global cdn and we switched as this thread suggested.

I think thats the case, ill add a timeout and try hosting locally.

Ill post back if I still have the issue.

Thanks.

1 Like

Hey @pmogollon, happy to help!

Yes try hosting locally, or using the CDN with a timeout.

Let us know if you run into any issues.

Thanks,
Tommy