DevTools failed to load SourceMap - Not initializing ZoomMtg.init

Description
I tried to build a site which integrates a zoom meeting with the manual/example here ( https://marketplace.zoom.us/docs/sdk/native-sdks/web/build and https://marketplace.zoom.us/docs/sdk/native-sdks/web/build/signature ).
I guess, it should work, if I generate the signature with the PHP example and just add it to the ZoomMtg.join like in my code ( see Zoomtest ).
Unfortunately, nothing happens. It seems as if the ZoomMtg.init is not fired because I can even not see the error function.
The only “hint” I can see at the end of the log is an error that the SourceMap could not load.

First question: Is my code correct in general?
Secon question: If yes: How can I solve the error with the SourceMap?

<?php
function generate_signature($api_key, $api_secret, $meeting_number, $role)
{

	//Set the timezone to UTC
	date_default_timezone_set("UTC");

	$time = time() * 1000 - 30000; //time in milliseconds (or close enough)

	$data = base64_encode($api_key . $meeting_number . $time . $role);

	$hash = hash_hmac('sha256', $data, $api_secret, true);

	$_sig = $api_key . "." . $meeting_number . "." . $time . "." . $role . "." . base64_encode($hash);
	//return $_sig;
	//return signature, url safe base64 encoded
	return rtrim(strtr(base64_encode($_sig), '+/', '-_'), '=');
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Zoomtest</title>
	<!-- import #zmmtg-root css -->
	<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.9.0/css/bootstrap.css" />
	<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.9.0/css/react-select.css" />
</head>
<body>
	<!-- import ZoomMtg dependencies -->
	<script src="https://source.zoom.us/1.9.0/lib/vendor/react.min.js"></script>
	<script src="https://source.zoom.us/1.9.0/lib/vendor/react-dom.min.js"></script>
	<script src="https://source.zoom.us/1.9.0/lib/vendor/redux.min.js"></script>
	<script src="https://source.zoom.us/1.9.0/lib/vendor/redux-thunk.min.js"></script>
	<script src="https://source.zoom.us/1.9.0/lib/vendor/lodash.min.js"></script>
	<!-- import ZoomMtg -->
	<script src="https://source.zoom.us/zoom-meeting-1.9.0.min.js"></script>
	<!-- import local .js file -->
	<script src="js/index.js"></script>
	<script>
	<?php
	$signature = generate_signature('', '', '', 0);
	echo "
	const zoomMeeting = document.getElementById('zmmtg-root');
    console.log('ready!');
	console.log('trying to connect');
	ZoomMtg.init({
		debug: true,
		screenShare: true,
		isSupportChat: true,
		leaveUrl: 'https://example.de/out.php',
		isSupportAV: true,
		success: function() {
			console.log('zoom init done');
			ZoomMtg.join({
					signature: '$signature',
					meetingNumber: ,
					userName: 'Testuser',
					apiKey: '',
					userEmail: '',
					passWord: 'mVLK1U',
					success: (success) => {
						console.log('zoom connected successfully: ' + success)
						},
					error: (error) => {
						console.log('zoom not connected successfully: ' + error)
						}
					})		
			},
		error: function() {
			console.log('zoom not connected successfully: ' + error)
			}
		});";
?>
</script>
</body>
</html>

Error
I´m loading the page. Nothing happens. The error log says:

TSS: unload event (detected = false): BeforeUnloadEvent {isTrusted: true, returnValue: “”, type: “beforeunload”, target: document, currentTarget: Window, …}
Navigated to Zoomtest
content-tss.js:1 TSS: content-tss.js loaded: Zoomtest
content-ads.js:1 INS: content-ads.js loaded: Zoomtest
VM322:4 hosted page injected
index.js:3 checkSystemRequirements
zoom-meeting-1.9.0.min.js:2 Zoom support you browser. Chrome/88.0.4324.190
zoom-meeting-1.9.0.min.js:2 You browser support below features
index.js:4 {“browserInfo”:“Chrome/88.0.4324.190”,“browserName”:“Chrome”,“browserVersion”:“88.0.4324.190”,“features”:[“viewSharing”,“screenShare”,“computerVideo”,“computerAudio”,“callIn”,“callOut”,“chat”,“closedCaption”,“QA”,“POLLING”,“BREAKOUT”,“GALLARY”]}
[Violation] Forced reflow while executing JavaScript took 41ms
index.php:25 ready!
index.php:26 trying to connect
zoom-meeting-1.9.0.min.js:2 pre load wasm success: https://source.zoom.us/1.9.0/lib/av/6331_audio.encode.wasm
zoom-meeting-1.9.0.min.js:2 pre load wasm success: https://source.zoom.us/1.9.0/lib/av/6331_video.decode.wasm
DevTools failed to load SourceMap: Could not load content for https://source.zoom.us/1.9.0/css/bootstrap.css.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Which Client Web SDK version?
1.9.0

To Reproduce(If applicable)
Steps to reproduce the behavior:

  1. Go to Zoomtest
  2. check log
  3. Scroll down to DevTools failed to load SourceMap: Could not load content for https://source.zoom.us/1.9.0/css/bootstrap.css.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE
  4. See error

Device (please complete the following information):

  • OS:WIn 10
  • Browser: Chrome
  • Browser Version 88.0.4324.190

Additional context
The sample page contains the right API key/secret

I think, I found the error:

at https://marketplace.zoom.us/docs/sdk/native-sdks/web/build there is the index.js code:

ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk

But it should be:

ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk()
1 Like

Hey @MZL ,

Thanks for pointing out this mistake in our documentation! We will get this fixed asap! :slight_smile:

-Tommy

@tommy

Just to confirm:
Is there a security risk if I code it like this?:
The end user can see the signature and API key but not the API secret (generated in PHP) in the source code.

Hey @MZL,

Thank you for your question! No, it does not pose a security risk for the API Key or the signature to be accessible in a browser. As you mentioned, the API Secret is what should be secured. When using the signature, the API Secret is encrypted in order to prevent others from accessing it.

The API Key itself can be seen as an identifier and doesn’t pose security risks as long as the API Secret is secure.

I hope that helps! :slightly_smiling_face:

Thanks,
Max

Hi @MaxM

thanks a lot.

1 Like

I’m glad to hear that was helpful! :slightly_smiling_face:

Max

Hey @MZL ,

We updated the docs to add the missing () :slight_smile:

-Tommy

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