Zoom SDK - Keep Receiving 'You are hosting another meeting'

Question

Im trying to join a meet from HTML and JS using Zoom Meet SDK. But when I try to join, I keep getting 'You are hosting another meeting. Do you want to end it and start this new meeting?'. The meeting room I first created using Zoom Workplace using a zoom account. And the signature I generate at https://developers.zoom.us/docs/meeting-sdk/auth/ . The console log that i get is {method: 'join', status: false, result: null, errorMessage: 'Fail to join the meeting.', errorCode: 1}. What should I do to make it successfully join the meeting I created from HTML?

My Code:

// Utility functions for debugging
const testTool = {
    parseQuery: () => {
        return {
            sdkKey: document.getElementById("sdkKey").value.trim(),
            meetingNumber: document.getElementById("meetingNumber").value.trim(),
            passWord: document.getElementById("passWord").value.trim(),
            userName: document.getElementById("userName").value.trim(),
            signature: document.getElementById("signature").value.trim(),
        };
    },
    detectOS: () => {
        const userAgent = navigator.userAgent.toLowerCase();
        if (userAgent.indexOf('win') > -1) return 'Windows';
        if (userAgent.indexOf('mac') > -1) return 'Mac';
        if (userAgent.indexOf('linux') > -1) return 'Linux';
        return 'Unknown OS';
    },
    getBrowserInfo: () => {
        const ua = navigator.userAgent;
        let tem;
        let M = ua.match(/(chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
        return M[1] || "Unknown";
    }
};

// Main script
document.addEventListener('DOMContentLoaded', function () {
    if (typeof ZoomMtg === "undefined") {
        console.error("Zoom SDK failed to load.");
        return;
    }

    console.log("Zoom SDK Loaded");
    console.log(JSON.stringify(ZoomMtg.checkFeatureRequirements()));

    // Initialize Zoom SDK
    // ZoomMtg.setZoomJSLib('https://source.zoom.us/3.1.0/lib', '/av');
    ZoomMtg.setZoomJSLib('https://source.zoom.us/3.1.0/lib', '/av');
    ZoomMtg.preLoadWasm();
    ZoomMtg.prepareWebSDK();

    document.getElementById("startSession").addEventListener("click", function () {
        const meetingConfig = {
            sdkKey: document.getElementById("sdkKey").value.trim(),
            meetingNumber: document.getElementById("meetingNumber").value.trim(),
            passWord: document.getElementById("passWord").value.trim(),
            userName: document.getElementById("userName").value.trim(),
            signature: document.getElementById("signature").value.trim(),
        };

        if (!meetingConfig.meetingNumber || !meetingConfig.passWord || !meetingConfig.userName || !meetingConfig.sdkKey || !meetingConfig.signature) {
            alert("Please fill in all required fields.");
            return;
        }

        console.log("Meeting Config:", meetingConfig);
        console.log("Generated Signature:", meetingConfig.signature);

        // Initialize Zoom
        ZoomMtg.init({
            leaveUrl: 'https://localhost:8060/Default.html',
            isSupportAV: true,
            success: function () {
                document.querySelector(".controls").style.display = "none";
                console.log("Success init. Attempting to end any existing meeting...");
                // Try to end any existing meeting first
                proceedWithJoining();
                // ZoomMtg.leaveMeeting({
                //     success: function() {
                //         console.log("Successfully ended previous meeting");
                //         proceedWithJoining();
                //     },
                //     error: function(res) {
                //         console.log("No active meeting to end or error:", res);
                //         proceedWithJoining();
                //     }
                // });
            },
            error: function (res) {
                console.error("Zoom SDK Init Error:", res);
            }
        });

        // Function to handle the actual joining process
        function proceedWithJoining() {

            ZoomMtg.join({
                meetingNumber: meetingConfig.meetingNumber,
                userName: meetingConfig.userName,
                signature: meetingConfig.signature,
                sdkKey: meetingConfig.sdkKey,
                passWord: meetingConfig.passWord,
                success: function (res) {
                    console.log("Successfully joined meeting", res);
                },
                error: function (res) {
                    console.error("Error joining meeting:", res);
                }
            });
        }

        // Keep the event listeners for debugging
        ZoomMtg.inMeetingServiceListener("onUserJoin", function (data) {
            console.log("User joined:", data);
        });

        ZoomMtg.inMeetingServiceListener("onUserLeave", function (data) {
            console.log("User left:", data);
        });

        ZoomMtg.inMeetingServiceListener("onMeetingStatus", function (data) {
            console.log("Meeting status changed:", data);
        });
    });
});

body {
            background-color: rgb(63, 63, 63) !important;
            color: rgb(46, 46, 46);
            text-align: center;
        }
        #zmmtg-root {
            display: none; /* Initially hidden until Zoom starts */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
        }
        .controls {
            position: relative;
            z-index: 1001;
        }
        .btn {
            background-color: #007bff;
            border: none;
            color: white;
            padding: 15px 32px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 20px;
        }
        .input-field {
            margin: 10px auto;
            padding: 8px;
            width: 80%;
            max-width: 400px;
            display: block;
        }
        .zoom-kiosk-title {
            font-size: 3rem;
            margin: 4rem;
            font-family: 'Epilogue', sans-serif;
            color: darkgray;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kiosk Video Call</title>

    <!-- Required Zoom CSS -->
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/3.1.0/css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/3.1.0/css/react-select.css" />        
</head>
<body>
    <div id="zmmtg-root"></div>

    <div class="controls">
        <h1 class="zoom-kiosk-title">Kiosk Video Call</h1>
        <input id="meetingNumber" class="input-field" type="text" placeholder="Enter Meeting Number">
        <input id="passWord" class="input-field" type="text" placeholder="Enter Meeting Password">
        <input id="userName" class="input-field" type="text" placeholder="Enter Your Name" value="Kiosk Client">
        <input id="sdkKey" class="input-field" type="text" placeholder="Enter SDK Key">
        <input id="signature" class="input-field" type="text" placeholder="Enter Signature">
        <button id="startSession" class="btn">Start Session</button>
    </div>

</body>

<!-- Add Lodash before Zoom SDK -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

<!-- Load Zoom SDK Dependencies -->
<script src="https://source.zoom.us/3.1.0/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/3.1.0/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/3.1.0/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/3.1.0/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/3.1.0/zoom-meeting-3.1.0.min.js"></script>
</html>