mac2000/zoom_chat_demo.html

## zoom_chat_demo.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.9.8/css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.9.8/css/react-select.css" />
    <style>
        #wc-container-left,
        .join-dialog,
        .full-screen-icon,
        .chat-header__header,
        .chat-container__chat-control,
        .show-tip,
        .chat-item__to,
        .chat-item__chat-info-header--everyone,
        .chat-item__chat-info-time-stamp,
        grammarly-extension,
        .window-header.clearfix {
            display: none !important;
        }

        #wc-container-right,
        .chat-virtualized-list,
        .ReactVirtualized__Grid__innerScrollContainer > div,
        #chat-window,
        .ReactModal__Content.ReactModal__Content--after-open {
            width: 100vw !important;
        }

        .ReactVirtualized__Grid__innerScrollContainer {
            max-width: 100vw !important;
        }

        .chat-box__chat-textarea {
            border-radius: 0 !important;
            background: #ebebeb !important;
            display: block !important;
            outline: none !important;
        }

        .chat-virtualized-list {
            height: calc(100vh - 90px) !important;
        }

        .ReactVirtualized__Grid__innerScrollContainer > div {
            border: none !important;
        }

        .chat-virtualized-list {
            outline: none !important;
        }
    </style>
</head>
<body>
    <form id="login" style="padding: 1em;width:100vw;">
        <div class="form-group">
            <label for="apiKey">apiKey</label>
            <input type="password" class="form-control" id="apiKey" placeholder="apiKey" value="" required />
        </div>
        <div class="form-group">
            <label for="apiSecret">apiSecret</label>
            <input type="password" class="form-control" id="apiSecret" placeholder="apiSecret" value="" required />
        </div>
        <div class="form-group">
            <label for="meetingNumber">meetingNumber</label>
            <input type="number" class="form-control" id="meetingNumber" placeholder="meetingNumber" value="" required />
        </div>
        <div class="form-group">
            <label for="password">password</label>
            <input type="password" class="form-control" id="password" placeholder="password" value="" />
        </div>
        <button type="submit" class="btn btn-primary btn-block">Join</button>
    </form>


    <script src="https://source.zoom.us/1.9.8/lib/vendor/react.min.js"></script>
    <script src="https://source.zoom.us/1.9.8/lib/vendor/react-dom.min.js"></script>
    <script src="https://source.zoom.us/1.9.8/lib/vendor/redux.min.js"></script>
    <script src="https://source.zoom.us/1.9.8/lib/vendor/redux-thunk.min.js"></script>
    <script src="https://source.zoom.us/1.9.8/lib/vendor/lodash.min.js"></script>
    <script src="https://source.zoom.us/zoom-meeting-1.9.8.min.js"></script>
    <script>
        ZoomMtg.setZoomJSLib('https://source.zoom.us/1.9.8/lib', '/av');
        ZoomMtg.preLoadWasm();
        ZoomMtg.prepareJssdk();
        ZoomMtg.i18n.load('en-US');
        ZoomMtg.i18n.reload('en-US');

        document.getElementById('zmmtg-root').style.visibility = 'hidden'

        document.getElementById('login').addEventListener('submit', event => {
            event.preventDefault()

            const apiKey = document.getElementById('apiKey').value
            const apiSecret = document.getElementById('apiSecret').value
            const meetingNumber = document.getElementById('meetingNumber').value
            const password = document.getElementById('password').value
            const signature = ZoomMtg.generateSignature({ apiKey, apiSecret, meetingNumber, role: 0 })

            console.log('submit', {meetingNumber, password,signature})

            ZoomMtg.init({

                debug: false, //optional
                leaveUrl: 'http://localhost:3000/', //required
                // webEndpoint: 'PSO web domain', // PSO option
                showMeetingHeader: false, //option
                disableInvite: true, //optional
                disableCallOut: true, //optional
                disableRecord: true, //optional
                disableJoinAudio: true, //optional
                audioPanelAlwaysOpen: false, //optional
                showPureSharingContent: true, //optional
                isSupportAV: false, //optional,
                isSupportChat: true, //optional,
                isSupportQA: false, //optional,
                isSupportPolling: false, //optional
                isSupportBreakout: false, //optional
                isSupportCC: false, //optional,
                screenShare: false, //optional,
                // rwcBackup: '', //optional,
                videoDrag: false, //optional,
                // sharingMode: 'both', //optional,
                videoHeader: false, //optional,
                isLockBottom: true, // optional,
                isSupportNonverbal: false, // optional,
                isShowJoiningErrorDialog: false, // optional,
                disablePreview: true, // optional
                disableCORP: true, // optional
                //inviteUrlFormat: '', // optional
                // loginWindow: {  // optional,
                //   width: 400,
                //   height: 380
                // },
                meetingInfo: [ // optional
                    // 'topic',
                    // 'host',
                    // 'mn',
                    // 'pwd',
                    // 'telPwd',
                    // 'invite',
                    // 'participant',
                    // 'dc',
                    // 'enctype',
                    // 'report'
                ],
                disableVoIP: true, // optional
                disableReport: true, // optional

                success: (success) => {
                    console.log('initialized', success)

                    ZoomMtg.join({
                        signature,
                        meetingNumber,
                        userName: 'Bot',
                        apiKey: apiKey,
                        userEmail: '',
                        passWord: password,
                        tk: '',
                        success: (success) => {
                            console.log(success)
                            document.getElementById('zmmtg-root').style.visibility = 'visible'
                            // open chat window
                            document.querySelector('.footer-button__chat-icon').closest('button').click()
                        },
                        error: (error) => {
                            console.log(error)
                        }
                    })
                    window.onbeforeunload = () => ZoomMtg.leaveMeeting()
                },
                error: (error) => {
                    console.log(error)
                }
            })
        })
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.9.8/css/bootstrap.css" />
	<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.9.8/css/react-select.css" />
	<style>
	#wc-container-left,
	.join-dialog,
	.full-screen-icon,
	.chat-header__header,
	.chat-container__chat-control,
	.show-tip,
	.chat-item__to,
	.chat-item__chat-info-header--everyone,
	.chat-item__chat-info-time-stamp,
	grammarly-extension,
	.window-header.clearfix {
	display: none !important;
	}

	#wc-container-right,
	.chat-virtualized-list,
	.ReactVirtualized__Grid__innerScrollContainer > div,
	#chat-window,
	.ReactModal__Content.ReactModal__Content--after-open {
	width: 100vw !important;
	}

	.ReactVirtualized__Grid__innerScrollContainer {
	max-width: 100vw !important;
	}

	.chat-box__chat-textarea {
	border-radius: 0 !important;
	background: #ebebeb !important;
	display: block !important;
	outline: none !important;
	}

	.chat-virtualized-list {
	height: calc(100vh - 90px) !important;
	}

	.ReactVirtualized__Grid__innerScrollContainer > div {
	border: none !important;
	}

	.chat-virtualized-list {
	outline: none !important;
	}
	</style>
	</head>
	<body>
	<form id="login" style="padding: 1em;width:100vw;">
	<div class="form-group">
	<label for="apiKey">apiKey</label>
	<input type="password" class="form-control" id="apiKey" placeholder="apiKey" value="" required />
	</div>
	<div class="form-group">
	<label for="apiSecret">apiSecret</label>
	<input type="password" class="form-control" id="apiSecret" placeholder="apiSecret" value="" required />
	</div>
	<div class="form-group">
	<label for="meetingNumber">meetingNumber</label>
	<input type="number" class="form-control" id="meetingNumber" placeholder="meetingNumber" value="" required />
	</div>
	<div class="form-group">
	<label for="password">password</label>
	<input type="password" class="form-control" id="password" placeholder="password" value="" />
	</div>
	<button type="submit" class="btn btn-primary btn-block">Join</button>
	</form>


	<script src="https://source.zoom.us/1.9.8/lib/vendor/react.min.js"></script>
	<script src="https://source.zoom.us/1.9.8/lib/vendor/react-dom.min.js"></script>
	<script src="https://source.zoom.us/1.9.8/lib/vendor/redux.min.js"></script>
	<script src="https://source.zoom.us/1.9.8/lib/vendor/redux-thunk.min.js"></script>
	<script src="https://source.zoom.us/1.9.8/lib/vendor/lodash.min.js"></script>
	<script src="https://source.zoom.us/zoom-meeting-1.9.8.min.js"></script>
	<script>
	ZoomMtg.setZoomJSLib('https://source.zoom.us/1.9.8/lib', '/av');
	ZoomMtg.preLoadWasm();
	ZoomMtg.prepareJssdk();
	ZoomMtg.i18n.load('en-US');
	ZoomMtg.i18n.reload('en-US');

	document.getElementById('zmmtg-root').style.visibility = 'hidden'

	document.getElementById('login').addEventListener('submit', event => {
	event.preventDefault()

	const apiKey = document.getElementById('apiKey').value
	const apiSecret = document.getElementById('apiSecret').value
	const meetingNumber = document.getElementById('meetingNumber').value
	const password = document.getElementById('password').value
	const signature = ZoomMtg.generateSignature({ apiKey, apiSecret, meetingNumber, role: 0 })

	console.log('submit', {meetingNumber, password,signature})

	ZoomMtg.init({

	debug: false, //optional
	leaveUrl: 'http://localhost:3000/', //required
	// webEndpoint: 'PSO web domain', // PSO option
	showMeetingHeader: false, //option
	disableInvite: true, //optional
	disableCallOut: true, //optional
	disableRecord: true, //optional
	disableJoinAudio: true, //optional
	audioPanelAlwaysOpen: false, //optional
	showPureSharingContent: true, //optional
	isSupportAV: false, //optional,
	isSupportChat: true, //optional,
	isSupportQA: false, //optional,
	isSupportPolling: false, //optional
	isSupportBreakout: false, //optional
	isSupportCC: false, //optional,
	screenShare: false, //optional,
	// rwcBackup: '', //optional,
	videoDrag: false, //optional,
	// sharingMode: 'both', //optional,
	videoHeader: false, //optional,
	isLockBottom: true, // optional,
	isSupportNonverbal: false, // optional,
	isShowJoiningErrorDialog: false, // optional,
	disablePreview: true, // optional
	disableCORP: true, // optional
	//inviteUrlFormat: '', // optional
	// loginWindow: { // optional,
	// width: 400,
	// height: 380
	// },
	meetingInfo: [ // optional
	// 'topic',
	// 'host',
	// 'mn',
	// 'pwd',
	// 'telPwd',
	// 'invite',
	// 'participant',
	// 'dc',
	// 'enctype',
	// 'report'
	],
	disableVoIP: true, // optional
	disableReport: true, // optional

	success: (success) => {
	console.log('initialized', success)

	ZoomMtg.join({
	signature,
	meetingNumber,
	userName: 'Bot',
	apiKey: apiKey,
	userEmail: '',
	passWord: password,
	tk: '',
	success: (success) => {
	console.log(success)
	document.getElementById('zmmtg-root').style.visibility = 'visible'
	// open chat window
	document.querySelector('.footer-button__chat-icon').closest('button').click()
	},
	error: (error) => {
	console.log(error)
	}
	})
	window.onbeforeunload = () => ZoomMtg.leaveMeeting()
	},
	error: (error) => {
	console.log(error)
	}
	})
	})
	</script>
	</body>
	</html>