All functions work fine.
But the leave button and the view button don’t work. Why?
Nothing appears in the log.
The development environment is Next.js.
import React, { useState, useEffect } from "react";
import { ZoomMtg } from "@zoomus/websdk";
import { useRouter } from "next/router";
// @ts-ignore
const Zoomcompo = () => {
const router = useRouter();
useEffect(() => {
ZoomMtg.setZoomJSLib("https://source.zoom.us/2.5.0/lib", "/av");
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
// loads language files, also passes any error messages to the ui
ZoomMtg.i18n.load("ko-KO");
ZoomMtg.i18n.reload("ko-KO");
}, []);
const [meetingNumber, setMeetingNumber] = useState<any>(
Object.keys(router.query)[0].substring(11, 0)
);
const [passWord, setPassWord] = useState<any>(
router.query[Object.keys(router.query)[0]]
);
var apiKey = "MYAPIKEY";
var role = 0;
var leaveUrl = "/class/classList";
var userName = "React";
var userEmail = "";
var registrantToken = "";
const getSignature = (e: any) => {
e.preventDefault();
return new Promise((resolve, reject) => {
try {
const signature = ZoomMtg.generateSignature({
meetingNumber: meetingNumber,
apiKey: "MYAPIKEY",
apiSecret: "MYAPIKEYSCRT",
// @ts-ignore
role: role,
});
resolve(signature);
startMeeting(signature);
} catch (e) {
reject(Error("generate signature rejected"));
}
});
};
// @ts-ignore
function startMeeting(signature: any) {
// @ts-ignore
document.getElementById("zmmtg-root").style.display = "block";
ZoomMtg.init({
leaveUrl: leaveUrl,
success: (success: any) => {
console.log(success);
ZoomMtg.join({
signature: signature,
meetingNumber: meetingNumber,
userName: userName,
apiKey: apiKey,
userEmail: userEmail,
passWord: passWord,
tk: registrantToken,
success: (success: any) => {
console.log(success);
},
error: (error: any) => {
console.log(error);
},
});
},
error: (error: any) => {
console.log(error);
},
});
}
return (
<div>
<main>
<h1>Zoom Meeting SDK Sample React</h1>
<button onClick={getSignature}>Join Meeting</button>
</main>
</div>
);
};
export default Zoomcompo;
