Javascript error in using Web SDK

Description
I am trying to use Zoom through Web SDK in my website, but I am getting this javascript error

Error
zoom-meeting-1.7.5.min.js:2 Uncaught TypeError: Cannot read property ‘append’ of null
at zoom-meeting-1.7.5.min.js:2
at o (zoom-meeting-1.7.5.min.js:2)
at Object. (zoom-meeting-1.7.5.min.js:2)
at n (zoom-meeting-1.7.5.min.js:2)
at Object. (zoom-meeting-1.7.5.min.js:2)
at n (zoom-meeting-1.7.5.min.js:2)
at Module. (zoom-meeting-1.7.5.min.js:2)
at n (zoom-meeting-1.7.5.min.js:2)
at Module. (zoom-meeting-1.7.5.min.js:2)
at n (zoom-meeting-1.7.5.min.js:2)

Thanks
BLR

1 Like

Hey @blr,

Can you please provide steps to reproduce this issue? I have not seen this before. :slight_smile:

Thanks,
Tommy

Same here:

and even here:

where no wordpress script are loaded (‘e.g. jQuery’)

After added Zoom SDK via CDN

For a moment I solved putting

    <script src="https://source.zoom.us/zoom-meeting-1.7.5.min.js"></script>

in the footer

Hey @Cristian,

Yes, please make sure to include the Zoom scripts.

Thanks,
Tommy

HI @tommy, thanks for the answer.
It should be better to specify the correct order of the JS, especially when you use CryptoJS and js-base64

Kind Regards

1 Like

Hey @Cristian,

Thanks for the suggestion! Did you get it working?

-Tommy

I used the sample app finally thansk!

1 Like

Happy to hear you go it working! :slight_smile:

Thanks,
Tommy

Hey @tommy I am facing the similar error on integrating Web SDK:
zoomus-websdk.umd.min.js:2 Uncaught TypeError: Cannot read property ‘0’ of null
at v (zoomus-websdk.umd.min.js:2)
at combination (combineReducers.js:120)
at dispatch (createStore.js:165)
at index.js:14
at Object.zmg_initMeetingConfig (bindActionCreators.js:3)
at s.value (zoomus-websdk.umd.min.js:2)
at sentryWrapped (index.js:3204)
at A (zoomus-websdk.umd.min.js:2)
at Object.init (zoomus-websdk.umd.min.js:2)
at ZoomCall.js:74

Below are the scripts file I have added in my index.html (Removed < before script as the whole line was getting invisible ):
script src=“https://source.zoom.us/1.7.10/lib/vendor/react.min.js”>
script src=“https://source.zoom.us/1.7.10/lib/vendor/react-dom.min.js”>
script src=“https://source.zoom.us/1.7.10/lib/vendor/redux.min.js”>
script src=“https://source.zoom.us/1.7.10/lib/vendor/redux-thunk.min.js”>
script src=“https://source.zoom.us/1.7.10/lib/vendor/jquery.min.js”>
script src=“https://source.zoom.us/1.7.10/lib/vendor/lodash.min.js”>
script src=“https://source.zoom.us/zoom-meeting-1.7.10.min.js”>

Below is how I am generating signature from Django:

            import hashlib 
            import hmac
            import base64
            import time
            timestamp = int(round(time.time() * 1000)) - 30000
            string_message = settings.ZOOM_API_KEY + str(request.GET.get('meeting_number')) + str(timestamp) +\
                             str(request.GET.get('role'))
            message = base64.b64encode(bytes(string_message, 'utf-8'))
            secret = bytes(settings.ZOOM_API_SECRET, 'utf-8')
            hashing = hmac.new(secret, message, hashlib.sha256)
            hashing = base64.b64encode(hashing.digest())
            hashing = hashing.decode("utf-8")
            temp_string = "%s.%s.%s.%s.%s" % (settings.ZOOM_API_KEY, str(request.GET.get('meeting_number')), str(timestamp),
                                              str(request.GET.get('role')), hashing)
            signature = base64.b64encode(bytes(temp_string, "utf-8"))
            signature = signature.decode("utf-8")
            return JsonResponse({'signature' :signature.rstrip("=")}) 

I am using ReactJS for client side code. I am generating signature from my backend in Django and then initializing Zoom in React:

    ZoomMtg.init({
              disableRecord: false,
              videoDrag: true,
              sharingMode: 'both',
              success: () => {
                ZoomMtg.showRecordFunction({
                  show: true
                });
                ZoomMtg.join(
                  {
                    meetingNumber: {MEETING_NUMBER},
                    userName: '',
                    signature: resp.data.signature,
                    apiKey: process.env.REACT_APP_ZOOM_API_KEY,
                    passWord: '',
                    success: (res) => {
                      console.log('join meeting success:', res);
                    },
                    error: (res) => {
                      console.log('Error point 1:', res);
                    }
                  }
                );
              },
              error: (res) => {
                console.log('Error point 2:', res);
              }
            });

Please have a look why this issue would have occurred.

Hey @vijay.singh,

Can you please share a github repo with this issue so I can reproduce it locally and debug?

Thanks,
Tommy

Hey @tommy

Below are the GitHub repo’s each for ReactJS and Django respectively and able to reproduce the error in this.

Hoping for a sooner reply. Thanks in advance.

Hey @vijay.singh,

You are missing the leaveUrl property in your ZoomMtg.init({}) function.

Please add it and it will work:

  ZoomMtg.init({
                disableRecord: false,
                videoDrag: true,
                sharingMode: 'both',
                leaveUrl: 'https://zoom.us',
                success: (res) => {

Thanks,
Tommy

Hey @tommy,

Thank you so much the issue was this only. However I intentionally didn’t want to provide leaveUrl because after the end of the meeting I don’t want to redirect the user to a different webpage since I have to integrate the SDK in my web app so after end of meeting just I want to make video call disappear from DOM and no redirecting to different page should be there. How to achieve this?

Hey @vijay.singh,

Happy to help! :slight_smile: Glad we figured out the issue!

Currently the Web SDK requires the leaveUrl. Maybe you could navigate to the same page, or a post meeting page of sorts?

Thanks,
Tommy

Hi @tommy,

I didn’t undestand this statement, can you please clarify it for me?

Hey @vijay.singh,

Basically a “Thank you, this meeting has ended” page. You have many options here depending on how you want to handle the post meeting flow.

Thanks,
Tommy

Hello @tommy
While init the zoom meeting I got Uncaught TypeError: Cannot read property ‘0’ of null
I set leaveUrl
What what is issue?
I copied meeting.js from the sample-app-web.

Thanks.

Hey @grantlatest,

Can you please create a new topic: #client-web-sdk and fill out the post template so we have enough information to help you?

Please include what you are passing in for your leaveUrl

Thanks,
Tommy

I came here looking for an answer to the problem raised by @vijay.singh (thanks for the solution @tommy ). While here, I noted that the root cause of the original problem was not actually ever called out clearly in the discussion here. (I encountered that error first myself also.)

Essentially, it was caused by loading (and hence executing) the Zoom SDK javascript files before the DOM is loaded (that is, by including them in the <head> section), and hence the append() method on the document.body does not yet exist. Either loading the JavaScript files from inside the <body> tags of the HTML (as indicated by the SDK docs), or by using the ‘defer’ attribute on the <script> tags if placing them in the <head> section, will solve this.