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
