Zoom SDK integration with react and node js
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:
- 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
- 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.