1)How to integrate the Zoom Meeting SDK with a web application using React without creating a JWT token, directly using the SDK key and SDK secret?
2)Is it necessary to complete all sections to obtain the Meeting SDK credentials, and are they available for free users
How to integrate the Zoom Meeting SDK with a web application using React without creating a JWT token, directly using the SDK key and SDK secret?
You will need to use the Client Key and Client ID to sign a authentication token, and it is to authenticate your Zoom Meeting SDK for Web
Is it necessary to complete all sections to obtain the Meeting SDK credentials, and are they available for free users
You will need to enter the long desc, short desc, name and email to start development. If you wish to join external meetings, you will need to publish your app. The SDK is available for free users
thank you @chunsiong.zoom sir for respond me now i am facing the Uncaught runtime errors:
×
ERROR
[object Object]
import React, { useEffect, Fragment,useContext } from “react”;
const Meeting = () => {
const payload = {
meetingNumber: “”,
role:0,
sdkKey:‘’,
sdkSecret:‘’,
passWord: “”,
userName:“test”,
userEmail: “”,
leaveUrl: “http://localhost:3000”,
};
useEffect(() => {
const initializeMeeting = async () => {
try {
const { ZoomMtg } = await import(“@zoomus/websdk”);
ZoomMtg.setZoomJSLib('https://source.zoom.us/2.17.0/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
// loads language files, also passes any error messages to the ui
// ZoomMtg.i18n.load('en-US');
// ZoomMtg.i18n.reload('en-US');
ZoomMtg.generateSDKSignature({
meetingNumber: payload.meetingNumber,
role: payload.role,
sdkKey: payload.sdkKey,
sdkSecret: payload.sdkSecret,
success: function (signature) {
ZoomMtg.init({
leaveUrl: payload.leaveUrl,
success: function (data) {
ZoomMtg.join({
meetingNumber: payload.meetingNumber,
signature: signature.result,
sdkKey: payload.sdkKey,
userName: payload.userName,
userEmail: payload.userEmail,
passWord: payload.passWord,
tk: "",
success: function () {
console.log("-- joined --");
},
error: function (joinError) {
console.error("Error joining meeting:", joinError);
},
});
},
error: function (initError) {
console.error("Error initializing Zoom:", initError);
},
});
},
error: function (signError) {
console.error("Error generating SDK signature:", signError);
},
});
} catch (error) {
console.error("Error while initializing Zoom:", error);
}
};
initializeMeeting();
}, [payload.meetingNumber, payload.role, payload.sdkKey, payload.sdkSecret, payload.passWord, payload.userName, payload.userEmail, payload.leaveUrl]);
return (
</Fragment>
);
};
export default Meeting;
this is my package.json @chunsiong.zoom
{
“name”: “”,
“version”: “0.1.0”,
“private”: true,
“dependencies”: {
“@aws-amplify/storage”: “^5.9.5”,
“@emailjs/browser”: “^3.10.0”,
“@emotion/react”: “^11.11.0”,
“@emotion/styled”: “^11.11.0”,
“@fortawesome/fontawesome-free”: “^6.4.2”,
“@fortawesome/fontawesome-svg-core”: “^6.4.2”,
“@fortawesome/free-brands-svg-icons”: “^6.4.2”,
“@fortawesome/free-solid-svg-icons”: “^6.4.2”,
“@fortawesome/react-fontawesome”: “^0.2.0”,
“@mui/icons-material”: “^5.14.12”,
“@mui/material”: “^5.13.2”,
“@testing-library/jest-dom”: “^5.14.1”,
“@testing-library/react”: “^13.0.0”,
“@testing-library/user-event”: “^13.2.1”,
“@zoomus/websdk”: “2.17.0”,
“autoprefixer”: “^10.4.13”,
“aws-amplify”: “^5.3.11”,
“aws-cdk”: “^2.50.0”,
“aws-cdk-lib”: “^2.50.0”,
“bootstrap”: “^5.3.0”,
“postcss”: “^8.4.18”,
“react”: “^18.2.0”,
“react-avatar-editor”: “^13.0.0”,
“react-bootstrap”: “^2.5.0”,
“react-collapsible”: “^2.10.0”,
“react-dom”: “^18.2.0”,
“react-faq-component”: “^1.3.4”,
“react-icons”: “^4.6.0”,
“react-image-crop”: “^10.1.8”,
“react-material-ui-form-validator”: “^3.0.1”,
“react-phone-input-2”: “^2.15.1”,
“react-router-bootstrap”: “^0.26.2”,
“react-router-dom”: “^6.4.3”,
“react-scripts”: “^5.0.1”,
“tailwindcss”: “^3.2.2”,
“uuid”: “^9.0.0”,
“web-vitals”: “^2.1.0”
},
“scripts”: {
“start”: “react-scripts start”,
“dev”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”
},
“eslintConfig”: {
“extends”: [
“react-app”,
“react-app/jest”
]
},
“browserslist”: {
“production”: [
“>0.2%”,
“not dead”,
“not op_mini all”
],
“development”: [
“last 1 chrome version”,
“last 1 firefox version”,
“last 1 safari version”
]
},
“devDependencies”: {
“@tailwindcss/container-queries”: “^0.1.0”
},
“rules”: {
“no-unused-vars”: “off”
}
}
is this not possible with the new version of react ? @chunsiong.zoom because it disrupte my other pages design
and it is properly work in another file with same version but when i copy the code to this file this is showing the object object error but when i close the error and and click join its show another time the object object error after that i close the error than it properly working?
@uitestingawsai , this is not possible at the moment. We have plans to support react 17 and 18 in near future, but for the current versions, web SDK - client view only supports react 16.
The other solution would be to look at web sdk - component view. Component view supports react >16
@chunsiong.zoom sir component view is for host only i want to first deploy the client view and it is properly work in another file with same version but when i copy the code to this file this is showing the object object error but when i close the error and and click join its show another time the object object error after that i close the error than it properly work ? but the zoom work when i close the error
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.