Description
I have integrated zoom web sdk 1.7.5, I am using reactjs.
The whole setup working on my local system but it is not working on production.
Error
Can’t see any error!
Which version?
web sdk 1.7.5
Css and js are loading from CDN, I am trying to ZoomMtg.setZoomJSLib(‘https://source.zoom.us/1.7.5/lib’, ‘/av’) from CDN too.
For reference I am attaching my code here.
import React, { Component } from 'react';
import { ZoomMtg } from '@zoomus/websdk';
import connect from 'src/apiClient';
import PropTypes from 'prop-types';
import { PromiseState } from 'react-refetch';
import PromiseStateContainer from '../../PromiseStateContainer';
import queryString from 'query-string';
import { createVideoConference } from '../../../services/videoConferencing.service';
import { selfUrl } from 'src/config';
const zoomMeeting = document.getElementById('zmmtg-root');
class ZoomConference extends Component {
static propTypes = {
match: PropTypes.object.isRequired,
meetingDetails: PropTypes.instanceOf(PromiseState).isRequired
};
static contextTypes = {
user: PropTypes.object.isRequired
};
constructor(props, context) {
super(props);
this.state = {
userEmail: context.user.email
};
}
componentDidMount() {
ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.5/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
ZoomMtg.leaveMeeting({});
}
launchMeeting = (meetingDetails, userEmail) => {
console.log('Launch meeting function');
const qparams = queryString.parse(window.location.search);
zoomMeeting.style.display = 'flex';
zoomMeeting.style.height = '100%';
zoomMeeting.style.width = '100%';
zoomMeeting.style.position = 'fixed';
zoomMeeting.style.zIndex = '1';
zoomMeeting.style.backgroundColor = 'black';
const apiKey = Buffer.from(meetingDetails.api_key, 'base64').toString('utf8');
const meetingId = parseInt(meetingDetails.meeting_id, 10);
const { refType } = this.props.match.params;
ZoomMtg.init({
debug: true,
isSupportAV: true,
leaveUrl: `${selfUrl}videoConferencing/zoom/ended/${meetingId}?ref_type=${refType}&ref_id=${qparams.ref_id}`,
success() {
ZoomMtg.join(
{
meetingNumber: meetingId,
userName: userEmail,
signature: meetingDetails.signature,
apiKey,
passWord: meetingDetails.password,
success() {
console.log('join meeting success');
},
error(res2) {
console.log(res2);
}
}
);
},
error(res3) {
console.log(res3);
}
});
};
renderZoom = data => (
<PromiseStateContainer
ps={data}
onFulfillment={(meetingDetails) => (
<span>
{this.launchMeeting(meetingDetails, this.state.userEmail)}
</span>
)}
/>
);
render() {
console.log('Rendering the component');
zoomMeeting.style.display = 'none';
zoomMeeting.style.height = '0px';
zoomMeeting.style.width = '0px';
zoomMeeting.style.position = 'relative';
zoomMeeting.style.backgroundColor = 'black';
zoomMeeting.style.zIndex = '1';
return (
<span>{this.renderZoom(this.props.meetingDetails)}</span>
);
}
}
export default connect(({ match }) => {
const { refType } = match.params;
console.log('Calling api');
const qparams = queryString.parse(window.location.search);
return {
meetingDetails: createVideoConference(refType, qparams.ref_id, qparams.role)
};
})(ZoomConference);
I am trying to debug but don’t have any clues about what could be going wrong here.
