Zoom WebSDK failing to load consistently

Meeting SDK Web
1

Description
Using the Zoom Web SDK embedded component and React JS when we load the meeting it shows a blank screen. I can see the events such as user join, the user left, and so on, but the screen stays blank. If I reload the page the meeting shows as expected. So the meeting gets loaded by navigating in the UI, so we come to this route which then loads the Zoom Embedded component.

Browser Console Error

Which Web Meeting SDK version?
“@zoomus/websdk”: “^2.12.2”,

Meeting SDK Code Snippets

const ZoomMeeting = function ({
  signature,
  sdkKey,
  meetingNumber,
  tk,
  zak,
  userName,
  password,
  userEmail,
  onUserJoined,
  onUserLeft,
  onConnectionChange,
}: ZoomMeetingProps) {
  const client = ZoomMtgEmbedded.createClient();

  const handleUserAdded = useCallback(
    (data: any) => {
      onUserJoined && onUserJoined(data);
    },
    [onUserJoined],
  );

  const handleUserRemoved = useCallback(
    (data: any) => {
      if (data?.[0]?.action) {
        onUserLeft && onUserLeft(data[0].userId, data[0].displayName);
      }
      // handle user removed event
    },
    [onUserLeft],
  );

  const handleConnectionChange = useCallback(
    (data: any) => {
      onConnectionChange && onConnectionChange(data);
    },
    [onConnectionChange],
  );

  const initializeMeeting = useCallback(
    function () {
      const zoomAppRoot = document.getElementById('zoomMeetingRoot') || undefined;
      if (!client || !zoomAppRoot || typeof signature !== 'string' || !signature.length) return;
      client?.init({
        debug: true,
        zoomAppRoot,
        language: 'en-US',
        customize: {
          video: {
            popper: { disableDraggable: true },
            isResizable: true,
            viewSizes: {
              // TODO: 4:3 aspect ratio, 640×480, 800×600, 960×720, 1024×768, 1280×960, 1400×1050, 1440×1080, 1600×1200, 1856×1392, 1920×1440, and 2048×1536
              default: {
                height: 600,
                width: 800,
              },
              ribbon: {
                height: 768,
                width: 1024,
              },
            },
            defaultViewType: 'gallery' as SuspensionViewType.Gallery,
          },
          meetingInfo: [
            'topic',
            'host',
            'mn',
            'pwd',
            'telPwd',
            'invite',
            'participant',
            'dc',
            'enctype',
          ],
        },
      });
      client?.on('user-added', handleUserAdded);
      client?.on('user-removed', handleUserRemoved);
      client?.on('connection-change', handleConnectionChange);
      client?.join({
        signature,
        meetingNumber: `${meetingNumber}`,
        sdkKey,
        password,
        userName,
        userEmail,
        tk,
        zak,
      });
    },
    [
      client,
      handleConnectionChange,
      handleUserAdded,
      handleUserRemoved,
      meetingNumber,
      password,
      sdkKey,
      signature,
      tk,
      userEmail,
      userName,
      zak,
    ],
  );

  useEffect(() => {
    initializeMeeting();
  }, [initializeMeeting]);

  return <div className='meeting__page-content meeting-screen-loading' id='zoomMeetingRoot'></div>;
};

export default ZoomMeeting;

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

  1. Create a meeting
  2. Try to join the meeting.

Troubleshooting Routes
Official example for Web SDK and React Js integration, forum topics and other.

Device (please complete the following information):

  • Macbook Pro (intel chip)
  • macOS Ventura 13.12
  • Chrome
  • Version 112.0.5615.137 (Official Build) (x86_64)
2

Any updates on this issue?

3

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