Zoom Web SDK integration example

Zoom.js

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;