Description
Hello,
I would like to integrate Zoom Web SDK into my website, and I was trying to figure out how it works by using the sample React and Node.js projects provided at GitHub.
Since the sample projects are built to be working right out of the box after filling the necessary information like SDK KEY, SDK SECRET, meeting number etc. I was able to create a Meeting on Zoom and join this meeting from Chrome and other Chromium browsers (Edge, Brave) without a problem.
However, when trying to join with Firefox, there are uncaught TypeErrors that crash the page and make it uninteractable (cannot click on anything, completely unresponsive).
There is also an unresolved/closed topic created in July 22, 2021 with the same problem
Browser Console Error
Uncaught (in promise) TypeError: 'camera' (value of 'name' member of PermissionDescriptor) is not a valid value for enumeration PermissionName.
Uncaught (in promise) TypeError: 'microphone' (value of 'name' member of PermissionDescriptor) is not a valid value for enumeration PermissionName.
Which Web Meeting SDK version?
^2.6.0
Meeting SDK Code Snippets
NOTE: I added the try/catch blocks to see if that would prevent the page from crashing, but it does not. The result does not change with the presence of try/catch blocks.
function startMeeting(signature) {
document.getElementById("zmmtg-root").style.display = "block";
try {
ZoomMtg.init({
leaveUrl: leaveUrl,
success: (success) => {
console.log("init success - ", success);
try {
ZoomMtg.join({
signature: signature,
meetingNumber: meetingNumber,
userName: userName,
sdkKey: sdkKey,
userEmail: userEmail,
passWord: passWord,
tk: registrantToken,
success: (success) => {
console.log("join success - ", success);
},
error: (error) => {
console.log("join error - ", error);
}
});
} catch (err) {
console.log("join try/catch error - ", err);
}
},
error: (error) => {
console.log("Meeting init error - ", error);
}
});
} catch (err) {
console.log("init try/catch Error - ", err);
}
}
To Reproduce
Steps to reproduce the behavior:
- Go to Meeting SDK React Sample Repo and download it
- Go to Meeting SDK Node.js Sample Repo and download it
- Run React front-end and Node.js back-end as described
- Go to localhost with Firefox (103.0.1, 64bit)
- Click join meeting button:
Screenshots
The errors visible on console after clicking “Join Meeting” button:
Videos
Firefox:
–
Edge (interactive/responsive):
Troubleshooting Routes
- I have added
<ErrorBoundary>around<App /> - I have added
try/catchblocks, as can be seen, around function calls. - I have added coi-serviceworker.js to see if it could solve the problem
Up until this point nothing worked. However, I have found a way to make the app interactable after it crashes.
- I have added
"preinstall": "pnpm dlx npm-force-resolutions",to package.json, then installed"react-error-overlay": "6.0.9"as dev dependency."scripts": { "preinstall": "pnpm dlx npm-force-resolutions", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "devDependencies": { "react-error-overlay": "6.0.9" }, "resolutions": { "react-error-overlay": "6.0.9" },-
After installing the
react-error-overlay, and running the app again, I receive this error modal after it crashes:
-
Now, after clicking the X button to close the modal, the page actually becomes interactable again, and I can click Join button to join the meeting.
-
However, I would like to catch or prevent the error from crashing the app at all, instead of closing the React Error Overlay to be able to interact with the page again.
Device:
- Device: Desktop
- OS: Windows 10 Home, 21H2, 19044.1826, 64-bit operating system, x64-based processor
- Browser: Firefox
- Browser Version: 103.0.1 (64bit)
Additional context
Full code of App.js:
Show code
/** @format */
import React from "react";
import "./App.css";
import { ZoomMtg } from "@zoomus/websdk";
ZoomMtg.setZoomJSLib("https://source.zoom.us/2.6.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");
function App() {
// setup your signature endpoint here: https://github.com/zoom/meetingsdk-sample-signature-node.js
var signatureEndpoint = "http://localhost:4000/";
// This Sample App has been updated to use SDK App type credentials https://marketplace.zoom.us/docs/guides/build/sdk-app
var sdkKey = "my_sdk_key";
var meetingNumber = ""; // meeting number I get from creating a Zoom meeting
var role = 0;
var leaveUrl = "http://localhost:3000";
var userName = "React";
var userEmail = "a@a.com";
var passWord = "password"; // meeting pwd provided after creating a Zoom meeting
// pass in the registrant's token if your meeting or webinar requires registration. More info here:
// Meetings: https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/meetings#join-registered
// Webinars: https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/webinars#join-registered
var registrantToken = "";
async function getSignature(e) {
e.preventDefault();
try {
const res = await fetch(signatureEndpoint, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
meetingNumber: meetingNumber,
role: role
})
});
const data = await res.json();
startMeeting(data.signature);
} catch (err) {
console.log(err);
}
}
function startMeeting(signature) {
document.getElementById("zmmtg-root").style.display = "block";
try {
ZoomMtg.init({
leaveUrl: leaveUrl,
success: (success) => {
console.log("init success - ", success);
try {
ZoomMtg.join({
signature: signature,
meetingNumber: meetingNumber,
userName: userName,
sdkKey: sdkKey,
userEmail: userEmail,
passWord: passWord,
tk: registrantToken,
success: (success) => {
console.log("join success - ", success);
},
error: (error) => {
console.log("join error - ", error);
}
});
} catch (err) {
console.log("join try/catch error - ", err);
}
},
error: (error) => {
console.log("Meeting init error - ", error);
}
});
} catch (err) {
console.log("init try/catch Error - ", err);
}
}
return (
<div className='App'>
<main>
<h1>Zoom Meeting SDK Sample React</h1>
<button onClick={getSignature}>Join Meeting</button>
</main>
</div>
);
}
export default App;
Full package.json files of React app
Show
{
"name": "meetingsdk-sample-react",
"version": "2.6.0",
"author": "Tommy Gaessler",
"homepage": "",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@zoomus/websdk": "^2.6.0",
"react": "^17.0.1",
"react-dev-utils": "^11.0.4",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^0.2.4"
},
"devDependencies": {
"react-error-overlay": "6.0.9"
},
"scripts": {
"preinstall": "pnpm dlx npm-force-resolutions",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"resolutions": {
"react-error-overlay": "6.0.9"
},
"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"
]
}
}
