Zoom JS SDK React Packaging

Meeting SDK Web
1

Hello,

I am having issues including the Zoom JS SDK into my React JS project. I’ve tried emulating what was on the example web application, but putting the script tag that includes the Zoom SDK in the HTML causes a problem. The Zoom SDK is loaded before the other libraries that it depends on such as React and Redux. (We’ve installed these libraries through NPM).

Would it be possible to include the Zoom SDK on NPM to make this integration easier? Or maybe provide a tarball that includes the Zoom SDK?

2

How are you loading these (React and Redux) via your index file?

Make sure they get included before you add the zoom meeting script

3

We used NPM to install the dependencies of the Zoom JS SDK. Then when we run the React app, which was created by create-react-app command (most React apps are created like that), all the packages which were installed through NPM gets bundled into a single javascript file that gets included in our index.html file as a script tag. We can’t just include a script tag that includes the Zoom SDK into the html file directly because it will run before the bundled javascript libraries. 

One work around idea was to manually append a script tag that includes the Zoom SDK after the bundle script tag has been included in the HTML through DOM manipulation. But that causes React rendering issues and the library does not exhibit the correct behavior. As an example, when we try to initialize a zoom meeting, the callback functions aren’t getting called, neither in success nor error. The zoom library is included however. In the developer console “window.ZoomMtg” is defined.

Is there a way the Zoom JS SDK can be packaged just like an NPM package so that we can include this locally without having to edit the HTML DOM?

4

Unfortunately it’s not setup that way currently.

 

I tested this and the issue appears to be that React is not available in the global scope, even when bundled with react/webpack it’s not available globally.

The real problem is that the zoommeeting.js doesn’t have these dependencies included, that they are external

hence: 
<script src=“lib/react.min.js”></script>
<script src=“lib/react-dom.min.js”></script>
<script src=“lib/redux.min.js”></script>
<script src=“lib/redux-thunk.min.js”></script>
<script src=“lib/jquery.min.js”></script>
<script src=“lib/jquery.i18n.js”></script>
<script src="https://source.zoom.us/zoom-meeting-1.0.0.min.js"></script>

5

Do you happen to have any suggestions how we would include the Zoom JS SDK in a React project? 

6

We made some progress by including all of the script tags in the index.html body like so:

\<script src="https://unpkg.com/react@15.1.0/dist/react.js"\>\</script\>
\<script src="https://unpkg.com/react-dom@15.1.0/dist/react-dom.js"\>\</script\>
\<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.js"\>\</script\>
\<script src="./lib/redux-thunk.min.js"\>\</script\>
\<script
 src="https://code.jquery.com/jquery-1.12.4.js"
 integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
 crossorigin="anonymous"\>\</script\>
\<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"\>\</script\>
\<script src="./lib/jquery.i18n.js"\>\</script\>
\<script src="./lib/zoom-meeting-1.0.0.min.js"\>\</script\>

We can now successfully call ZoomMtg.init() and ZoomMtg.leaveMeeting(). However, when we call ZoomMtg.join(), we successfully show up in the Host’s list of participants, but the Zoom UI does not show up for the participant. We can’t see any of the video or screen share or anything from the participant’s point of view. None of the UI renders. Do you have any suggestions on where to go from here? We get an error stack trace like this after calling ZoomMtg.join():

912×897
905×219

7

Any new developments with being able to integrate the Zoom JS SDK into a React JS project?

8

Hey @dpearson2699,

Yes you can use the Zoom Web SDK in a react project!

Follow our docs here:

Thanks,
Tommy

9

Hi Tommy,

Thanks for the feedback. However I’m trying to load the zoom JS SDK in my nextjs application. As such, instead of the standard setup, I’m loading all packages through npm, bundling with webpack and setting the global jQuery variables in the webpack externals section. When loading a page, I now get an error referencing circular structures when webpack tries to bundle a specific page and this error happens as soon as I interact with the zoomjs sdk. Are there any known reasons why zoom can’t work as a regular old non module in an es6 project that could shed some light on this?

1 Like
10

Hey @danielblignaut,

Can you share a github link to your code and steps to reproduce the error?

Also please show a screenshot of the error message.

Thanks,
Tommy

11

@danielblignaut try to use next steps:

  1. npm install customize-cra, react-app-rewired -D

  2. add config-overrides.js file in project root

const { override, addWebpackAlias } = require(‘customize-cra’);

module.exports = override(
addWebpackAlias({
‘jQuery’: ‘jquery’
})
);

its rewrite webpack config and avoid CRA eject

  1. update your packege.json “start”: “react-scripts->react-app-rewired start”,

  2. add to end of … in public/index.html

  3. try to import { ZoomMtg } from ‘zoomus-jssdk’;

its not good solution, because we modify CRA cofig/run sripts - but I didnt found better way to resolve issue

12

Hey @frayeralex,

What specifically is the issue?

Are you running the latest version, Web SDK 1.7.0?

https://marketplace.zoom.us/docs/changelog

Thanks,
Tommy

13

Hi @tommy,

awesome - I try to set up web version zoom-SDK a few days ago, and all attempts to run SDK in React SPA was failed. Today I update from 1.6.1 to 1.7 version and it runs, with console warnings))) but it runs))

but made “eject create-react-app” only to configure alias jQuery -> jquery (didn’t use approach which I describe 2 days ago)))

thx for fix

1 Like
14

Hey @frayeralex,

Happy to hear it is working after upgrading to 1.7.0! :slight_smile:

Thanks,
Tommy

1 Like