Uncaught SyntaxError: Unexpected token '<' in video sdk

Description
I am setting up test to use Video SDK. I am be able to let Sample in zoom-instant-sdk-web-1.0.2 run. but when I just copy paste some files from Sample and put that into my own projects. It keep getting error when joining/creating the session. There are two errors below. Do I miss anything ?

Error
Uncaught SyntaxError: Unexpected token β€˜<’

Uncaught ReferenceError: JsMediaSDK_Instance is not defined

Which Web Video SDK version?
1.0.2

To Reproduce(If applicable)
Here is my code to use that, it basically just copy paste at sample but remove the children component to test join session

import React, {
  useEffect,
  useContext,
  useState,
  useCallback,
  useReducer,
} from 'react';
import ZoomMtgCm from '@zoomus/instantsdk';
import produce from 'immer';
import ZoomContext from './context/zoom-context';
import ZoomMediaContext from './context/media-context';
import { ChatClient, MediaStream } from './index-types';
import './App.css';

interface AppProps {
  meetingArgs: {
    sdkKey: string;
    topic: string;
    signature: string;
    name: string;
    password?: string;
  };
}
const mediaShape = {
  audio: {
    encode: false,
    decode: false,
  },
  video: {
    encode: false,
    decode: false,
  },
  share: {
    encode: false,
    decode: false,
  },
};
const mediaReducer = produce((draft, action) => {
  switch (action.type) {
    case 'audio-encode': {
      draft.audio.encode = action.payload;
      break;
    }
    case 'audio-decode': {
      draft.audio.decode = action.payload;
      break;
    }
    case 'video-encode': {
      draft.video.encode = action.payload;
      break;
    }
    case 'video-decode': {
      draft.video.decode = action.payload;
      break;
    }
    case 'share-encode': {
      draft.share.encode = action.payload;
      break;
    }
    case 'share-decode': {
      draft.share.decode = action.payload;
      break;
    }
    default:
      break;
  }
}, mediaShape);

function App(props: AppProps) {
  const {
    meetingArgs: { sdkKey, topic, signature, name, password },
  } = props;
  const [loading, setIsLoading] = useState(true);
  const [loadingText, setLoadingText] = useState('');
  const [isFailover, setIsFailover] = useState<boolean>(false);
  const [mediaState, dispatch] = useReducer(mediaReducer, mediaShape);
  const [mediaStream, setMediaStream] = useState<MediaStream | null>(null);
  const zmClient = useContext(ZoomContext);
  useEffect(() => {
    const init = async () => {
      await zmClient.init('en-US', `${window.location.origin}/lib`);
      try {
        console.log("Start joining");
        console.log("signature is" + signature);
        await zmClient.join(topic, signature, name, password);
        console.log("Finish joining");
        setMediaStream(zmClient.getMediaStream());
        setIsLoading(false);
      } catch (e) {
        console.log(e.message);
        setIsLoading(false);
      }
    };
    init();
    return () => {
      ZoomMtgCm.destroyClient();
    };
  }, [sdkKey, signature, zmClient, topic, name, password]);
  const onConnectionChange = useCallback(
    (payload) => {
      if (payload.state === 'Reconnecting') {
        setIsLoading(true);
        setIsFailover(true);
        const { reason } = payload;
        if (reason === 'failover') {
          setLoadingText('Session Disconnected,Try to reconnect');
        }
      } else if (payload.state === 'Connected' && isFailover) {
        setIsLoading(false);
      } else if (payload.state === 'Closed') {
      }
    },
    [isFailover],
  );
  const onMediaSDKChange = useCallback((payload) => {
    const { action, type, result } = payload;
    dispatch({ type: `${type}-${action}`, payload: result === 'success' });
  }, []);
  useEffect(() => {
    zmClient.on('connection-change', onConnectionChange);
    zmClient.on('media-sdk-change', onMediaSDKChange);
    return () => {
      zmClient.off('connection-change', onConnectionChange);
      zmClient.off('media-sdk-change', onMediaSDKChange);
    };
  }, [zmClient, onConnectionChange, onMediaSDKChange]);
  return (
    <div className="App">
      {!loading && (
        <ZoomMediaContext.Provider value={{ ...mediaState, mediaStream }}>
          <div></div>
        </ZoomMediaContext.Provider>
      )}
    </div>
  );
}

export default App;

Screenshots

SDK will load js_media.min.js to handle stream data, please check the link ${window.location.origin}/lib/js_media.min.js is accessible, you can get the lib folder at @zoomus/instantsdk/dist/lib.

If you use CRA to create the project, use copy-webpack-plugin to copy these dependent files to public/lib folder, in CRA, webpack devserver serves public directory as the default assets folder.

2 Likes

Thx ! After copy @zoomus/instantsdk/dist/lib to /public/lib it works !

1 Like

Happy to hear you got it sorted out @hz463 ! :slight_smile:

Please let us know if you need help with anything else.

Thanks,
Tommy