Setting up Zoom as a React Component

Meeting SDK Web
1

Description
How to setting up zoom as a React component.

I have setting the base configuration an below are the Component

componentDidMount() {

    const signatureEndpoint = ''

    const apiKey = process.env.TITIKTEMU_ZOOM_API_KEY

    const meetingNumber =

    const role = 0

    const leaveUrl = 'http://localhost:9999'

    const userName = 'WebSDK'

    const userEmail = ''

    const passWord = ''

    ZoomMtg.preLoadWasm();

    ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.5/lib', '/av')

    ZoomMtg.prepareJssdk();

    ZoomMtg.generateSignature({

      meetingNumber: meetingNumber,

      apiKey: apiKey,

      apiSecret: process.env.TITIKTEMU_ZOOM_API_SECRET,

      role: role,

      success (res) {

        console.log('signature', res.result)

        const signature = res.result

        ZoomMtg.init({

          leaveUrl: leaveUrl,

          disableCallOut: true,

          disableRecord: true,

          isSupportQA: false,

          isSupportCC: false,

          showPureSharingContent: false,

          screenShare: false,

          disableJoinAudio: false,

          audioPanelAlwaysOpen: false,

          isSupportChat: true,

          videoDrag: false,

          disableInvite: true,

          success () {

            ZoomMtg.join(

              {

                meetingNumber: meetingNumber,

                userName: userName,

                signature: signature,

                apiKey: apiKey,

                passWord: passWord,

                success () {

                  console.log('join meeting success')

                },

                error (res) {

                  console.log('Error generating signature')

                  console.log(res)

                }

              }

            )

          },

          error (res) {

            console.log(res)

          }

        })

      }

    })

  }

And what to render into the component?

I’ve setting up the signatureEndpoint into heroku, but i’m still new to understand all the things.
Therefore your help would be awesome

2

Hey @titiktemu,

You can include the Web SDK into any react component.

Here is a sample app someone in the community created:

Thanks,
Tommy

3

Awesome @tommy, i’ve been checking the project and it start.

But there was a error that said “Joining meeting timeout”, invalid parameter as stated below

image
image1366×768 35.2 KB

Do i need to start some server to create a new meeting?, what am i missing?

Thanks.

4

Hey @titiktemu,

Please share your Web SDK Init and Join function code so I can debug.

Thanks,
Tommy

5

Hey @tommy, below are the code

function joinMeeting(signature, meetConfig) {
ZoomMtg.init({
  leaveUrl: "https://zoom.us/",
  isSupportAV: true,
  success: function (success) {
    console.log("Init Success ", 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);
      },
     });
    },
  });
 }

Btw, i’ve fix it a little bit, and now the error are the meeting number is not found on console.log

Object
errorCode: 3707
errorMessage: "The meeting number is not found."
method: "join"
result: "The meeting number is not found."
status: false
__proto__: Object

image
image1366×768 81.5 KB

6

Hey @titiktemu,

Happy to hear you are making progress!

Does the meeting number you are using exist? Have you created the meeting before hand?

Thanks,
Tommy

7

I don’t think so @tommy,

How can i create the meeting on local (in app)?, because the end goal are later on the user of my platform can directly create and join zoom meeting in “titiktemu platform”

Thanks,

Evan

8

Hey @titiktemu,

You can use the Create Meeting API. :slight_smile:

Thanks,
Tommy

9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.