This app shows an installation and meeting launch of the Zoom Web SDK.
React app was initialized using creat-react-app:
npx create-react-app .
Zoom WebSDK was installed locally:
npm i @zoomus/websdk
Stylesheets were added to public/index.html
<head>
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.0/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.0/css/react-select.css" />
</head>A jquery dependency was added to public/index.html using the CDN to resolve this jquery error:
<body>
<script src="https://source.zoom.us/1.7.0/lib/vendor/jquery.min.js"></script>
</body>Zoom.js is imported into src/App.js as ZoomComponent to separate the file:
import ZoomComponent from './Zoom'
function App() {
return <><ZoomComponent /></>;
}In Zoom.js, three functions are run as the component mounts:
src/Zoom.js:
componentDidMount() {
ZoomMtg.setZoomJSLib("https://source.zoom.us/1.7.0/lib", "/av");
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
}A button is used to launch the launchMeeting function. This changes the state of the component to meetingLaunched: true and hides the button.
render() {
const { meetingLaunched} = this.state;
// Displays a button to launch the meeting when the meetingLaunched state is false
return (
<>
{!meetingLaunched ?
<button className="launchButton" onClick={this.launchMeeting}>Launch Meeting</button>
:
<></>
}
</>
)
}This function then uses the development-only generateSignature() method which then launches the init() and join() methods.
launchMeeting = () => {
// change state of meeting
this.setState({ meetingLaunched: !this.state.meetingLaunched })
// generateSignature should only be used in development
ZoomMtg.generateSignature({
meetingNumber: meetConfig.meetingNumber,
apiKey: meetConfig.apiKey,
apiSecret: meetConfig.apiSecret,
role: meetConfig.role,
success(res) {
console.log('signature', res.result);
ZoomMtg.init({
leaveUrl: 'http://www.zoom.us',
success() {
ZoomMtg.join(
{
meetingNumber: meetConfig.meetingNumber,
userName: meetConfig.userName,
signature: res.result,
apiKey: meetConfig.apiKey,
userEmail: '[email protected]',
passWord: meetConfig.passWord,
success() {
console.log('join meeting success');
},
error(res) {
console.log(res);
}
}
);
},
error(res) {
console.log(res);
}
});
}
});
}