Join invalid parameter!

Description
Hi! im trying to make zoom into a react app and im getting join invalid parameter !!!

Error
res {method: “generateSignature”, status: true, errorCode: 0, errorMessage: null, result: "}
2zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_audio.encode.wasm
2zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_video.decode.wasm
2zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_video.mt.wasm
zoomus-websdk.umd.min.js:2 — initMeeting —
zoomus-websdk.umd.min.js:2 {debug: true, leaveUrl: “https://zoom.us/”, showMeetingHeader: true, disableInvite: false, disableCallOut: false, …}
index.js:49 init success: {method: “init”, status: true, errorCode: 0, errorMessage: null, result: null}
zoomus-websdk.umd.min.js:2 — preJoinMeeting —
zoomus-websdk.umd.min.js:2
zoomus-websdk.umd.min.js:2 join invalid parameter !!!

Which version?
@zoomus/websdk”: “^1.7.10”

To Reproduce(If applicable)
Just at the first render

Additional context
Component code

import React, { useEffect, useState } from 'react';
import { ZoomMtg } from '@zoomus/websdk';

const apiKeys = {
  apiKey: process.env.REACT_APP_ZOOM_API_KEY,
  apiSecret: process.env.REACT_APP_ZOOM_API_SECRET
};

const meetConfig = {
  apiKey: apiKeys.apiKey,
  meetingNumber: '',
  leaveUrl: 'www.google.com.ar',
  userName: 'Test',
  userMail: '',
  role: 1 // 1 for host; 0 for attendee or webinar
};

export default () => {
  ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.10/lib', '/av');
  ZoomMtg.preLoadWasm();
  ZoomMtg.prepareJssdk();
  ZoomMtg.getJSSDKVersion();

  const joinMeeting = (signature) => {
    ZoomMtg.init({
      leaveUrl: 'https://zoom.us/',
      isSupportAV: true,
      debug: true,
      success: (res) => {
        console.log('init success: ', res);
        ZoomMtg.join({
          signature,
          apiKey: meetConfig.apiKey,
          meetingNumber: meetConfig.meetingNumber,
          userName: meetConfig.userName,
          userMail: meetConfig.userMail,

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

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

  useEffect(() => {
    /**
     * You should not visible api secret key on frontend
     * Signature must be generated on server
     * https://marketplace.zoom.us/docs/sdk/native-sdks/web/essential/signature
     */
    ZoomMtg.generateSignature({
      meetingNumber: meetConfig.meetingNumber,
      apiKey: meetConfig.apiKey,
      apiSecret: apiKeys.apiSecret,
      role: meetConfig.role,
      success: (res) => {
        console.log('res', res);

        setTimeout(() => {
          joinMeeting(res.result);
        }, 1000);
      }
    });
  }, []);

  return <button type="button">Empezar</button>;
};

Hey @avglive.developer,

In your ZoomMtg.join function, you have misspelled userEmail and the passWord property is also missing.

Please try fixing those and let me know if it works.

Thanks,
Tommy

Thanks a lot for your help. At this moment im not getting errors at all, but im not able to see nothing at render.

This is how console looks like:

Navigated to http://localhost:5000/zoomtest
log.js:24 [HMR] Waiting for update signal from WDS...
index.js:62 res {method: "generateSignature", status: true, errorCode: 0, errorMessage: null, result: ""}
zoomtest:1 Unchecked runtime.lastError: The message port closed before a response was received.
webpackHotDevClient.js:138 ./src/components/MakeAQuestion.js
  Line 74:6:  React Hook useEffect has a missing dependency: 'urlAlias'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210
2zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_audio.encode.wasm
2zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_video.decode.wasm
2zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_video.mt.wasm
index.js:43 Init Success  {method: "init", status: true, errorCode: 0, errorMessage: null, result: null}
index.js:44 ObjectapiKey: "A-xfS8eJ9vTwCaLIv0EPMsIw"error: ƒ error(res)meetingNumber: "***********"passWord: ""role: 1signature: ""success: ƒ success()userEmail: "test@test.com"userName: "Test"__proto__: Object
2DevTools failed to load SourceMap: Could not load content for https://source.zoom.us/1.7.10/lib/webim.min.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE

and the whole code:

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';

import { ZoomMtg } from '@zoomus/websdk';

const apiKeys = {
  apiKey: process.env.REACT_APP_ZOOM_API_KEY,
  apiSecret: process.env.REACT_APP_ZOOM_API_SECRET
};

const meetConfig = {
  apiKey: apiKeys.apiKey,
  meetingNumber: '***********',
  userName: 'Test',
  userEmail: 'test@test.com', // must be the attendee email address
  passWord: '',
  role: 1,
  error(res) {
    console.log('Joining meeting Error');
    console.dir(res);
  },
  success() {
    console.log('Success');
  }
};

export default () => {
  ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.10/lib', '/av');
  ZoomMtg.preLoadWasm();
  ZoomMtg.prepareJssdk();
  ZoomMtg.getJSSDKVersion();

  const joinMeeting = (signature) => {
    ZoomMtg.init({
      leaveUrl: 'www.google.com',
      isSupportChat: false,
      isSupportQA: false,
      isLockBottom: false,
      success: (success) => {
        console.log('Init Success ', success);
        console.dir({ ...meetConfig, signature });
        ZoomMtg.join({ ...meetConfig, signature });
      }
    });
  };

  useEffect(() => {
    /**
     * You should not visible api secret key on frontend
     * Signature must be generated on server
     * https://marketplace.zoom.us/docs/sdk/native-sdks/web/essential/signature
     */
    ZoomMtg.generateSignature({
      meetingNumber: meetConfig.meetingNumber,
      apiKey: meetConfig.apiKey,
      apiSecret: apiKeys.apiSecret,
      role: meetConfig.role,
      success: (res) => {
        console.log('res', res);

        setTimeout(() => {
          joinMeeting(res.result);
        }, 1000);
      }
    });
  }, []);

  return <button type="button">Empezar</button>;
};

My idea is to get the minimal implementation of zoom working, and then start customizing and play.
Thanks in advance.

*This post has been edited to remove any meeting / webinar IDs

Hey @avglive.developer,

Make sure you have the pre functions called after you import ZoomMtg:

import { ZoomMtg } from '@zoomus/websdk';
 
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

Thanks,
Tommy

Hi @tommy!
I just updated the code but im getting the save behavior:

import React, { useEffect } from 'react';

import { ZoomMtg } from '@zoomus/websdk';

console.log('checkSystemRequirements');
console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));

ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.10/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

const apiKeys = {
  apiKey: process.env.REACT_APP_ZOOM_API_KEY,
  apiSecret: process.env.REACT_APP_ZOOM_API_SECRET
};

const meetConfig = {
  apiKey: apiKeys.apiKey,
  meetingNumber: '',
  userName: 'Test',
  userEmail: 'test@test.com', // must be the attendee email address
  passWord: '',
  role: 1,
  error(res) {
    console.log('Joining meeting Error');
    console.dir(res);
  },
  success() {
    console.log('Success');
  }
};

export default () => {
  const joinMeeting = (signature) => {
    ZoomMtg.init({
      leaveUrl: 'www.google.com',
      isSupportChat: false,
      isSupportQA: false,
      isLockBottom: false,
      success: (success) => {
        console.log('Init Success ', success);
        console.dir({ ...meetConfig, signature });
        ZoomMtg.join({ ...meetConfig, signature });
      }
    });
  };

  useEffect(() => {
    /**
     * You should not visible api secret key on frontend
     * Signature must be generated on server
     * https://marketplace.zoom.us/docs/sdk/native-sdks/web/essential/signature
     */
    ZoomMtg.generateSignature({
      meetingNumber: meetConfig.meetingNumber,
      apiKey: meetConfig.apiKey,
      apiSecret: apiKeys.apiSecret,
      role: meetConfig.role,
      success: (res) => {
        console.log('res', res);

        setTimeout(() => {
          joinMeeting(res.result);
        }, 1000);
      }
    });
  }, []);

  return <button type="button">Empezar</button>;
};

Console:

Navigated to http://localhost:5000/zoomtest
log.js:24 [HMR] Waiting for update signal from WDS…
index.js:5 checkSystemRequirements
zoomus-websdk.umd.min.js:2 Zoom support you browser. Chrome/84.0.4147.105
zoomus-websdk.umd.min.js:2 You browser support below features
index.js:6 {“browserInfo”:“Chrome/84.0.4147.105”,“browserName”:“Chrome”,“browserVersion”:“84.0.4147.105”,“features”:[“viewSharing”,“screenShare”,“computerVideo”,“computerAudio”,“callIn”,“callOut”,“chat”,“closedCaption”,“QA”]}
index.js:60 res {method: “generateSignature”, status: true, errorCode: 0, errorMessage: null, result: “”}
zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_audio.encode.wasm
zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_video.decode.wasm
zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_video.mt.wasm
index.js:41 Init Success {method: “init”, status: true, errorCode: 0, errorMessage: null, result: null}
index.js:42 Object

Seems like some div id has to be referenced? But most of react projects im seeing hasn’t references to an id or something.
This is the elements tree.

Thanks again.

@tommy i added debug to init function, seems that the invalid parameter persist.

res {method: “generateSignature”, status: true, errorCode: 0, errorMessage: null, result: “”}
zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_audio.encode.wasm
zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_video.decode.wasm
zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_video.mt.wasm
zoomus-websdk.umd.min.js:2 — initMeeting —
zoomus-websdk.umd.min.js:2 {debug: true, leaveUrl: “www.google.com”, showMeetingHeader: true, disableInvite: false, disableCallOut: false, …}audioPanelAlwaysOpen: falsedebug: truedisableCallOut: falsedisableInvite: falsedisableJoinAudio: undefineddisableRecord: falseisShowJoiningErrorDialog: trueleaveUrl: "www.google.com"showMeetingHeader: true__proto__: Object
index.js:43 Init Success {method: “init”, status: true, errorCode: 0, errorMessage: null, result: null}errorCode: 0errorMessage: nullmethod: "init"result: nullstatus: true__proto__: Object
index.js:44 ObjectapiKey: ""error: ƒ error(res)meetingNumber: "***********"passWord: ""role: 1signature: ""success: ƒ success(e)userEmail: "test@test.com"userName: "Test"proto: Object
zoomus-websdk.umd.min.js:2 — preJoinMeeting —
zoomus-websdk.umd.min.js:2
zoomus-websdk.umd.min.js:2 join invalid parameter !!!

I got the meeting created
Screen Shot 2020-08-07 at 15.13.55

*This post has been edited to remove any meeting / webinar IDs

Hey @avglive.developer,

Try passing in the meetingId as a number and not a string.

If that does not work, send me your github repo with the issue so I can reproduce the issue locally.

Thanks,
Tommy

Sorry it doesn’t worked.

This is the repo:
go to: http://localhost:5000/zoomtest

Component: ZoomText/index.js

Hey @avglive.developer,

I do not see the Web SDK in your code? Can you share the link to the page on github where you are using it?

Thanks,
Tommy

Hi @tommy its being imported at the component top:

`import { ZoomMtg } from ‘@zoomus/websdk’;

is it ok?

@tommy MY BAD! I didn’t pushed. Check https://github.com/avg-developer/av-live/tree/feature/zoom-first-approach

Hey @avglive.developer,

Can you please try the following:

Add https:// to the leaveUrl value:

Try using a valid email, the special character might be breaking things:

Let me know if that fixes the issue! :slight_smile:

Thanks,
Tommy

@tommy thanks for yout patience.

I just updated with a valid email and change the leave url with the same as the method definition here: https://zoom.github.io/sample-app-web/ZoomMtg.html#init

Is not working, i’ve updated the branch if you want to check.

https://github.com/avg-developer/av-live/tree/feature/zoom-first-approach

Thanks!!

Hey @avglive.developer,

Are you still seeing the same error? Please reference our working sample app to see what is different with your app:

Thanks,
Tommy

Hi @tommy, seems that the error is clearer now:

Screen Shot 2020-08-12 at 12.59.00|690x349

This is the console:

You browser support below features

index.js:6 {"browserInfo":"Chrome/84.0.4147.105","browserName":"Chrome","browserVersion":"84.0.4147.105","features":["viewSharing","screenShare","computerVideo","computerAudio","callIn","callOut","chat","closedCaption","QA"]}

index.js:70 res

1. {method: "generateSignature", status: true, errorCode: 0, errorMessage: null, result: ""}

zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_audio.encode.wasm

zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_video.decode.wasm

zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_video.mt.wasm

zoomus-websdk.umd.min.js:2 --- initMeeting ---

zoomus-websdk.umd.min.js:2

1. {debug: true, leaveUrl: "http://www.zoom.us", showMeetingHeader: true, disableInvite: false, disableCallOut: false, …}

index.js:40 Init Success

1. {method: "init", status: true, errorCode: 0, errorMessage: null, result: null}

zoomus-websdk.umd.min.js:2 --- preJoinMeeting ---

zoomus-websdk.umd.min.js:2

zoomus-websdk.umd.min.js:2 --- joinMeetingFail ---

zoomus-websdk.umd.min.js:2

1. {method: "join", status: false, result: null, errorMessage: "Invalid parameter", errorCode: 4003}

  1. errorCode: 4003
  2. errorMessage: "Api key length error, must 22/36"
  3. method: "join"
  4. result: null
  5. status: false
  6. __proto__: Object

Is it related to My API_Key is not 22 characters, so why is the code checking this condition? It is 36 characters! - #6 by tanderson

If it is, is there a workaround?
Thanks!

Hey @avglive.developer,

Double check you are using a JWT App for the Web SDK and not an SDK App.

Thanks,
Tommy

@tommy yes! its an JWT app.

Seems im pretty close now, im getting:

>>>>>>>> CREATE JSMEDIASKD INSTANCE <<<<<<<<
log.js:24 [HMR] Waiting for update signal from WDS...
index.js:5 checkSystemRequirements
zoomus-websdk.umd.min.js:2 Zoom support you browser. Chrome/84.0.4147.105
zoomus-websdk.umd.min.js:2 You browser support below features
index.js:6 {"browserInfo":"Chrome/84.0.4147.105","browserName":"Chrome","browserVersion":"84.0.4147.105","features":["viewSharing","screenShare","computerVideo","computerAudio","callIn","callOut","chat","closedCaption","QA"]}
index.js:70 signature {method: "generateSignature", status: true, errorCode: 0, errorMessage: null, result: ""}
webpackHotDevClient.js:138 ./src/components/MakeAQuestion.js
  Line 74:6:  React Hook useEffect has a missing dependency: 'urlAlias'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210
zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_audio.encode.wasm
zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_video.decode.wasm
zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_video.mt.wasm
zoomus-websdk.umd.min.js:2 --- initMeeting ---
zoomus-websdk.umd.min.js:2 {debug: true, leaveUrl: "http://www.zoom.us", showMeetingHeader: true, disableInvite: false, disableCallOut: false, …}
index.js:40 Init Success  {method: "init", status: true, errorCode: 0, errorMessage: null, result: null}errorCode: 0errorMessage: nullmethod: "init"result: nullstatus: true__proto__: Object
zoomus-websdk.umd.min.js:2 --- preJoinMeeting ---
zoomus-websdk.umd.min.js:2 
zoomus-websdk.umd.min.js:2 --- joinMeeting ---
zoomus-websdk.umd.min.js:2 {meetingNumber: "***********", userName: "Test", userEmail: "", passWord: "", dialogMN: "", …}accessToken: ""apiKey: ""auth: ""callOutCountry: [{…}]canRecording: "1"ccUrl: ""dialogMN: ""encryptedRWC: {rwcva.cloud.zoom.us: "", rwcff.cloud.zoom.us: ""}error: res => {…}h323GatewayInfo: ""h323Password: ""inviteEmail: "A+V Group is inviting you to a scheduled Zoom meeting.
↵
↵Topic: Test - no borrar
↵Time: Aug 21, 2020 03:00 PM Buenos Aires, Georgetown
↵
↵Join Zoom Meeting

↵
↵
↵"isOriginHost: trueisSupportQA: falseisWebinar: 0location: "AR"meetingNumber: "***********"meetingOptions: allowParticipantsRename: trueallowParticipantsRenameLocked: falseallowPutOnHold: trueenableWaitingRoom: trueisAllowBreakoutRoomPreAssign: falseisAllowChatAndRaiseChime: falseisAllowShareZMWindowEnabled: falseisAuthLocalRecording: trueisBO100Enabled: falseisCOHostEnabled: trueisChatEnabled: trueisChatLocked: falseisEnableAutomaticDisplayJoinAudioDialog: trueisEnableBreakoutRoom: falseisEnableClosedCaption: falseisEnableEncryption3rdParty: falseisEnableMeetingControlToolBar: falseisEnableMeetingWatermark: falseisEnableMuteParticipantsUponEntry: trueisGroupHDEnabled: trueisLocalRecordingEnabled: trueisMeetingScreenSharingGrabAll: falseisPrivateChatEnabled: trueisPrivateChatLocked: falseisRemoteControlEnbaled: trueisReportParticipantsEnabled: trueisScreenShareEnabled: trueisShareOptionLocked: falseisShareScreenHostOnly: trueisShareWhiteboardEnabled: trueisUserEnableRecordingReminder: falseisWaitingRoomLocked: falseisWaterMarkLocked: falsenonverbalfeedback: falseplayUserJoinLeaveAudio: false__proto__: ObjectmeetingTopic: "Test - no borrar"mid: "=="optionAudioType: "voip"optionVideoHost: falseoptionVideoParticipants: falseotherTelInfo: ""participantId: ""passWord: ""rwcBackup: "rwcva.cloud.zoom.us;rwcff.cloud.zoom.us"sign: ""signature: "0"signatureFunc: nullstatus: "jsapiJoin"success: res => {…}supportCallOut: "0"supportH323: 0tid: ""tk: ""tollNumbers: []trackAuth: ""ts: ""userEmail: ""userName: "Test"xmppConfig: {}zak: ""__proto__: Object
zoomus-websdk.umd.min.js:2 >>>>>>>> CREATE JSMEDIASKD INSTANCE <<<<<<<<

Im not able to see any error, im kind confused.
thanks again and sorry.

*This post has been edited to remove any meeting / webinar IDs

Hey @avglive.developer,

Strange, can you share the Web SDK Signature you are generating to developersupport@zoom.us so I can debug?

Thanks,
Tommy

It’s working now. Im able to create and join, i have to fix css and i don’t know why is not getting camera image but that’s another issue.

Thanks a lot for your help!

Just included

 <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.2/css/bootstrap.css" />
    <link
      type="text/css"
      rel="stylesheet"
      href="https://source.zoom.us/1.7.2/css/react-select.css"
    />

And its working like a charm.
Thanks a lot for your help, i will start playing with the sdk now!

1 Like