├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
└── robots.txt
└── src
├── App.css
├── App.js
├── Zoom.js
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This app shows an installation and meeting launch of the [Zoom Web SDK](https://marketplace.zoom.us/docs/sdk/native-sdks/web).
2 |
3 | React app was initialized using creat-react-app:
4 | ```
5 | npx create-react-app .
6 | ```
7 |
8 | Zoom WebSDK was installed locally:
9 | ```
10 | npm i @zoomus/websdk
11 | ```
12 |
13 | Stylesheets were added to `public/index.html`
14 | ```html
15 |
16 |
17 |
18 |
19 | ```
20 |
21 | A jquery dependency was added to `public/index.html` using the CDN to [resolve this jquery error](https://devforum.zoom.us/t/when-i-install-zoomus-jssdk-for-my-react-app-it-gets-an-jquery-error/5224):
22 | ```html
23 |
24 |
25 |
26 | ```
27 |
28 | Zoom.js is imported into `src/App.js` as ZoomComponent to separate the file:
29 | ```js
30 | import ZoomComponent from './Zoom'
31 |
32 | function App() {
33 | return <>;
34 | }
35 | ```
36 |
37 | In `Zoom.js`, three functions are run as the component mounts:
38 |
39 | 1. [Default library is set](https://zoom.github.io/sample-app-web/ZoomMtg.html#setZoomJSLib)
40 | 2. [WebAssembly file is loaded](https://zoom.github.io/sample-app-web/ZoomMtg.html#preLoadWasm)
41 | 3. [Required JS is loaded](https://zoom.github.io/sample-app-web/ZoomMtg.html#prepareJssdk)
42 |
43 | `src/Zoom.js`:
44 | ```js
45 | componentDidMount() {
46 | ZoomMtg.setZoomJSLib("https://source.zoom.us/1.7.0/lib", "/av");
47 | ZoomMtg.preLoadWasm();
48 | ZoomMtg.prepareJssdk();
49 | }
50 | ```
51 |
52 | A button is used to launch the `launchMeeting` function. This changes the state of the component to `meetingLaunched: true` and hides the button.
53 |
54 | ```jsx
55 | render() {
56 | const { meetingLaunched} = this.state;
57 | // Displays a button to launch the meeting when the meetingLaunched state is false
58 | return (
59 | <>
60 | {!meetingLaunched ?
61 |
62 | :
63 | <>
64 | }
65 |
66 | )
67 | }
68 | ```
69 |
70 | This function then uses the development-only `generateSignature()` method which then launches the `init()` and `join()` methods.
71 | ```js
72 | launchMeeting = () => {
73 |
74 | // change state of meeting
75 | this.setState({ meetingLaunched: !this.state.meetingLaunched })
76 |
77 | // generateSignature should only be used in development
78 | ZoomMtg.generateSignature({
79 | meetingNumber: meetConfig.meetingNumber,
80 | apiKey: meetConfig.apiKey,
81 | apiSecret: meetConfig.apiSecret,
82 | role: meetConfig.role,
83 | success(res) {
84 | console.log('signature', res.result);
85 | ZoomMtg.init({
86 | leaveUrl: 'http://www.zoom.us',
87 | success() {
88 | ZoomMtg.join(
89 | {
90 | meetingNumber: meetConfig.meetingNumber,
91 | userName: meetConfig.userName,
92 | signature: res.result,
93 | apiKey: meetConfig.apiKey,
94 | userEmail: 'email@gmail.com',
95 | passWord: meetConfig.passWord,
96 | success() {
97 | console.log('join meeting success');
98 | },
99 | error(res) {
100 | console.log(res);
101 | }
102 | }
103 | );
104 | },
105 | error(res) {
106 | console.log(res);
107 | }
108 | });
109 | }
110 | });
111 | }
112 | ```
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-test",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^4.2.4",
7 | "@testing-library/react": "^9.4.1",
8 | "@testing-library/user-event": "^7.2.1",
9 | "@zoomus/websdk": "^1.7.0",
10 | "react": "^16.12.0",
11 | "react-dom": "^16.12.0",
12 | "react-scripts": "3.4.0"
13 | },
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test",
18 | "eject": "react-scripts eject"
19 | },
20 | "eslintConfig": {
21 | "extends": "react-app"
22 | },
23 | "browserslist": {
24 | "production": [
25 | ">0.2%",
26 | "not dead",
27 | "not op_mini all"
28 | ],
29 | "development": [
30 | "last 1 chrome version",
31 | "last 1 firefox version",
32 | "last 1 safari version"
33 | ]
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaeldharrington/react-zoomus-websdk/d36c387c300768f81d3c70d64842d26bc4926beb/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | React App - Launch Zoom Web SDK
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | button.launchButton {
2 | z-index: 100;
3 | position: fixed;
4 | top: 16px;
5 | left: 16px;
6 | border: 0;
7 | outline: 0;
8 | color: #ffffff;
9 | background: #0e71eb;
10 | padding: 7px 16px 8px;
11 | font-weight: 600;
12 | border-radius: 8px;
13 | font-size: 14px;
14 | line-height: 17px;
15 | cursor: pointer;
16 | margin: 8px;
17 | }
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './App.css'
3 |
4 | import ZoomComponent from './Zoom'
5 |
6 | function App() {
7 | return <>;
8 | }
9 |
10 | export default App;
11 |
--------------------------------------------------------------------------------
/src/Zoom.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | import { ZoomMtg } from "@zoomus/websdk";
4 |
5 | // Add this, never use it client side in production
6 | const API_KEY = '';
7 | // Add this, never use it client side in production
8 | const API_SECRET = '';
9 | // This can be your Personal Meeting ID
10 | const MEETING_NUMBER = 1234567890;
11 |
12 | const meetConfig = {
13 | apiKey: API_KEY,
14 | apiSecret: API_SECRET,
15 | meetingNumber: MEETING_NUMBER,
16 | userName: 'test user',
17 | passWord: '',
18 | leaveUrl: 'https://zoom.us',
19 | role: 0
20 | };
21 |
22 | export default class Zoom extends Component {
23 | state = {
24 | meetingLaunched: false,
25 | }
26 |
27 | launchMeeting = () => {
28 |
29 | // change state of meeting
30 | this.setState({ meetingLaunched: !this.state.meetingLaunched })
31 |
32 | // generateSignature should only be used in development
33 | ZoomMtg.generateSignature({
34 | meetingNumber: meetConfig.meetingNumber,
35 | apiKey: meetConfig.apiKey,
36 | apiSecret: meetConfig.apiSecret,
37 | role: meetConfig.role,
38 | success(res) {
39 | console.log('signature', res.result);
40 | ZoomMtg.init({
41 | leaveUrl: 'http://www.zoom.us',
42 | success() {
43 | ZoomMtg.join(
44 | {
45 | meetingNumber: meetConfig.meetingNumber,
46 | userName: meetConfig.userName,
47 | signature: res.result,
48 | apiKey: meetConfig.apiKey,
49 | userEmail: 'email@gmail.com',
50 | passWord: meetConfig.passWord,
51 | success() {
52 | console.log('join meeting success');
53 | },
54 | error(res) {
55 | console.log(res);
56 | }
57 | }
58 | );
59 | },
60 | error(res) {
61 | console.log(res);
62 | }
63 | });
64 | }
65 | });
66 | }
67 |
68 | componentDidMount() {
69 | ZoomMtg.setZoomJSLib("https://source.zoom.us/1.7.0/lib", "/av");
70 | ZoomMtg.preLoadWasm();
71 | ZoomMtg.prepareJssdk();
72 | }
73 |
74 | render() {
75 | const { meetingLaunched} = this.state;
76 | // Displays a button to launch the meeting when the meetingLaunched state is false
77 | return (
78 | <>
79 | {!meetingLaunched ?
80 |
81 | :
82 | <>
83 | }
84 |
85 | )
86 | }
87 | }
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import * as serviceWorker from './serviceWorker';
5 |
6 | ReactDOM.render(, document.getElementById('root'));
7 |
8 | // If you want your app to work offline and load faster, you can change
9 | // unregister() to register() below. Note this comes with some pitfalls.
10 | // Learn more about service workers: https://bit.ly/CRA-PWA
11 | serviceWorker.unregister();
12 |
--------------------------------------------------------------------------------