Zoom JS SDK React Packaging


#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():