Example of React with Hooks integration, and how to build for production

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;

}
2 Likes

Hey @miguel.villarreal,

Thanks for your contribution to the Zoom developer community! I am sure developers will find this helpful! :slight_smile:

-Tommy

Please help me t

“When I press screen window for sharing then there is a notification “screen sharing has failed to start” and Error code- 105035”

Hey @ronyfirst,

Please create a new thread here: #web-sdk

Thanks,
Tommy

hey did you solved your problem?

Hey @Sebastian,

Please create a new thread here: #web-sdk

Thanks,
Tommy