Zoom SDK初始化成功但ZoomMtg.join()无法执行问题求助

安全阿岳

2026-4-15

问题描述

我正在开发一个基于HTML和JS的项目，用来加入通过Zoom Workplace创建的会议室。目前ZoomMtg.init()能正常输出控制台日志，但ZoomMtg.join()完全没有日志输出。另外，当我点击“Start Session”按钮时，浏览器标签会检测到相机被使用，但Zoom的界面元素始终不出现。我猜测ZoomMtg.join()函数根本没被执行。签名是按照官方的签名生成指南（参与者角色）生成的。请问怎么才能让ZoomMtg.join()正常工作？谢谢！

源代码

<!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/2.15.0/css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.15.0/css/react-select.css" />

    <style>
        body {
            background-color: black;
            color: white;
            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;
        }
    </style>
</head>
<body>
    <div id="zmmtg-root"></div>

    <div class="controls">
        <h1>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/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>

<script>
// 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/2.15.0/lib', '/av');
    ZoomMtg.preLoadWasm();
    ZoomMtg.prepareWebSDK();

    document.getElementById("startSession").addEventListener("click", function () {
        const tmpArgs = {
            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: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBLZXkiOiJtR3RYTGJHU09DdWcyblZKY3dKV0EiLCJzZGtLZXkiOiJtR3RYTGJHU09DdWcyblZKY3dKV0EiLCJtbiI6Ijk4NTczOTIyNzkiLCJyb2xlIjoxLCJ0b2tlbkV4cCI6MTc0MDQ2MTQ0OCwiaWF0IjoxNzQwNDU3ODQ4LCJleHAiOjE3NDA0NjE0NDh9.03gMA9N6pgSrT7862rylgQGrmQZg-GE7hJ1RalYqeto',
        };

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

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

        ZoomMtg.init({
            leaveUrl: window.location.href,
            isSupportAV: true,
            success: function () {
                console.log("Success init. Attempting to join meeting...");
                console.log("About to call ZoomMtg.join with params:", {
                    meetingNumber: tmpArgs.meetingNumber,
                    userName: tmpArgs.userName,
                    sdkKey: tmpArgs.sdkKey,
                    // Omitting signature and password for security
                });
                ZoomMtg.join({
                    meetingNumber: tmpArgs.meetingNumber,
                    userName: tmpArgs.userName,
                    signature: tmpArgs.signature,
                    sdkKey: tmpArgs.sdkKey,
                    passWord: tmpArgs.passWord,
                    success: function (res) {
                        console.log("Successfully joined meeting", res);
                        document.getElementById("zmmtg-root").style.display = "block";
                        document.querySelector(".controls").style.display = "none";
                    },
                    error: function (res) {
                        console.error("Error joining meeting:", res);
                        alert("Error joining meeting: " + JSON.stringify(res));
                    }
                });
            },
            error: function (res) {
                console.error("Zoom SDK Init Error:", res);
            }
        });

        // Add 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);
        });
    });
});

</script>
</html>

排查建议（一步步来试试）

先确认签名有效性：哪怕你是按官方指南生成的，也再核对几个点：签名里的会议号和你输入的是否完全一致（别带空格或多余字符）、签名有没有过期、角色是不是设成了参与者（对应数值1）——要是误设为主持人（0）也会出问题。
检查join的参数是否正确：会议号必须是纯数字格式，别混着字母或符号；密码得是会议的参会密码，不是主持人专属密码哦。
调整SDK初始化的时机：虽然你在init的success回调里调用join，但有时候SDK的准备工作可能还没完全做完。可以把按钮事件绑定放到ZoomMtg.prepareWebSDK()的回调里，或者在init成功后加个100ms左右的延迟再调用join，看看是不是异步加载的问题。
确认运行环境是HTTPS：除了localhost本地调试，Zoom SDK必须在HTTPS环境下运行，HTTP环境会限制很多功能，包括join执行失败。另外，要确保浏览器已经允许相机和麦克风权限。
试试升级SDK版本：你用的是2.15.0版本，说不定存在已知小bug，试试升级到最新稳定版，注意所有依赖的JS、CSS文件版本要统一，别混搭不同版本。
增加全局错误监听：除了join自己的error回调，再加个全局错误监听，看看有没有漏掉的错误信息：
```
ZoomMtg.onError(function(err) {
    console.error("全局Zoom错误:", err);
});
```
先显示Zoom的DOM元素：你现在是join成功后才显示#zmmtg-root，可以改成点击按钮后先把它设为block，看看是不是元素没显示导致你误以为join没执行，说不定其实已经成功了只是看不到。

备注：内容来源于stack exchange，提问作者Danish Ghazi

Zoom SDK初始化成功但ZoomMtg.join()无法执行问题求助

问题描述 #

源代码 #

排查建议（一步步来试试） #

问题描述

源代码

排查建议（一步步来试试）