Sample code for UI-Toolkit with Zoom Video SDK and Pure JavaScript

This is a sample code page for JavaScript + CSS + HTML. It shows the common code sample when interacting with Zoom Video SDK UI Tookit

Github Link

github source code (To be added)

Live Demo

Original Education Healthcare Real Estate

Code Samples

Tab 1 Content

  
    <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>


Tab 2 Content

    
        npm install @zoom/videosdk-ui-toolkit --save
  
  

Tab 3 Content