Websdk Nextjs Integration

Meeting SDK Web
1

Description
Greetings!
I’m trying to use @zoomus/websdk for integrate the client view in my website with NextJs. I’ve followed all the steps in the documentation and it works perfectly with my setup from the sample React app. However, when I try to integrate it into my Nextjs app with the same setup it doesn’t work.
I already got over “window is not defined” problem, with dynamic imports. However, now I only see a loading window with “Joining Meeting” message.
Please, if there is something that I could do, I’ll be so grateful guys.

Which Web Meeting SDK version?
@zoomus/websdk 2.5.0

Meeting SDK Code Snippets
This is my setup

ZoomMtg.setZoomJSLib(“https://source.zoom.us/2.5.0/lib”, “/av”);
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
ZoomMtg.i18n.load(“en-US”);
ZoomMtg.i18n.reload(“en-US”);

ZoomMtg.init({
leaveUrl,
success: (success) => {
console.log(success);

    ZoomMtg.join({
      signature,
      meetingNumber,
      userName,
      sdkKey,
      userEmail,
      passWord: "",
      tk: registrantToken,
      success: (success) => {
        console.log(success);
      },
      error: (error) => {
        console.log(error);
      },
    });
  },
  error: (error) => {
    console.log(error);
  },
});
2

Hi @Bianca, welcome :wave:

I haven’t tried this myself, but my first thought on the differences in that sample react app to a nextjs app would be the SSR loading of those pages. Seeing you’re solving the window issue, if you prevent the page from using SSR do you get the same behavior? Are you getting any console errors in the browser?

3

I only get this warning on console
DevTools failed to load source map: Could not load content for https://source.zoom.us/2.5.0/lib/webim.min.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE
But in the react App I got the same warning and it’s working.

  • Additionally it looks like the css styles are not loading

Non-SSR behavior can be a problem. But in many cases that I read on this forum it worked this way.

Maybe loading ZoomMtg via the CDN and not the npm import might help, but when I try it I just get “ZoomMtg is undefined”.

Is there any workaround that I can implement from nextjs to have the client view?

4

the error message is not problematic, the webim.min.js.map file is only for debugging
if it’s not loaded, the debugger cannot show detail infos from minimized javascript files

the usual error at the time when zoom api is not functioning is:
what method is used for signature

(1) JWT Signature (deprecated)
(2) SDK JWT Signature

You can not mix both methods

Zoom Meeting SDK Sample React 2.5 uses SDK JWT Signature
Zoom Meeting SDK Sample React 2.2 uses JWT Signature

Jürgen

1 Like
5

Great, So the webim.in.js is not a problem.

I’m using only SDK JWT signature with @zoomus/websdk 2.5.0

6

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