zoom

import React from 'react';
import { ZoomMtg } from 'zoomus-jssdk';

const ZoomMetting = ({ meetingId, username, apiKey, apiSecret }) => {

    const insideMeeting = () => {

        ZoomMtg.preLoadWasm();
        ZoomMtg.prepareJssdk();


        const API_KEY = apiKey;

        /**
            * NEVER PUT YOUR ACTUAL API SECRET IN CLIENT SIDE CODE, THIS IS JUST FOR QUICK PROTOTYPING
            * The below generateSignature should be done server side as not to expose your api secret in public
            * You can find an eaxmple in here: https://marketplace.zoom.us/docs/sdk/native-sdks/Web-Client-SDK/tutorial/generate-signature
            */
        const API_SECRET = apiSecret;

        const meetConfig = {
            apiKey: API_KEY,
            apiSecret: API_SECRET,
            meetingNumber: meetingId,
            userName: username,
            passWord: '',
            leaveUrl: 'https://zoom.us',
            role: 0
        };

        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',
                    isSupportAV: true,
                    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);
                    }
                });
            }
        });
    }


    return (
        <button onClick={ insideMeeting }>Inside</button>
    );
}

export default ZoomMetting;