hello
I am a developer working at a Korean edtech company.
An error occurs when doing meet-sdk ZoomMtg.join.
When I ran the meet-sdk react example, it worked successfully, but an error occurred in the nextjs + typescript framework.
Information about the error is posted in the comments below.
Please be sure to check.
Module Spec
“next”: “^13.2.4”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“typescript”: “^4.9.5”
“@typescript-eslint/eslint-plugin”: “^5.54.0”,
“@typescript-eslint/parser”: “^5.54.0”,
“@zeit/next-typescript”: “^1.1.1”,
Use Component Code
import dynamic from 'next/dynamic'
export const ZoomEmbedded = dynamic(
async () => {
const { ZoomEmbedded } = await import('@/components/domain/drill/live/zoom-embedded')
return ZoomEmbedded
},
{
ssr: false,
},
)
export const ClassMyOngoingLiveZoomTemplate = () => {
return <ZoomEmbedded />
}
Zoom Component Code
import { ZoomMtg } from '@zoomus/websdk';
import { useRouter } from 'next/router';
import { FC, useEffect } from 'react';
ZoomMtg.setZoomJSLib('https://source.zoom.us/2.16.0/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
ZoomMtg.i18n.load('ko-KO');
ZoomMtg.i18n.reload('ko-KO');
const CLIENT_ID = process.env.NEXT_PUBLIC_CLIENT_ID
export const ZoomEmbedded:FC = () => {
const router = useRouter();
const signature = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZGtLZXkiOiJhRlBqckt6WVJLQ3lDWU9CUVB0bnBBIiwiaWF0IjoxNjk1NjE2NjQ1LCJleHAiOjE2OTU2MjM4NDUsIm1uIjo5MjIzNjc3OTA1NCwicm9sZSI6MH0.HX6gnIWH7-taXCFUregW-jNcUMoWTl09M3P7n21tZFc'
const sdkKey = CLIENT_ID
const meetingNumber = '92236779054'
const passWord = 'dD8dZK'
const role = 0
const userName = 'test'
const userEmail = 'mingiki@naver.com'
const registrantToken = ''
const zakToken = ''
useEffect(()=>{
const zoomElement = document.getElementById('zmmtg-root');
const startMeeting = () => {
if (zoomElement) {
//meet-sdk
zoomElement.style.display = 'block'
ZoomMtg.init({
leaveUrl: router.asPath,
success: (success: any) => {
console.log(success)
const joinParams = {
signature: signature,
sdkKey: sdkKey,
meetingNumber: meetingNumber,
passWord: passWord,
userName: userName,
userEmail: userEmail,
tk: registrantToken,
zak: zakToken,
success: (success: any) => {
console.log('success', success)
},
error: (error: any) => {
console.log('error',error)
}
}
console.log('joinParams', joinParams)
ZoomMtg.join(joinParams)
},
error: (error: any) => {
console.log('error', error)
}
})
}
}
startMeeting();
},[])
return <>
</>
}