[Closed] Uncaught SyntaxError: Unexpected token '<' missing 1506_js_media.min.js in websdk

Meeting SDK
1

Hey there, we are using zoom websdk in the patient app and would like to intergate zoom and for this we are nearly following the code of GitHub - zoom/sample-app-web: Zoom Web SDK Sample App and on click of a button we execute getSignature function

Here is our zoom code:

import ZoomMtgEmbedded from '@zoomus/websdk/embedded';

interface StartMeetingProps {
  signature: string | undefined;
  meetingNumber: string | undefined;
  username: string | undefined;
  password: string | undefined;
}

interface GetSignatureProps {
  event: any;
  meetingNumber: string | undefined;
  username: string | undefined;
  password: string | undefined;
}

const getSignature = (props: GetSignatureProps) => {
  const { event, meetingNumber, password, username } = props || {};
  if (event?.preventDefault) {
    event.preventDefault();
  }
  fetch(process.env.REACT_APP_ZOOM_SIGNATURE_ENDPOINT!, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      meetingNumber: meetingNumber,
      role: 0
    })
  })
    .then((res) => res.json())
    .then((response) => {
      const meetingProps = {
        signature: response.signature,
        meetingNumber: meetingNumber,
        username: username,
        password: password
      };
      startMeeting(meetingProps);
    })
    .catch((error) => {
      console.error(error);
    });
};

const startMeeting = (props: StartMeetingProps) => {
  const rootElement: HTMLElement = document.getElementById(
    'vcapp'
  ) as HTMLElement;
  const { signature, meetingNumber, username, password } = props || {};

  // get meeting args from url
  const meetingConfig = {
    apiKey: process.env.REACT_APP_ZOOM_VAPID,
    meetingNumber: meetingNumber,
    userName: username,
    password: password,
    leaveUrl: '/home',
    role: 0,
    userEmail: '',
    lang: 'en-US',
    signature: signature || '',
    webEndpoint: 'zoom.us'
  };

  if (!meetingConfig.signature) {
    console.log('no signature found');
  } else {
    const zmClient = ZoomMtgEmbedded.createClient();

    const tmpPort =
      window.location.port === '' ? '' : ':' + window.location.port;
    const avLibUrl =
      window.location.protocol +
      '//' +
      window.location.hostname +
      tmpPort +
      '/lib';

    zmClient
      .init({
        debug: false,
        zoomAppRoot: rootElement,
        assetPath: avLibUrl,
        language: meetingConfig.lang
      })
      .then((e: any) => {
        console.log('init success', e);
      })
      .catch((e: any) => {
        console.log('init error', e);
      });

    // WebSDK Embedded join
    zmClient
      .join({
        apiKey: meetingConfig.apiKey || '',
        signature: meetingConfig.signature,
        meetingNumber: meetingConfig.meetingNumber || '',
        userName: meetingConfig.userName || '',
        password: meetingConfig.password,
        userEmail: meetingConfig.userEmail
      })
      .then((e: any) => {
        console.log('join success', e);
      })
      .catch((e: any) => {
        console.log('join error', e);
      });
  }
};

export { getSignature };

on executing we are facing the issue:

Uncaught SyntaxError: Unexpected token '<'
zoomus-websdk-embedded.umd.min.js:6352 Uncaught ReferenceError: JsMediaSDK_Instance is not defined
    at da.init (zoomus-websdk-embedded.umd.min.js:6352:1)
    at zoomus-websdk-embedded.umd.min.js:9372:1
    at t.project (zoomus-websdk-embedded.umd.min.js:8058:1)
    at t._next (zoomus-websdk-embedded.umd.min.js:2703:1)
    at t.next (zoomus-websdk-embedded.umd.min.js:1099:1)
    at t._next (zoomus-websdk-embedded.umd.min.js:2900:1)
2

One more thing that I noticed in the example is that the app is rewired but in our circumstance we can’t afford to rewire the app as it’s breaking a lot of things in the ionic react core package

3

Closing this topic since we’ve switched to other video platform on priority and it doesn’t seem to work without rewiring