admin管理员组文章数量:1278721
I am developing an HTML and JS project for joining a meeting room created using ZoomWorkplace app. Right now I'm getting console logs for ZoomMtg.init(), but I'm not getting any logs for ZoomMtg.join(). Its also worth noting that when I press the 'Start Session' button, the tab detects that it uses camera, but no Zoom element appears. So my guess is it doesn't run the ZoomMtg.join() function. For the signature, I generated using this link: / with role type of participant. How can I make the ZoomMtg.join() functioning? Thank you in advance.
Source 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>
<!-- Required Zoom CSS -->
<link type="text/css" rel="stylesheet" href=".15.0/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href=".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=".js/4.17.21/lodash.min.js"></script>
<!-- Load Zoom SDK Dependencies -->
<script src=".15.0/lib/vendor/react.min.js"></script>
<script src=".15.0/lib/vendor/react-dom.min.js"></script>
<script src=".15.0/lib/vendor/redux.min.js"></script>
<script src=".15.0/lib/vendor/redux-thunk.min.js"></script>
<script src=".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('.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>
I am developing an HTML and JS project for joining a meeting room created using ZoomWorkplace app. Right now I'm getting console logs for ZoomMtg.init(), but I'm not getting any logs for ZoomMtg.join(). Its also worth noting that when I press the 'Start Session' button, the tab detects that it uses camera, but no Zoom element appears. So my guess is it doesn't run the ZoomMtg.join() function. For the signature, I generated using this link: https://developers.zoom.us/docs/meeting-sdk/auth/ with role type of participant. How can I make the ZoomMtg.join() functioning? Thank you in advance.
Source 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>
<!-- 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/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 Answer
Reset to default 0I have reviewed Zoom SDK documentation and your code, and I suspect that the meeting you are trying to join is not in active state, that might be the reason that you are not able to join.
Kindly do verify that, also if you are starting the meeting then make sure to provide zak (Zoom Access Key) token.
本文标签： javascriptZoom SDK Works in ZoomMtginit()but not ZoomMtgjoin()Stack Overflow
版权声明：本文标题：javascript - Zoom SDK Works in ZoomMtg.init(), but not ZoomMtg.join() - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741225992a2361866.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论