`NaN` is an invalid value for the `width` css style property

Meeting SDK Web
1

image
image1133×334 8.8 KB

Everytime I join a meeting, I always get this error in the console, though I can successfully join a meeting, it just bothers me if there is an error in the console that is not handled.

Here is my configuration.

...
const query = this.props.router.query;
this.setState({
    meetingNumber: query.mid,
    userName: atob(query.un),
    passWord: query.pwd,
    signature: query.sg,
    leaveUrl: `/zoom?mid=${query.mid}&pwd=${query.pwd}&un=${query.un}&sg=${query.sg}&md=1`,
});
...
const signature = ZoomMtg.generateSignature({
    meetingNumber: meetConfig.meetingNumber,
    apiKey: meetConfig.apiKey,
    apiSecret: meetConfig.apiSecret,
    role: meetConfig.role,
    success: function (res) {
        console.log(res.result);
    }
});
// BTW this does not work, it did not remove the invite button
ZoomMtg.showInviteFunction({ show: false });

ZoomMtg.init({
    leaveUrl: this.state.leaveUrl,
    isSupportAV: true,
    disableInvite: false,
    audioPanelAlwaysOpen: false,
    isSupportChat: false,
    success: function () {
        ZoomMtg.join({
          meetingNumber: meetConfig.meetingNumber,
          userName: meetConfig.userName,
          userEmail: '',
          signature: signature,
          apiKey: meetConfig.apiKey,
          passWord: meetConfig.passWord,
          success: function (res) {
            wrapper.hide();
            $('body').removeClass('loading-pointer');

            $(document).on('click', () => {
              setTimeout(() => {
                const participantHeader = $('chat-participant-header');
                console.log(participantHeader);
                if (participantHeader.is(':visible')) {
                  console.log('it is visible');
                }
              }, 100);
            });
          },
          error: function (res) {
            console.log(res);
          }
        });
      },

Is there something missing in my configuration?

2

Hey @dashawk,

I have also noticed this error. Although it is annoying, it is not a blocker and does not break anything.

We will work on fixing this, but don’t worry too much. :slight_smile:

Thanks,
Tommy

1 Like
3

Has this been resolved? UI rendered is messy may be because of this error.

Here is part of my Angular Component Code

ngOnInit() {
    this.loadConfiguration();
}

joinMeeting() {
    if (this.meetingConfig) {
        var config = this.meetingConfig;
        try {
            ZoomMtg.join({
                signature: config.signature,
                meetingNumber: config.meetingNumber,
                userName: (config.userName == null || config.userName.toString().trim() == '') ? 'no name user' : config.userName,
                apiKey: config.apiKey,
                userEmail: (config.userEmail == null || config.userEmail.toString().trim() == '') ? 'noemail@nodomain.com' : config.userEmail, // "yogesh.dahiya@rsystems.com",
                passWord: (config.meetingPassword == null || config.meetingPassword.toString().trim() == '') ? '' : config.meetingPassword,
                success: (success) => {
                    //console.log(success)
                    this.showsideNavButton();
                },
                error: (error) => {
                    console.log(error);
                    this.onZoomError(config);
                }
            })
        }
        catch (e) {
            console.log(e);
            this.onZoomError(config);
        }
    }
}

private loadConfiguration() {

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

    this.onlineSessionService.getConfiguration({ eventId: this.eventID, PID: this.pid }).subscribe((o) => {
        this.meetingConfig = o.data;
        if (o.data && !this.IsNullOrEmpty(o.data.meetingNumber)) {
            this.zoomInit(o.data.apiSecret)
        } else
            this.onZoomError(o.data);
    });
}

private zoomInit(sSecret) {
    var apiSecret = sSecret; //o.data.apiSecret;
    var config = this.meetingConfig;
    try {
        ZoomMtg.init({
            leaveUrl: config.onLeaveURL,
            webEndpoint: config.webEndpoint,
            isSupportAV: true,
            success: (success) => {
                config.signature = this.generateSignature(this.meetingConfig.apiKey, apiSecret
                    , this.meetingConfig.meetingNumber, 0);

                this.joinMeeting();
            },
            error: (error) => {
                console.log(error);
                this.onZoomError(config);
            }
        })
    }
    catch (e) {
        console.log(e);
        this.onZoomError(config);
    }
}

private onZoomError(oData) {
    if (oData && !this.IsNullOrEmpty(oData.onLeaveURL))
        this.Redirect(oData.onLeaveURL);
    else
        this.Redirect('/');
}

generateSignature(apiKey, apiSecret, meetingNumber, role) {
    // Prevent time sync issue between client signature generation and zoom 
    const timestamp = new Date().getTime() - 30000
    const msg = Buffer.from(apiKey + meetingNumber + timestamp + role).toString('base64')
    const hash = crypto.createHmac('sha256', apiSecret).update(msg).digest('base64')
    const signature = Buffer.from(`${apiKey}.${meetingNumber}.${timestamp}.${role}.${hash}`).toString('base64')

    return signature
}
4

Hey @cmudhar,

Can you please share a screenshot of the UI issue?

Thanks,
Tommy

5

Found the issue, there were other css files conflicting while rendering UI, but this JS error still there.
Now the UI renders ok, but the color scheme is way off (topic for another thread).

My request is complete for now.

Thanks

1 Like
6

Happy to hear you fixed the issue! :slight_smile:

Thanks,
Tommy