Zoom Web SDK Firefox Crash on clicking "Join" button

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:

  1. Go to Meeting SDK React Sample Repo and download it
  2. Go to Meeting SDK Node.js Sample Repo and download it
  3. Run React front-end and Node.js back-end as described
  4. Go to localhost with Firefox (103.0.1, 64bit)
  5. Click join meeting button:
    Screenshot_126

Screenshots

The errors visible on console after clicking “Join Meeting” button:

Videos

Firefox:
firefox(2)

Edge (interactive/responsive):
edge

Troubleshooting Routes

  • I have added <ErrorBoundary> around <App />
  • I have added try/catch blocks, 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"
		]
	}
}

the 2 red error messages are normal - if you don’t have a camera and a microphone connected - and have at least in plain javascript version no influence on the further process

firefox and chrome behave exactly the same at this point

go back to a version as close as possible to the github example and activate the debug-mode

ZoomMtg.init({
    debug: true,

can you upload the complete console log as readable screenshots

  • of a successful login with chrome
  • and then the same process with firefox

Notice: create a test meeting with setting “Allow participants to join anytime” and “no waiting room” (there are the least problems with login)

Jürgen

Hi,
Thank you for your response!

the 2 red error messages are normal - if you don’t have a camera and a microphone connected

Both the current and the previous tests were done with a plugged in cam/mic. Though I don’t know why it shows OBS Studio’s image initially, it loads the actual camera feed after joining successfully on Chrome and Chromium browsers.

go back to a version as close as possible to the github example and activate the debug-mode

As you have instructed, I tried the same process on a clean repository clone of both React and Node.js sample (only changing necessary parts and adding debug mode)

Here are the logs from Chrome and Firefox, going through the same process:

Chrome (succesful and smooth experience):

Readable logs on Gist (Chrome)

Here is the screenshot of the Chrome logs:


Firefox (unsuccessful and unresponsive experience after crash):
Readable logs on Gist (Firefox)

Here is the screenshot of the Firefox logs:

Firefox crashes in index.js (not direct in the zoom javascript) - Firefox needs the function/object “process”

Uncaught ReferenceError: process is not defined

that seems to be a special react problem (injectedScript)

with google search “react process is not defined” there are some hits

perhaps → ReferenceError: “process is not defined”

so now a react profi must help, which unfortunately I am not

Jürgen

Limiting my search to React related problems about this actually seems to have solved the problem.
Thank you for the response!

For anyone else that might face this problem:

npm install react-scripts@latest

solved it for me, as mentioned in this guide. I guess the package.json file in the template was not up to date since it was using react-scripts v4 since Jan 8, 2021:

"react-scripts": "4.0.3",

The guide mentions that

The error is caused by the react-error-overlay package which has dependencies that were updated to support webpack v5 and are not compatible with react-scripts v4.

Now I only wonder why Chrome worked and Firefox crashed if react-scripts v4 was broken in both environments :thinking:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.