Zoom sdk self is not defined - nextjs, react

API and Webhooks
,
1

Next js, trying to use zoom sdk

ReferenceError: self is not defined

This is my component - the same with doc’s example:

import { ZoomMtg } from ‘@zoomus/websdk’;

ZoomMtg.setZoomJSLib(‘https://source.zoom.us/2.14.0/lib’, ‘/av’);

ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
// loads language files, also passes any error messages to the ui

function App() {
var authEndpoint = ‘’;
var sdkKey = ‘’;
var meetingNumber = ‘123456789’;
var passWord = ‘’;
var role = 0;
var userName = ‘React’;
var userEmail = ‘’;
var registrantToken = ‘’;
var zakToken = ‘’;
var leaveUrl = ‘http://localhost:3000’;

function getSignature(e) {
	e.preventDefault();

	fetch(authEndpoint, {
		method: 'POST',
		headers: { 'Content-Type': 'application/json' },
		body: JSON.stringify({
			meetingNumber: meetingNumber,
			role: role,
		}),
	})
		.then((res) => res.json())
		.then((response) => {
			startMeeting(response.signature);
		})
		.catch((error) => {
			console.error(error);
		});
}

function startMeeting(signature) {
	document.getElementById('zmmtg-root').style.display = 'block';

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

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

return (
	<div className='App'>
		<main>
			<h1>Zoom Meeting SDK Sample React</h1>

			<button onClick={getSignature}>Join Meeting</button>
		</main>
	</div>
);

}

export default App;

3

I got why this error happens. Next.js import sdk on server side where the code is executed on Node.js environment, which means there is no window object. So the error says self(window object) is not found.

The solution of this error is that you need to import sdk on client side. To import sdk on client side, we can use useEffect and dynamically import zoom sdk.

I implemented component view, but you can implement client view as well.
Here is my solution code for component view. Hope this helps everybody got this issue.

// app/page.jsx
"use client"
import { useEffect } from "react";

export default function ZoomMeeting() {
  useEffect(() => {
    initZoomApp();
  }, [])

  return (
    <div>
      <div id="meetingSDKElement">ZOOM HERE</div>
    </div>
  )
}

async function initZoomApp() {
  const { client, clientConf } = await initClient();
  startMeeting(client, clientConf);
}

async function initClient() {
  const ZoomMtgEmbedded = await (await import('@zoomus/websdk/embedded')).default;
  const client = ZoomMtgEmbedded.createClient();

  const clientConf = {
    authEndpoint: process.env.NEXT_PUBLIC_AUTH_ENDPOINT,
    sdkKey: process.env.NEXT_PUBLIC_CLIENT_ID,
    signature: "",
    meetingNumber: '00000000000', // actual meeting number: user need to input
    passWord: 'xxxxxx', // actual password for the meeting: user need to input
    role: 0, // 0 implies client, 1 implies host
    userName: 'React', // username: user need to input
    userEmail: '' // user email: user need to input
  }

// fetch signature to your auth endpoint. Check the sample repo.
// https://github.com/zoom/meetingsdk-auth-endpoint-sample
  const { signature } = await getSignature(clientConf.meetingNumber, clientConf.role);
  clientConf.signature = signature;

  const meetingSDKElement = document.getElementById('meetingSDKElement');
  client.init({
    debug: true,
    zoomAppRoot: meetingSDKElement,
    language: 'en-US',
    customize: {
      meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
      toolbar: {
        buttons: [
          {
            text: 'Custom Button',
            className: 'CustomButton',
            onClick: () => {
              console.log('Hi, mom');
            }
          }
        ]
      }
    }
  });

  return { client: client, clientConf: clientConf };
}

// fetch signature to your auth endpoint. Check the sample repo.
// https://github.com/zoom/meetingsdk-auth-endpoint-sample 
async function getSignature(meetingNumber, role) {
  const data = await fetch(process.env.NEXT_PUBLIC_AUTH_ENDPOINT, {
    method: "POST",
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      meetingNumber: meetingNumber,
      role: role
    })
  })
  const { data: signature } = await data.json();
  return signature;
}

function startMeeting(client, clientConf) {
  client.join({
    signature: clientConf.signature,
    sdkKey: clientConf.sdkKey,
    meetingNumber: clientConf.meetingNumber,
    password: clientConf.passWord,
    userName: clientConf.userName,
    userEmail: clientConf.userEmail,
  })
}
1 Like