WebSDK: Black screen, no errors. [1.7.5]

[dannyjs (Danny)]

Description
I very recently migrated from the API to the web SDK due to recent events in Zooms security updates. I used NPM to acquire the project, as per the docs found here: https://github.com/zoom/websdk and followed the instructions as closely as I could. The system appears to run the ZoomMtg.init function and throws the success log in the console, as seen in the screenshot but the join function doesn’t seem to call. I have added the preloaders and the JSLib call at the top of the file, along with the import as per the docs. Any assistance with this would be appreciated.

Error
No error messages in console… just a success on ZoomMtg.init()

Which version?
1.7.5

Screenshots

[michael_p.zoom (Michael P.)]

Hi @dannyjs

Thanks for alerting us about this. Did the ZoomMtg.join function error out or succeeded? If the init was a success then the ZoomMtg.join should of ran afterwards.

ZoomMtg.init({
            leaveUrl: 'http://www.zoom.us',
            isSupportAV: true,
            success: function () {
                ZoomMtg.join(
                    {
                        meetingNumber: meetConfig.meetingNumber,
                        userName: meetConfig.userName,
                        signature: signature,
                        apiKey: meetConfig.apiKey,
                        passWord: meetConfig.passWord,
                        success: function(res){
                            $('#nav-tool').hide();
                            **console.log('join meeting success');**
                        },
                        error: function(res) {
                            **console.log(res);**
                        }
                    }
                );

[dannyjs (Danny)]

Hi @michael_p.zoom

It did not trigger join success or error despite the init function succeeding.

[michael_p.zoom (Michael P.)]

@dannyjs Can you post your codebase that includes the init and join functions?

[dannyjs (Danny)]

ZoomMtg.init({
            leaveUrl: meetConfig.leaveUrl,
            isSupportAV: true,
            success: (success) => {
                console.log(success)

                ZoomMtg.join({
                    signature: meetConfig.signature,
                    meetingNumber: meetConfig.meetingNumber,
                    userName: meetConfig.userName,
                    apiKey: meetConfig.apiKey,
                    userEmail: meetConfig.userEmail, 
                    password: meetConfig.password,

                    success: (success) => {
                        console.log(success);
                    },

                    error: (error) => {
                        console.log(error)
                    }
                })		
            },
            error: (error) => {
                console.log(error)
            }
        })

All of the data in meetConfig was acquired server side then passed through as data attributes (apart from the api key). Not sure if there is a smoother way of doing this?

[dannyjs (Danny)]

@michael_p.zoom any luck with the above? Appreciate the support.

[dannyjs (Danny)]

@michael_p.zoom

[michael_p.zoom (Michael P.)]

Hi @dannyjs

+1 for the image.

I’m not sure if the join parameters have to be in a specific order or not. I was able to get it working using the below code. Can you try and see if it works for you?

ZoomMtg.init({
            leaveUrl: meetConfig.leaveUrl,
            isSupportAV: true,
            success: (success) => {
                console.log(success)

                ZoomMtg.join({
                    meetingNumber: meetConfig.meetingNumber,
                    userName: meetConfig.userName,
                    signature: signature,
                    apiKey: meetConfig.apiKey,
                    passWord: meetConfig.passWord,

                    success: (success) => {
                        console.log(success);
                    },

                    error: (error) => {
                        console.log(error)
                    }
                })              
            },
            error: (error) => {
                console.log(error)
            }
        });

[dannyjs (Danny)]

Hi @michael_p.zoom

Thanks for getting back in touch.

Tried your suggestion but no joy, unfortunately. I did wonder the same during development of it so i did make sure that my list matched the list in the github documentation here: https://github.com/zoom/websdk#usage

I also just ran a test in the browser (on the zoom website and hosted with desktop application) to make sure the meeting was set up correctly and all seems okay, just the SDK wont join.

Is there a particular way that I need to pass or format any of the data? I’m getting the data from the Zoom object / form, storing it in data attributes in the DOM, then putting it in the meetConfig object as seen above in my script.

[tommy (Tommy Gaessler)]

Hey @dannyjs,

Make sure you have the following towards the top of your file:

ZoomMtg.setZoomJSLib(path to files)
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

Please send me your code with those lines included so I can debug.

Thanks,
Tommy

[dannyjs (Danny)]

Hi @tommy,

No problem at all:

import $ from 'jquery';
import { ZoomMtg } from '@zoomus/websdk';
ZoomMtg.setZoomJSLib('/js/zoom', '/av');

ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

let meeting = {
    init: function() {
        let meetingDOM = $('#meeting-active');

        if(meetingDOM.length > 0){
            const meetConfig = {
                apiKey: 'XXXXXXXXXXXX',
                signature: $(meetingDOM).data('hash'),
                leaveUrl: $(meetingDOM).data('exit'),
                meetingNumber: $(meetingDOM).data('id'),
                userName: $(meetingDOM).data('username'),
                userEmail: $(meetingDOM).data('email'), // required for webinar
                passWord: $(meetingDOM).data('pass'), // if required
                role: 0 // 1 for host; 0 for attendee or webinar
            };

            ZoomMtg.init({
                leaveUrl: meetConfig.leaveUrl,
                isSupportAV: true,
                success: (success) => {
                    console.log(success)

                    ZoomMtg.join({
                        signature: meetConfig.signature,
                        meetingNumber: meetConfig.meetingNumber,
                        userName: meetConfig.userName,
                        apiKey: meetConfig.apiKey,
                        userEmail: meetConfig.userEmail, 
                        password: meetConfig.password,

                        success: (success) => {
                            console.log(success);
                        },

                        error: (error) => {
                            console.log(error)
                        }
                    })		
                },
                error: (error) => {
                    console.log(error)
                }
            })
        }
    },
}

$(document).ready(function(){
    meeting.init();
});

Followed the updated documentation as closely as I could, I’ve done as much as I could programmatically in PHP (Laravel), then passed the safe data to the DOM for the SDK to use. The files referenced in setZoomJSLib have been hosted locally rather than trying to reference node_modules from here.

Please do let me know if I have misunderstood the documentation anywhere and any assistance guiding me in the right direction would be greatly appreciated. The sooner we can have this up and running again, the better.

Thanks for your patience so far guys

Danny

[tommy (Tommy Gaessler)]

Hey @dannyjs,

I think I figured it out!

Can you try using passWord instead of password in your ZoomMtg.join function?

Thanks,
Tommy

[dannyjs (Danny)]

@tommy Result! We now have something to work with. Cant believe it was that simple

I now seem to be getting a “Password wrong” popup. Double checked and the password matches what I set. Even tried the password thats appended into the join link it generates. I’ll continue to debug my end, but in the meantime, any ideas would be a great help.

Thanks for everything so far, guys!

Danny

[tommy (Tommy Gaessler)]

Hey @dannyjs,

Glad we are moving in the right direction!

Did you figure out the password issue? Can you private message me what password you are trying to use?

Thanks,
Tommy