Unable to integrate @zoomus/websdk (Components/embedded) in a Nextjs app

Meeting SDK Web
1

Description
I am having quite a lot of trouble integrating the embedded Zoom SDK in a next.js app. The React demo works right away with my API credentials, but I cannot manage to get things working in NextJS. I’ve tried a few methods as found in the forums and SO, but each fails in different ways.

I have searched the forum exhaustively and have found few answers relating to the embedded component view that have answers. I have tried all of these methods to integrate, but none are working:

Browser Console Error

  • the solution shown in the YouTube video almost works, but my meeting fails with either
errorCode: 3706
reason: "The meeting number is wrong."
type: "JOIN_MEETING_FAILED"

or

errorCode: 200
reason: "Fail to join the meeting."
type: "JOIN_MEETING_FAILED"

I have triple-checked my meeting credentials and the very same signature and token generator code works with the React app, but not with Next.js version. The “Meeting number is wrong” error is particularly strange.

Which Web Meeting SDK version?
@zoomus/websdk: 2.13.0

Meeting SDK Code Snippets
The code snippets that are causing the error / issue so we can reproduce.

from Learn with NAK youtube video

import styles from './shared-features-zoom-sdk-player.module.scss';


import { useEffect } from 'react';
import axios from 'axios';
import router from 'next/router';
/* eslint-disable-next-line */
export interface SharedFeaturesZoomSdkPlayerProps {
  meetingNumber: string;
}

export function SharedFeaturesZoomSdkPlayer({ meetingNumber }: SharedFeaturesZoomSdkPlayerProps) {
  useEffect(() => {
    async function getZoomClient() {
      return new Promise(async (resolve, reject) => {
        const zoomEmbed = await (await import('@zoomus/websdk/embedded')).default;
        resolve(zoomEmbed.createClient());
      })
        .then(async (client: any) => {
          const meetingSdkElement = document.getElementById('meetingSdkElement');
          if (meetingSdkElement) {
            client.init({
              language: 'en-US',
              zoomAppRoot: meetingSdkElement
            });
            const payload = router.query;
            const { data } = await axios({ url: '/api/zoom', method: 'POST', data: payload })
              .then((response) => response)
              .catch((error) => {
                console.log('error', error);
              });
            client.join({
              meetingNumber: '3446275386',
              signature: data.signature,
              userName: 'react',
              sdkKey: data.sdkKey,
              tk: '',
            });
          }
        })
        .catch((error) => {
          console.log('error inside zoom useEffect', error);
        });
    }
    getZoomClient();
  }, []);

  return (
    <div className={styles['container']}>
      <div className={styles['meetingSdkElement']} id="meetingSdkElement"></div>
      <div className={styles['content']}>Content</div>
    </div>
  );
}

export default SharedFeaturesZoomSdkPlayer;

from the embedded script post, I used the code exactly as presneted, but also fixed the missing / from the last div, and trye

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

For YouTube example

  1. use the code above to define a component, and attempt to render it in a nextjs app page with your credentials.
  2. observe errors as shown on page load and in console.

For embedded script example:
use code from this snippet to create a component in a nextjs app and render to a page NextJS | Web Meeting SDK | Component View - ReferenceError: window is not defined - #3 by pranshu.midha

NOTE: for above link, there is a / missing from the last div in the return value.

Screenshots

Screenshot 2023-06-20 at 1.38.22 PM
Screenshot 2023-06-20 at 1.38.22 PM2200×1582 143 KB

Troubleshooting Routes
In the first instance using await to import module, I have tried double checking all of my meeting parameters that work in the React demo project, but cannot find any indication of why it’s failing with a bad meeting ID.

In the second instance, I am not sure how to troubleshoot this method.

Device (please complete the following information):

  • Device: MacBook Pro M1
  • OS: 13.3 (22E252)
  • Browser: Chrome Version 114.0.5735.133 (Official Build) (x86_64)

Additional context
I have tried various methods of importing the module dynamically, all of which are too numerous to paste here as snippets, but were based on this Stack Overflow article next.js - nextjs dynamic() import works in dev mode, but not the production, Nextjs13 pages dir #45582 - Stack Overflow

2

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