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

Hey @blr,

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

Thanks,
Tommy

Same here:

https://mve.meetec.net/test-zoom-sdk/

and even here:

https://mve.meetec.net/licenza.html

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: 'Vijay S. K.',
                    signature: resp.data.signature,
                    apiKey: process.env.REACT_APP_ZOOM_API_KEY,
                    passWord: '64531',
                    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.

ReactJS Github link: https://github.com/vjkholiya123/zoom-reactjs
Django Github link: https://github.com/vjkholiya123/zoom-sdk-react-django

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