Description
More of a post than a question, but i have seen people having issues building for production, or using a implementation for react, so i made a snippet using react hooks
Which version?
For React 16 and Web SDK 1.7.7
import React, { useState, useEffect } from "react";
import { ZoomMtg } from '@zoomus/websdk';
import axios from 'axios';
import 'jquery/src/jquery';
function Zoom({ meetingNumber, passWord, userName, role }) {
const [zoomState, setZoomState] = useState({
meetingNumber: '',
passWord: '',
userName: 'user',
meetingLaunched: false,
leaveUrl: "http://localhost:3000",
role: 1
})
useEffect(() => {
setZoomState({
...zoomState,
meetingNumber: meetingNumber,
passWord: passWord,
userName: userName,
role: role
});
}, [meetingNumber, passWord, userName]);
useEffect(() => {
console.log('load cannons')
ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.7/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
}, [])
useEffect(() => {
console.log(zoomState)
}, [zoomState]);
const updateField = e => {
setZoomState({
...zoomState,
[e.target.name]: e.target.value
});
};
const getSignature = async (meetConfig, apiKey) => {
await axios.post('signatureEndpointURL', {
"meetingNumber": meetConfig.meetingNumber,
"role": +meetConfig.role
})
.then(result => result.data)
.then(response => {
ZoomMtg.init({
leaveUrl: meetConfig.leaveUrl,
isSupportAV: true,
debug: true,
success: function () {
ZoomMtg.join({
signature: response.signature,
apiKey: apiKey,
meetingNumber: meetConfig.meetingNumber, // required
userName: meetConfig.userName, // required
passWord: meetConfig.passWord, // If required; set by host
success(success) {
console.log("join meeting success", success);
},
error(res) {
console.log(res);
}
});
},
error(res) {
console.log(res);
}
});
});
}
const launchMeeting = e => {
const apiKey = "apiKey";
const meetConfig = {
meetingNumber: zoomState.meetingNumber,
leaveUrl: zoomState.leaveUrl,
userName: zoomState.userName,
passWord: zoomState.passWord,
role: zoomState.role
};
getSignature(meetConfig, apiKey)
setZoomState({
...zoomState,
role: 1,
meetingLaunched: true
});
}
return (
<div className="App">
{true ? (
<nav className="app-nav">
<form className="form">
<label>
<span>MeetingID:</span>
<input
className="form__input"
type="text"
name="meetingNumber"
placeholder="Meeting #"
value={zoomState.meetingNumber}
onChange={updateField}
/>
</label>
<label>
<span>Username:</span>
<input
className="form__input"
type="text"
name="userName"
placeholder="Username"
value={zoomState.userName}
onChange={updateField}
/>
</label>
<label>
<span>Password:</span>
<input
className="form__input"
type="text"
name="passWord"
placeholder="Password"
value={zoomState.passWord}
onChange={updateField}
/>
</label>
<label>
<span>Password:</span>
<input
className="form__input"
type="text"
name="role"
placeholder="role"
value={zoomState.role}
onChange={updateField}
/>
</label>
</form>
<div className="button-wrap">
<button onClick={launchMeeting} className="button">Launch Meeting</button>
</div>
</nav>
) : (
<div id="zmmtg-root"></div>
)}
</div>
)
}
export default Zoom;
For production build, you can use the next npm module:
react-app-rewired, which allows you to add a config overwrite file and modify Terserplugin, the main advice came from another zoom devforum user, so when i encounter his post, i will credit him as deserved, meanwhile this is how you use yarn build from a create-react-app and have it not affect zoom sdk while minifying the build.
this is the config-overrides.js snippet:
const TerserPlugin = require('terser-webpack-plugin');
module.exports = (config) => {
if (!config.optimization) {
config.optimization = {};
}
config.optimization = {
minimizer: [
new TerserPlugin({
terserOptions: { keep_fnames: /./ } //this minifies the function names
})
]
}; return config;
}