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:
- Go to Zoomtest
- check log
- 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
- 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
