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_Purnell 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, @Prod_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, @Prod_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.

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

@Prod_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

@Prod_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.