CODEWITHSUNDEEP
javascripthtmlzoom-sdk
Danish Ghazi
Danish Ghazi

Reputation: 79

Zoom Meeting SDK: Uncaught TypeError: Cannot read properties of null (reading 'append')

I'm trying to develop an HTML and JavaScript website that can join a meeting room using Zoom Meeting SDK. I'm new to Zoom Meeting SDK so I'm quite confused on why I keep getting the error 'Uncaught TypeError: Cannot read properties of null (reading 'append')'. For now I'm using front-end only. Below is the error:

Error Message Appeared

This is my simple code:

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

    <!-- 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/2.15.0/lib/vendor/react.min.js"></script>
    <script src="https://source.zoom.us/2.15.0/lib/vendor/react-dom.min.js"></script>
    <script src="https://source.zoom.us/2.15.0/lib/vendor/redux.min.js"></script>
    <script src="https://source.zoom.us/2.15.0/lib/vendor/redux-thunk.min.js"></script>
    <script src="https://source.zoom.us/2.15.0/zoom-meeting-2.15.0.min.js"></script>

    <style>
        /* Ensure Zoom Meeting UI is properly displayed */
        #zmmtg-root { 
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            background-color: white;
        }
        .meeting-app {
            display: none;
        }
        body { text-align: center; font-family: Arial, sans-serif; }
        .btn {
            background-color: #007bff;
            border: none;
            color: white;
            padding: 15px 32px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 20px;
        }
        .input-field {
            margin: 10px;
            padding: 8px;
            width: 80%;
            max-width: 400px;
            display: block;
        }
    </style>
</head>
<body>

    <h1>Test Video Call</h1>

    <div id="zmmtg-root"></div>
    <div id="aria-notify-area"></div>
    <div class="meeting-app"></div>
    
    <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="apiKey" class="input-field" type="text" placeholder="Enter API Key">
    <input id="signature" class="input-field" type="text" placeholder="Enter Signature">

    <button id="startSession" class="btn">Start Session</button>

</body>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        console.log("Checking if ZoomMtg is loaded...");
        
        if (typeof ZoomMtg === "undefined") {
            console.error("Zoom SDK failed to load. Check network connection or script URL.");
            return;
        }

        console.log("Zoom SDK Loaded Successfully");

        // Initialize Zoom SDK
        ZoomMtg.setZoomJSLib("https://source.zoom.us/2.15.0/lib", "/av");
        ZoomMtg.preLoadWasm();
        ZoomMtg.prepareWebSDK();
        ZoomMtg.i18n.load('en-US');
        ZoomMtg.i18n.reload('en-US');

        document.getElementById("startSession").addEventListener("click", function () {
            console.log("Start Session button clicked.");

            // Show Zoom Meeting Container
            document.getElementById('zmmtg-root').style.display = 'block';

            // Get User Inputs
            const meetingNumber = document.getElementById("meetingNumber").value.trim();
            const passWord = document.getElementById("passWord").value.trim();
            const userName = document.getElementById("userName").value.trim();
            const apiKey = document.getElementById("apiKey").value.trim();
            const signature = document.getElementById("signature").value.trim(); 

            if (!meetingNumber || !passWord || !userName || !apiKey || !signature) {
                alert("Please fill in all fields before starting the session.");
                return;
            }

            console.log("Initializing Zoom SDK...");

            ZoomMtg.init({
                leaveUrl: window.location.origin + window.location.pathname,
                isSupportAV: true,
                disableInvite: true,
                success: function () {
                    console.log("Zoom SDK Initialized.");
                    ZoomMtg.join({
                        meetingNumber: meetingNumber,
                        userName: userName,
                        signature: signature,
                        apiKey: apiKey,
                        passWord: passWord,
                        success: function () {
                            console.log("Joined Meeting Successfully!");
                        },
                        error: function (error) {
                            console.error("Zoom Join Error:", error);
                            document.getElementById('zmmtg-root').style.display = 'none';
                        },
                    });
                },
                error: function (error) {
                    console.error("Zoom Init Error:", error);
                    document.getElementById('zmmtg-root').style.display = 'none';
                },
            });
        });
    });
</script>

</html>

Upvotes: 1

Views: 29

Answers (1)

Sateesh
Sateesh

Reputation: 321

Move these to be the end inside <body> tag so they run after the document is loaded.

<script src="https://source.zoom.us/2.15.0/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/2.15.0/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/2.15.0/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/2.15.0/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/2.15.0/zoom-meeting-2.15.0.min.js"></script>

Upvotes: 1

Related Questions