Embedded client error following samples and generating JWT

Meeting SDK Web
1

I made an meeting SDK app and a server to server app. In our site, we populate the webinars over API’s and now I want to load a webinar in a div on our website. But I get an error, and it’s misleading because we aren’t using the JWT App type?

Note: We do not want oauth login users have already logged into our site we should just be able to load the client and pass in all the information and they attend a webinar on our site. The site is just a regular PHP / HTML site so we use raw javascript and not much else.

Resources loaded on the page rendering the component view for zoom client:
https://source.zoom.us/2.7.0/css/react-select.css
https://source.zoom.us/2.7.0/lib/vendor/react.min.js
https://source.zoom.us/2.7.0/lib/vendor/react-dom.min.js
https://source.zoom.us/2.7.0/lib/vendor/redux.min.js
https://source.zoom.us/2.7.0/lib/vendor/redux-thunk.min.js
https://source.zoom.us/2.7.0/lib/vendor/lodash.min.js

//zoom component
https://source.zoom.us/2.7.0/zoom-meeting-embedded-2.7.0.min.js

Error: Using a Zoom JWT App type API Key (apiKey) is no longer available in version 2.7.0+ of the SDK. Please use an SDK App type SDK Key (sdkKey) instead and the SDK JWT Auth flow.

at MJ.join (zoom-meeting-embedded-2.7.0.min.js:2:1964701)
at HTMLDocument. (webinar.html?webinar_id=521:99:13)
at u (jquery.min.js?52f0d8041fb5baee39bb142986f11379:2:27579)
at Object.fireWith [as resolveWith] (jquery.min.js?52f0d8041fb5baee39bb142986f11379:2:28337)
at Function.ready (jquery.min.js?52f0d8041fb5baee39bb142986f11379:2:30124)
at HTMLDocument._ (jquery.min.js?52f0d8041fb5baee39bb142986f11379:2:27307)

//PHP website including javascript inline,
$apiKey = Zoom::$SDK_KEY; //from the correct app type in Zoom
$zoomSignature = Zoom::generate_zoom_jwt($zoomMeetingNumber, $zoomRole); //Zoom::generate_signature($zoomMeetingNumber, $zoomRole);

jQuery( document ).ready(function() {
const zoomClient = ZoomMtgEmbedded.createClient();
zoomClient.init({
leaveUrl: ‘$url’,
isSupportAV: true,
debug:true,
zoomAppRoot: document.getElementById(“zoom-embedded”),
success: function (res) {
console.log(“init successfull”);
},
error: function (res) {
console.log(res);
}
});

zoomClient.join({
	signature: '$zoomSignature',
	meetingNumber: $zoomMeetingNumber,
	userName: '{$user->getFormatName()}',
	apiKey: '$apiKey',
	userEmail: '{$user->email}',
	passWord: '$zoomPassword',
	lang: 'en-US',
	china: 0,
	webEndpoint: 'zoom.us',
	success: function(res){
		//TODO: How to embed in web page? then allow fulls screen...

		console.log('join meeting success');
	},
	error: function(res) {
		console.log(res);
	}
}).then((e) => {
	consol.log("post join logic");
})
.catch((e) => {
	console.log(e);
});

});

This leads me to believe the signature method is deprecated and I need to generate a valid JWT instead, ok I have updated our PHP code to generate a JWT instead but the docs/apps/etc. are all old now and it isn’t clear how to support this when using the join interface. So I tried just swapping the signature value with a generated JWT instead but still have issues initializing the page.

Any help would be appreciated to update and plug in the JWT to get this sample working. I generated the JWT, checked it in JWT.io, verified signature in JWT.io, and it has this content:

{
“alg”: “HS256”,
“typ”: “JWT”
}

{
“sdkKey”: “”,
“mn”: ,
“role”: 0,
“iat”: 1664537,
“exp”: 1671737,
“appKey”: “”, ← not sure why this is duplicated?
“tokenExp”: 1671737
}

2

have you updated the parameter in ZoomMtg.join ?

for JWT Signature it was:

  ZoomMtg.join({
      signature: signature,
      apiKey: ... ,

for SDK JWT Signature now:

  ZoomMtg.join({
      signature: signature,
      sdkKey: ... ,
1 Like
3

Yes, thanks! Also found the documentation area where it documents the values and settings.

Another question, the “meeting hasn’t started yet” component is very small and I found the settings to set the video size to larger when a meeting is started (under customization) but the only way I have found how to make this view bigger is with CSS however I don’t want to hard code a bunch of sizes using CSS and media queries so is there not a way to make the view fill the screen during the “meeting hasn’t started” if someone is waiting for the host to start things?

Thanks,

4

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