Description
So I am trying to use the zoom web sdk in jupyterlab and react. But I dont know how to implement the index.html to get this to work. The error is a Reference Error.
Error
ReferenceError: $ is not defined
at Object. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)
at Object. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)
at Object. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)
at Object. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)
at Object. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)
main (at sign here) index.out.js:995
In my app.tsx file:
import { ReactWidget } from ‘@jupyterlab/apputils’;
import React, { FunctionComponent, useEffect, useState } from ‘react’;
import { VideoStream } from ‘./Video’;
const App: FunctionComponent = (): JSX.Element => {
const [loadedScript, setLoadedScript] = useState(false);
useEffect(() => {
const script = document.createElement(‘script’);
script.src = 'https://source.zoom.us/1.7.8/lib/vendor/jquery.min.js';
script.async = true;
document.body.appendChild(script);
console.log('-------------------> Added Jquery to window');
setLoadedScript(true);
return () => {
document.body.removeChild(script);
console.log('-------------------> Removed Jquery to window');
};
}, );
return loadedScript ?
// return (
//
//
Hello
//
// );
};
export default class AppWidget extends ReactWidget {
constructor() {
super();
this.addClass(‘jp-ReactWidget’);
}
render(): JSX.Element {
return ;
}
}
In my video.tsx file I have
/** (at sign here)jsx jsx */
import { ReactWidget } from ‘(at sign here)jupyterlab/apputils’;
import { jsx } from ‘(at sign here)emotion/core’;
//import axios from ‘axios’;
import { useEffect } from ‘react’;
import ‘bulma/css/bulma.css’;
import { ZoomMtg } from ‘(at sign here)zoomus/websdk’;
//import { BASE_URL, CUSTOM_HEADERS } from ‘./Constants’;
export const VideoStream = (): JSX.Element => {
const API_KEY = ‘I placed my key here’;
const API_SECRET = ‘And my api key here’;
const MEETING_NUMBER = MeetingNum;
const meetConfig = {
apiKey: API_KEY,
apiSecret: API_SECRET,
meetingNumber: MEETING_NUMBER,
userName: ‘test user’,
passWord: ‘’,
leaveUrl: ‘https://zoom.us’,
role: 0
};
const state = {
meetingLaunched: false
};
const launchMeeting = () => {
//setState({ meetingLaunched: !state.meetingLaunched });
ZoomMtg.generateSignature({
meetingNumber: meetConfig.meetingNumber,
apiKey: meetConfig.apiKey,
apiSecret: meetConfig.apiSecret,
role: meetConfig.role,
success(res) {
console.log('signature', res.result);
ZoomMtg.init({
leaveUrl: 'http://www.zoom.us',
success() {
ZoomMtg.join({
meetingNumber: meetConfig.meetingNumber,
userName: meetConfig.userName,
signature: res.result,
apiKey: meetConfig.apiKey,
userEmail: 'email@gmail.com',
passWord: meetConfig.passWord,
success() {
console.log('join meeting success');
},
error(res) {
console.log(res);
}
});
},
error(res) {
console.log(res);
}
});
}
});
};
useEffect(() => {
ZoomMtg.setZoomJSLib(‘https://source.zoom.us/1.7.8/lib’, ‘/av’);
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
});
return (
<script src="https://source.zoom.us/1.7.8/lib/vendor/jquery.min.js" />
{!state ? (
<button className="launchButton" onClick={launchMeeting}>
Launch Meeting
</button>
) : (
<div />
)}
</div>
);
};
export class VideoStreamWidget extends ReactWidget {
constructor() {
super();
this.addClass(‘jp-ReactWidget’);
}
render(): JSX.Element {
return ;
}
}
And my index.js (Used to create the jupyterlab widget)
import {
JupyterFrontEnd,
JupyterFrontEndPlugin
} from ‘(at sign here)jupyterlab/application’;
import { MainAreaWidget } from ‘(at sign here)jupyterlab/apputils’;
import { ILauncher } from ‘@jupyterlab/launcher’;
import { reactIcon } from ‘@jupyterlab/ui-components’;
import App from ‘./App’;
namespace CommandIDs {
export const create = ‘open-ignite-video’;
}
const extension: JupyterFrontEndPlugin = {
id: ‘ignite-video-stream-widget’,
autoStart: true,
optional: [ILauncher],
activate: (app: JupyterFrontEnd, launcher: ILauncher) => {
const { commands } = app;
const command = CommandIDs.create;
commands.addCommand(command, {
caption: 'Open Ignite Video Panel',
label: 'Ignite Video',
icon: args => (args['isPalette'] ? null : reactIcon),
execute: () => {
const content = new App();
const widget = new MainAreaWidget<App>({ content });
widget.title.label = 'Ignite Video';
app.shell.add(widget, 'main');
}
});
if (launcher) {
launcher.add({
command
});
}
}
};
export default extension;
I added the dependencies properly its just that i dont know how to implement the zoom sdk index.html file into our code. The way we have it setup right now is that the (at)zoom/websdk runs before the jquery so this issue arises. Does anyone have a work around?
Which version?
Browser is Chrome
using zoom sdk 1.7.8