In this lecture we are going to learn the integration of Zoom in reactjs using nodejs and zoom SDK. How we can create a meeting on single click of a button with a name only? We will learn this also in above lecture.
Steps for creating SDK:
Zoom SDK
- Open https://marketplace.zoom.us/ and sign up into marketplace.
- Go to option Develop -> Build App -> SDK -> Download -> Web
- After that click on Download option and it will download zip folder.
- Unzip that folder and open Local folder in Visual Studio Code.
- After that run command npm I in terminal, then go to https://marketplace.zoom.us/ and open JWT option and copy your API KEY and API SECRET and paste inside index.js file that is inside js folder.
- After that run command npm run start, this command run your SDK on localhost port 9999 by default.
Note:Make changes in index.html file according to your requirements. As I have made all fields hidden and I am getting all details from URL and calling join button on content load. In meeting.js you can provide you’re leaving URL. Run command: npm run start // to run your Zoom-SDK
Zoom API
- To Create an API first we need to create a folder and then open that folder in Visual Studio Code.
- After that run command: npm init and then npm install. Note: we need to install these packages (express, cors ,body-parser, jsonwebtoken , request and request promise).
- After that create a file with name index.js and then import all packages.
- After that create a get request to check your API is working or not. Run your API with command node index.js.
- Create post request and call create meeting zoom URL with email that you are using to sign into https://marketplace.zoom.us/.
- After calling zoom API you will get response with all details of meeting and we need to get join_url and send that in response with status code 200 and run command node index.js.
Zoom React App
- To create a react app we need to run command npx create-react-app .
- After this command you will get folder with same name as you have provided in npx command and next you need to open that folder in Visual Studio code.
- And run command npm start it will navigate you on localhost:3000 URL.
- Next open app.js file that is inside src folder.
- Create one input field and one button and onclick of that button call you’re API that we have created in ZoomAPI Component with post request.
- To call a post request you need to provide email in body (email: that you are using to sign into https://marketplace.zoom.us/).
- After calling API you will get response with join_url we need to modify URL with our SDK URL .
- Make it to navigate on that URL.
- After that meeting will start.