Zoom web sdk integration is not working

Meeting SDK Web
15

Hey @hrondor,
What are you getting for checkSystemRequirements in console?
Is your ZoomMtg loading fine?

Did you managed properly the zmmtg-root display properties as from the post Zoom Meeting Custom Ui.

What are you seeing in DOM’s network tab for the bootstrap.css and react-select.css?

I am pasting my current code, let me know if you get it worked with this.

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 { 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
  };

  constructor(props) {
    super(props);
    this.state = {
      userEmail: 'myemail'
    };
  }

  componentDidMount() {
    ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.7/lib', '/av');
    ZoomMtg.preLoadWasm();
    ZoomMtg.prepareJssdk();
  }

  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@gmail.com',
                            passWord: meetConfig.passWord,
                            success() {
                                console.log('join meeting success');
                            },
                            error(res) {
                                console.log(res);
                            }
                        }
                    );
                },
                error(res) {
                    console.log(res);
                }
            });
        }
    });
}


  render() {
    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.launchMeeting()}</span>
    );
  }
}

Index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" />
  <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.7/css/bootstrap.css" />
  <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.7/css/react-select.css" />
</head>
<body>
<div id='root'></div>
<script src="https://source.zoom.us/1.7.7/lib/vendor/jquery.min.js"></script>
</body>
2 Likes