This is a sample code page for JavaScript + CSS + HTML. It shows the common code sample when interacting with Zoom Video SDK UI Tookit
<head>
<link rel="stylesheet" href="./videosdk-ui-toolkit/dist/videosdk-ui-toolkit.css">
<script src=" ./videosdk-ui-toolkit/index.js" type="module"></script>
</head>
<body>
.
.
.
.
.
.
<div id='sessionContainer' width="500"></div>
.
.
.
<script type="module">
import uitoolkit from './videosdk-ui-toolkit/index.js';
document.getElementById("joinSessionBtn").addEventListener("click", function() {
// Function to retrieve query parameters from the URL
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Retrieve values from query parameters
var videoSDKJWT = getParameterByName('jwt');
var sessionName = getParameterByName('sessionName');
var userName = getParameterByName('userName');
var sessionPasscode = getParameterByName('sessionPasscode');
var sessionContainer = document.getElementById('sessionContainer');
var config = {
videoSDKJWT: videoSDKJWT || '',
sessionName: sessionName || 'webchun6871',
userName: userName || 'chun',
sessionPasscode: sessionPasscode || '12345678',
features: ['video', 'audio', 'share', 'chat', 'users', 'settings']
};
uitoolkit.joinSession(sessionContainer, config);
});
</script>
</body>
npm install @zoom/videosdk-ui-toolkit --save