Can '@zoom/meetingsdk new version 3.1.6' be implemented on "NEXT.JS" project?

mayur.sahare · February 16, 2024, 11:56am

Description
I am trying to integrate the update version i.e @zoom/meetingsdk in my project…earlier it was @zoomus/websdk…and now the error “self is not defined is coming & i am getting the cross origin error also”

Browser Console Error
Uncaught TypeError: Cannot read properties of undefined (reading ‘status’)
at O (zoomus-websdk-zoommtgMain.umd.min.js:2:954240)
at R (zoomus-websdk-preview.umd.min.js:2:114075)
at HTMLUnknownElement.callCallback (react-dom.development.js:188:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237:16)
at invokeGuardedCallback (react-dom.development.js:292:31)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306:25)
at executeDispatch (react-dom.development.js:389:3)
at executeDispatchesInOrder (react-dom.development.js:411:7)
at executeDispatchesAndRelease (react-dom.development.js:3278:5)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287:10)
at forEachAccumulated (react-dom.development.js:3259:8)
at runEventsInBatch (react-dom.development.js:3304:3)
at runExtractedPluginEventsInBatch (react-dom.development.js:3514:3)
at handleTopLevel (react-dom.development.js:3558:5)
at batchedEventUpdates$1 (react-dom.development.js:21871:12)
at batchedEventUpdates (react-dom.development.js:795:12)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568:5)
at attemptToDispatchEvent (react-dom.development.js:4267:5)
at dispatchEvent (react-dom.development.js:4189:19)
at unstable_runWithPriority (scheduler.development.js:653:12)
at runWithPriority$1 (react-dom.development.js:11039:10)
at discreteUpdates$1 (react-dom.development.js:21887:12)
at discreteUpdates (react-dom.development.js:806:12)
at dispatchDiscreteEvent (react-dom.development.js:4168:3)
react-dom.development.js:327 Uncaught Error: A cross-origin error was thrown. React doesn’t have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
at Object.invokeGuardedCallbackDev (react-dom.development.js:248:19)
at invokeGuardedCallback (react-dom.development.js:292:31)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306:25)
at executeDispatch (react-dom.development.js:389:3)
at executeDispatchesInOrder (react-dom.development.js:411:7)
at executeDispatchesAndRelease (react-dom.development.js:3278:5)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287:10)
at forEachAccumulated (react-dom.development.js:3259:8)
at runEventsInBatch (react-dom.development.js:3304:3)
at runExtractedPluginEventsInBatch (react-dom.development.js:3514:3)
at handleTopLevel (react-dom.development.js:3558:5)
at batchedEventUpdates$1 (react-dom.development.js:21871:12)
at batchedEventUpdates (react-dom.development.js:795:12)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568:5)
at attemptToDispatchEvent (react-dom.development.js:4267:5)
at dispatchEvent (react-dom.development.js:4189:19)
at unstable_runWithPriority (scheduler.development.js:653:12)
at runWithPriority$1 (react-dom.development.js:11039:10)
at discreteUpdates$1 (react-dom.development.js:21887:12)
at discreteUpdates (react-dom.development.js:806:12)
at dispatchDiscreteEvent (react-dom.development.js:4168:3)
manifest.json:1

   Failed to load resource: the server responded with a status of 404 (Not Found)

zoomus-websdk-zoommtgMain.umd.min.js:2

   POST http://localhost:3000/sessions/5482/undefined/wc/refresh_tokens 404 (Not Found)

Which Web Meeting SDK version?
3.1.6

Meeting SDK Code Snippets
export const useJoin = () => {
const router = useRouter();
const { sessionId, courseId } = router.query;
const dispatch = useDispatch();
const { sendClevertapEvent } = useClevertap();
const { user: { name = ‘’ } = {} } = useSelector(userDetailSelector);
const zoomMeetingRef = useRef();
const joiningTime = useRef(‘’);
const [meetingDetail, setMeetingDetail] = useState(‘’);

const { mutate: getJoinSessionDetail } = useMutation(
() => {
return apis.getJoinSessionDetail(sessionId);
},
{
onSuccess: (data) => {
if (data?.data?.is_success) {
setMeetingDetail(data?.data?.zoom_meeting);
} else if (data?.data?.message) {
dispatch(
showSnackbar({
message: data?.data?.message,
type: snackbarTypes.error,
}),
);
}
},
},
);

const { data: { data: { event_schedule = {} } = {} } = {} } = useQuery(
[‘eventSchedule’, sessionId],
() => {
if (!sessionId) {
return Promise.resolve({});
}
return getSessionDetail(sessionId);
},
);

const { data: { data: { course = {} } = {} } = {} } = useQuery([‘courseDetail’, courseId], () => {
if (!courseId) {
return Promise.resolve({});
}
return getCourseDetails(courseId);
});

useEffect(() => {
if (name && sessionId) {
getJoinSessionDetail();
}
return () => {
zoomMeetingRef?.current?.leaveMeeting({
success: () => {},
error: () => {},
});
};
}, [name, sessionId]);

useEffect(() => {
if (event_schedule.id && !courseId) {
window.addEventListener(‘unload’, () => {
if (joiningTime.current) {
const eventCTValue = {
event_schedule_id: sessionId,
attended_events_name: event_schedule.title,
attended_events_starts_at: event_schedule.starts_at,
attended_events_ends_at: event_schedule.ends_at,
attended_event_image_url: event_schedule.files?.banner?.url,
attended_time: moment(joiningTime.current).add(1, ‘minutes’).format(),
leave_time: moment().format(),
attended_duration: moment().diff(joiningTime.current, ‘minutes’),
};
sendClevertapEvent(‘attended_event’, eventCTValue);
}
window.removeEventListener(‘unload’);
});
}
}, [event_schedule]);
useEffect(() => {
if (course.id) {
const currentLession = course.regular_event_schedules?.find((lession) => {
return lession.event_schedule_id == sessionId;
});

  const pageURL = window.location.hostname;
  window.addEventListener('unload', () => {
    if (joiningTime.current) {
      const ctPayload = {
        course_attended_status: 'Success',
        course_id: course?.id,
        course_type: course.category_name,
        course_name: course?.event_title,
        course_landing_page: `${pageURL}/courses/${course.slug}`,
        course_date_timing: course?.commence_at,
        course_image_url: course?.files?.[0]?.url,
        course_language: course?.language,
        course_language: course?.language,
        course_end_date: course?.finishes_at,
        course_starts_date: course?.commence_at,
        course_duration: course?.course_duration?.sessions,
        instructor_name: course?.host?.name,
        lesson_attended_name: currentLession.title,
        lesson_attended_date_time: moment(joiningTime.current).add(1, 'minutes').format(),
        lesson_id: currentLession.event_schedule_id,
      };
      sendClevertapEvent('course_attended', ctPayload);
    }
    window.removeEventListener('unload');
  });
}

}, [course]);

useEffect(() => {
if (!courseId && meetingDetail && event_schedule) {
startSession(meetingDetail, event_schedule);
} else if (courseId && meetingDetail) {
startSession(meetingDetail);
}
}, [event_schedule, meetingDetail, courseId]);

const startSession = (data, eventScheduleDetail) => {
if (data?.meeting_id && data?.password && data?.signature) {
import(‘@zoom/meetingsdk’).then(({ ZoomMtg }) => {
zoomMeetingRef.current = ZoomMtg;
joinSession(ZoomMtg, data, eventScheduleDetail);
});
} else {
dispatch(
showSnackbar({
message: ‘Missing meeting details’,
type: snackbarTypes.error,
}),
);
}
};

const joinSession = (ZoomMtg, meetingDetails, eventScheduleDetail) => {
const { meeting_id, password, signature } = meetingDetails;
const slug = eventScheduleDetail?.event?.slug;

const meetConfig = {
  apiKey: process.env.NEXT_PUBLIC_ZOOM_API_KEY,
  signature: signature,
  meetingNumber: meeting_id,
  leaveUrl: courseId
    ? `/courses/${courseId}?exit=true`
    : `/sessions/${slug}?id=${sessionId}&exit=true`,
  userName: name,
  userEmail: '',
  passWord: password,
  role: 0,
};
// ZoomMtg.setZoomJSLib('https://source.zoom.us/3.1.6/lib', '/av');
ZoomMtg.init({
  leaveUrl: meetConfig.leaveUrl,
  // isSupportAV: true,
  patchJsMedia:true,
  success: function (success) {
    ZoomMtg.join({
      meetingNumber: meetConfig.meetingNumber,
      userName: meetConfig.userName,
      signature: meetConfig.signature,
      sdkKey: meetConfig.apiKey,
      passWord: meetConfig.passWord,
      success: (success) => {
        joiningTime.current = moment().format();
      },
      error: (error) => {},
    });
  },
});

};
};

**Device **

Device: dell vostro
OS: Ubuntu 20.04.2
Browser: Chrome

Additional context
only once or twice it was joined but everytime it crashes…error at console says canecelled at zoomus-websdk-umd-min something like that…(note i am using nextjs and it is a server side rendering…make sure zoom handles that? let me know)

system · March 17, 2024, 9:57pm

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

Topic		Replies	Views
Zoom Meeting SDK Error: Cannot read properties of undefined (reading 'webEndpoint') Web	2	252	April 9, 2024
Meeting SDK does not work with SSO meetings Web	1	90	April 9, 2024
Zoom sdk self is not defined - nextjs, react API and Webhooks video-sdk , sdk	1	1172	July 30, 2023
Unable to integrate @zoomus/websdk (Components/embedded) in a Nextjs app Web	1	625	July 21, 2023
React project: JsMediaSDK_Instance is not defined Web	5	2084	March 26, 2021

Can '@zoom/meetingsdk new version 3.1.6' be implemented on "NEXT.JS" project?

Related Topics