Description
I am trying to integrate zoom web sdk in my reactjs based project. I have added dependency in package.json of websdk version 1.7.5.
"@zoomus/websdk": "^1.7.5",
I am not sure what this means
NOTE: The following files (already in node_modules) must be globally accessible (equivalent of link and script tag in index.html):
node_modules/@zoomus/websdk/dist/css/bootstrap.cssnode_modules/@zoomus/websdk/dist/css/react-select.cssnode_modules/jquery/dist/jquery.min.js
How to achieve this in my frontend project, though all my node modules are globally accesible. Do I need to do anything for above.
Below is the code that I am using to join meeting
import React, { Component } from 'react';
import { Card } from 'my-modules/atoms';
import { Input } from 'my-modules/atoms';
import { Button } from 'my-modules/atoms';
import { ZoomMtg } from '@zoomus/websdk';
class ZoomCall extends Component {
constructor(props) {
super(props);
this.state = {
isFullTime: false
};
}
componentDidMount() {
setTimeout(() => {
ZoomMtg.setZoomJSLib('node_modules/@zoomus/websdk/dist/lib/', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
}, 6000);
}
joinZoomMeeting = () => {
console.log('checkSystemRequirements');
console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));
const meetConfig = {
apiKey: API_KEY,
apiSecret: SECRET_KEY,
meetingNumber: meetingId,
userName: 'Name',
passWord: 123,
leaveUrl: 'http://localhost:9009',
role: 1
};
ZoomMtg.generateSignature({
meetingNumber: meetConfig.meetingNumber,
apiKey: meetConfig.apiKey,
apiSecret: meetConfig.apiSecret,
role: meetConfig.role,
success(res) {
console.log('signature', res.result);
ZoomMtg.init({
leaveUrl: meetConfig.leaveUrl,
success() {
ZoomMtg.join(
{
meetingNumber: meetConfig.meetingNumber,
userName: meetConfig.userName,
signature: res.result,
apiKey: meetConfig.apiKey,
passWord: meetConfig.passWord,
success() {
console.log('join meeting success');
},
error(respo) {
console.log(respo);
}
}
);
},
error(response) {
console.log(response);
}
});
}
});
};
render() {
console.log('Zoom meeting');
console.log(this.state.isFullTime);
return (
<Card>
<Input placeholder="enter comment here..." />
<Button
style={{ width: '150px', margin: '10px' }}
onClick={this.joinZoomMeeting}
>
Submit
</Button>
</Card>
);
}
}
export default ZoomCall;
Error
Not able to see any error in console.
Which version?
websdk - 1.7.5.
Screenshots
Smartphone (please complete the following information):
- Browser:Chrome
Additional context
I first ran sample app which working fine, but its not working when I am integrating with my project. Page is not loading properly when I have added zoom join call code. If I remove joinZoomMeeting method and all code related to zoom, then its working fine.
Initially i was getting error, when I was calling preLoadWasm and prepareJssdk methods outside the ZoomCall class -
import React, { Component } from 'react';
import { Card } from 'dashboard-modules/atoms';
import { Input } from 'dashboard-modules/atoms';
import { Button } from 'dashboard-modules/atoms';
import { ZoomMtg } from '@zoomus/websdk';
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
class ZoomCall extends Component {
constructor(props) {
super(props);
this.state = {
isFullTime: false
};
}
joinZoomMeeting = () => {
console.log('checkSystemRequirements');
console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));
const meetConfig = {
apiKey: API_KEY,
apiSecret: SECRET_KEY,
meetingNumber: MeetingId,
userName: 'Name',
passWord: 123,
leaveUrl: 'http://localhost:9009',
role: 1
};
ZoomMtg.generateSignature({
meetingNumber: meetConfig.meetingNumber,
apiKey: meetConfig.apiKey,
apiSecret: meetConfig.apiSecret,
role: meetConfig.role,
success(res) {
console.log('signature', res.result);
ZoomMtg.init({
leaveUrl: meetConfig.leaveUrl,
success() {
ZoomMtg.join(
{
meetingNumber: meetConfig.meetingNumber,
userName: meetConfig.userName,
signature: res.result,
apiKey: meetConfig.apiKey,
passWord: meetConfig.passWord,
success() {
console.log('join meeting success');
},
error(respo) {
console.log(respo);
}
}
);
},
error(response) {
console.log(response);
}
});
}
});
};
render() {
console.log('Zoom meeting');
console.log(this.state.isFullTime);
return (
<Card>
<Input placeholder="enter comment here..." />
<Button
style={{ width: '150px', margin: '10px' }}
onClick={this.joinZoomMeeting}
>
Submit
</Button>
</Card>
);
}
}
export default ZoomCall;
So I got this error:
Cannot update during an existing state transition (such as within
renderor another componentâs constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved tocomponentWillMount
so I added componentWillMount, set some timeout there and added call to preLoadWasm and prepareJssdk methods from componentWillMount. After that above error gone.
Like in below code snippet:
import React, { Component } from 'react';
import { Card } from 'dashboard-modules/atoms';
import { Input } from 'dashboard-modules/atoms';
import { Button } from 'dashboard-modules/atoms';
import { ZoomMtg } from '@zoomus/websdk';
ZoomMtg.setZoomJSLib('node_modules/@zoomus/websdk/dist/lib/', '/av');
class ZoomCall extends Component {
constructor(props) {
super(props);
this.state = {
isFullTime: false
};
}
componentWillMount() {
setTimeout(() => {
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
}, 6000);
}
joinZoomMeeting = () => {
console.log('checkSystemRequirements');
console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));
const meetConfig = {
apiKey: API_KEY,
apiSecret: SECRET_KEY,
meetingNumber: MeetingId,
userName: 'Name',
passWord: 123,
leaveUrl: 'http://localhost:9009',
role: 1
};
ZoomMtg.generateSignature({
meetingNumber: meetConfig.meetingNumber,
apiKey: meetConfig.apiKey,
apiSecret: meetConfig.apiSecret,
role: meetConfig.role,
success(res) {
console.log('signature', res.result);
ZoomMtg.init({
leaveUrl: meetConfig.leaveUrl,
success() {
ZoomMtg.join(
{
meetingNumber: meetConfig.meetingNumber,
userName: meetConfig.userName,
signature: res.result,
apiKey: meetConfig.apiKey,
passWord: meetConfig.passWord,
success() {
console.log('join meeting success');
},
error(respo) {
console.log(respo);
}
}
);
},
error(response) {
console.log(response);
}
});
}
});
};
render() {
console.log('Zoom meeting');
console.log(this.state.isFullTime);
return (
<Card>
<Input placeholder="enter comment here..." />
<Button
style={{ width: '150px', margin: '10px' }}
onClick={this.joinZoomMeeting}
>
Submit
</Button>
</Card>
);
}
}
export default ZoomCall;
But now new error started coming, I was calling setZoomJSLib just after the import of ZoomMtg, now below undefined error started coming:
Cannot read property âsetZoomJSLibâ of undefined
So I moved ZoomMtg.setZoomJSLib call into componentWillMount. Now no error is coming and page is not loading.
I am suspecting there is some error in configuration of zoom, as after removing zoom code part page loads properly. Probably css are from node_module/@zoomus/websdk/dist/css or something is wrong.
So I advanced, when I give render and ZoomMeeting this parameters, I see 100x200px blue window in left of my page(empty without call). When I click to button Im redirected to full screen Zoom call, but when I put