To Developers.
I’m trying to use Meeting SDK through Web Meeting-SDK Sample App.
However, when I try to join the meeting, I falied.
Please help me.
Do you think this error occurs because of API key?
・Device
Desktop
Win10#chrome/100.0.4896.127
・Source codes
this codes based on below. I changed only API_KEY, API_SECRET, and the way how to get signature.
The oher sources is not edit.
sample-app-web/nav.js at master · zoom/sample-app-web · GitHub
/* eslint-disable no-undef */
window.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM fully loaded and parsed');
websdkready();
});
function websdkready() {
var testTool = window.testTool;
if (testTool.isMobileDevice()) {
// eslint-disable-next-line no-undef
var vConsole = new VConsole();
}
console.log("checkSystemRequirements");
// console.log(JSON.stringify(ZoomMtgEmbedded.checkSystemRequirements()));
var API_KEY = "my API key generated from App Marketplace";
/**
* NEVER PUT YOUR ACTUAL API SECRET IN CLIENT SIDE CODE, THIS IS JUST FOR QUICK PROTOTYPING
* The below generateSignature should be done server side as not to expose your api secret in public
* You can find an eaxmple in here: https://marketplace.zoom.us/docs/sdk/native-sdks/web/essential/signature
*/
var API_SECRET = "my API secret generated from App Marketplace";
// some help code, remember mn, pwd, lang to cookie, and autofill.
document.getElementById("display_name").value =
testTool.detectOS() +
"#" +
testTool.getBrowserInfo();
document.getElementById("meeting_number").value = testTool.getCookie(
"meeting_number"
);
document.getElementById("meeting_pwd").value = testTool.getCookie(
"meeting_pwd"
);
if (testTool.getCookie("meeting_lang"))
document.getElementById("meeting_lang").value = testTool.getCookie(
"meeting_lang"
);
document
.getElementById("meeting_lang")
.addEventListener("change", function (e) {
testTool.setCookie(
"meeting_lang",
document.getElementById("meeting_lang").value
);
testTool.setCookie(
"_zm_lang",
document.getElementById("meeting_lang").value
);
});
// copy zoom invite link to mn, autofill mn and pwd.
document
.getElementById("meeting_number")
.addEventListener("input", function (e) {
var tmpMn = e.target.value.replace(/([^0-9])+/i, "");
if (tmpMn.match(/([0-9]{9,11})/)) {
tmpMn = tmpMn.match(/([0-9]{9,11})/)[1];
}
var tmpPwd = e.target.value.match(/pwd=([\d,\w]+)/);
if (tmpPwd) {
document.getElementById("meeting_pwd").value = tmpPwd[1];
testTool.setCookie("meeting_pwd", tmpPwd[1]);
}
document.getElementById("meeting_number").value = tmpMn;
testTool.setCookie(
"meeting_number",
document.getElementById("meeting_number").value
);
});
document.getElementById("clear_all").addEventListener("click", function (e) {
testTool.deleteAllCookies();
document.getElementById("display_name").value = "";
document.getElementById("meeting_number").value = "";
document.getElementById("meeting_pwd").value = "";
document.getElementById("meeting_lang").value = "en-US";
document.getElementById("meeting_role").value = 0;
window.location.href = "/index.html";
});
// click join meeting button
document
.getElementById("join_meeting")
.addEventListener("click", function (e) {
e.preventDefault();
var meetingConfig = testTool.getMeetingConfig();
if (!meetingConfig.mn || !meetingConfig.name) {
alert("Meeting number or username is empty");
return false;
}
testTool.setCookie("meeting_number", meetingConfig.mn);
testTool.setCookie("meeting_pwd", meetingConfig.pwd);
var url = 'http://localhost:9800/'; // this app is cloned by https://github.com/zoom/meetingsdk-sample-signature-node.js
var data = {
meetingNumber: my meeting number,
role: 0
};
fetch(url, {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
}).then(function (response) {
//console.log(response.json());
return( response.json() );
}).then((json)=>{
console.log(json.signature);
// generateSignature define in token-tool.js
var signature = generateSignature({
meetingNumber: meetingConfig.mn,
apiKey: API_KEY,
apiSecret: API_SECRET,
role: meetingConfig.role,
success: function (res) {
console.log(res);
meetingConfig.signature = json.signature;
meetingConfig.apiKey = API_KEY;
if (document.getElementById('demoType').value === 'cdn') {
var joinUrl = "/cdn.html?" + testTool.serialize(meetingConfig);
console.log(joinUrl);
window.open(joinUrl, "_blank");
} else {
var joinUrl = "/index.html?" + testTool.serialize(meetingConfig);
console.log(joinUrl);
window.open(joinUrl, "_blank");
}
},
});
}).catch(function (error) {
console.log(error);
});
});
function copyToClipboard(elementId) {
var aux = document.createElement("input");
aux.setAttribute("value", document.getElementById(elementId).getAttribute('link'));
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
}
// click copy jon link button
window.copyJoinLink = function (element) {
var meetingConfig = testTool.getMeetingConfig();
if (!meetingConfig.mn || !meetingConfig.name) {
alert("Meeting number or username is empty");
return false;
}
var signature = generateSignature({
meetingNumber: meetingConfig.mn,
apiKey: API_KEY,
apiSecret: API_SECRET,
role: meetingConfig.role,
success: function (res) {
console.log(res.result);
meetingConfig.signature = res.result;
meetingConfig.apiKey = API_KEY;
if (document.getElementById('demoType').value === 'cdn') {
var joinUrl =
testTool.getCurrentDomain() +
"/cdn.html?" +
testTool.serialize(meetingConfig);
document.getElementById('copy_link_value').setAttribute('link', joinUrl);
copyToClipboard('copy_link_value');
} else{
var joinUrl =
testTool.getCurrentDomain() +
"/index.html?" +
testTool.serialize(meetingConfig);
document.getElementById('copy_link_value').setAttribute('link', joinUrl);
copyToClipboard('copy_link_value');
}
},
});
};
}