Skip to content

Instantly share code, notes, and snippets.

@mac2000

mac2000/zoom_chat_demo.html

Created September 11, 2021 11:31
Show Gist options
  • Save mac2000/1ba85c1a9c46c56e27cfa79746652825 to your computer and use it in GitHub Desktop.
Save mac2000/1ba85c1a9c46c56e27cfa79746652825 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment