index.html
Full Sample Demo Local Statement
Run demo
git clone https://github.com/zoom/sample-app-web.git --branch master --depth 1
cd sample-app-web/Local
npm install
npm run start
packages.json
{
"$schema": "http://json.schemastore.org/coffeelint",
"name": "websdk-local",
"version": "1.9.6",
"description": "Zoom sample app for web client WebSDK",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "set NODE_ENV=development && set production=development && webpack-dev-server --config webpack.config.dev.js"
},
"keywords": [
"zoom",
"meeting",
"client",
"webclient"
],
"author": "Your Name",
"license": "ISC",
"dependencies": {
"@zoomus/websdk": "^1.9.6"
},
"devDependencies": {
"@babel/cli": "^7.1.5",
"@babel/core": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"@babel/preset-stage-0": "^7.0.0",
"@babel/preset-stage-1": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.4",
"babel-polyfill": "^6.26.0",
"babel-preset-airbnb": "^3.0.1",
"css-loader": "^1.0.1",
"eslint": "^5.9.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"file-loader": "^2.0.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
.babelrc
{
"env": {
"production": {
"presets": [
["@babel/preset-env", { "modules": false }],
"@babel/preset-react",
"airbnb"]
},
"development": {
}
},
"presets": [
["@babel/preset-env", { "modules": false }],
"@babel/preset-react",
"airbnb"]
}
.eslintrc
{
"extends": "airbnb",
"rules": {
"indent": [
"error",
4
],
"linebreak-style": [
"error",
"unix"
],
"semi": [
"error",
"always"
],
"comma-dangle": 0,
"no-console": "off",
"react/jsx-filename-extension": [1, {
"extensions": [".js", ".jsx"]
}],
"global-require": "off",
"react/prop-types": [
1,
{ "ignore": "ignore", "customValidators": "customValidator" }
],
"react/destructuring-assignment": [true , "always", { "ignoreClassFields": true }],
"react/jsx-indent": [true, 4],
"max-len": 0,
"class-methods-use-this": 0,
"react/jsx-indent-props": 0,
"import/no-named-as-default": 0,
"jsx-a11y/click-events-have-key-events": 0,
"jsx-a11y/interactive-supports-focus": 0,
"no-bitwise": 0,
"no-trailing-spaces": ["error", { "ignoreComments": true }],
"react/no-string-refs": 0,
"jsx-a11y/no-static-element-interactions": [
"error",
{
"handlers": [
"onClick",
"onMouseDown",
"onMouseUp",
"onKeyPress",
"onKeyDown",
"onKeyUp",
"onMouseOver",
"onMouseOut"
]
}
]
},
"env": {
"amd": true,
"browser": true,
"node": true,
"es6": true,
"worker": true
},
"globals": {
"document": true,
"window": true,
"$": true,
"_": true
},
"parser": "babel-eslint"
}
webpack.config.dev.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: {
index: [
'./js/index.js'
],
meeting: [
'./js/meeting.js'
]
},
output: {
path: path.resolve(__dirname, '/static'),
publicPath: '/static',
hashDigestLength: 5,
filename: '[name].min.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(jpg|png|svg)$/,
loader: 'url-loader?limit=500000'
},
{
test: /\.(ttf|eot|woff|woff2|svg)$/,
loader: 'url-loader?limit=50000'
},
{
test: /\.scss$/,
loader: 'style!css!sass'
}
]
},
resolve: {
extensions: ['.js', '.jsx']
},
context: __dirname,
target: 'web',
devServer: {
host: 'localhost',
port: 9999,
hot: true,
overlay: true,
historyApiFallback: false,
watchContentBase: true,
disableHostCheck: true,
open: true,
headers: {
'Access-Control-Allow-Origin': 'http://localhost:9999'
}
},
externals: {
'babel-polyfill': 'babel-polyfill',
react: 'React',
'react-dom': 'ReactDOM',
redux: 'Redux',
'redux-thunk': 'ReduxThunk',
lodash: {
commonjs: 'lodash',
amd: 'lodash',
root: '_',
var: '_'
}
},
mode: 'development',
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
'process.env.BABEL_ENV': JSON.stringify('development'),
})
],
};
meeting.html
<!DOCTYPE html>
<head>
<title>Zoom WebSDK</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="node_modules/@zoomus/websdk/dist/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="node_modules/@zoomus/websdk/dist/css/react-select.css" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<script src="node_modules/react/umd/react.production.min.js"></script>
<script src="node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="node_modules/redux/dist/redux.min.js"></script>
<script src="node_modules/redux-thunk/dist/redux-thunk.min.js"></script>
<script src="node_modules/lodash/lodash.min.js"></script>
<script src="js/tool.js"></script>
<script src="./static/meeting.min.js"></script>
</body>
</html>
js/meeting.js
import { ZoomMtg } from "@zoomus/websdk";
// tool.js
const testTool = window.testTool;
// get meeting args from url
const tmpArgs = testTool.parseQuery();
const meetingConfig = {
apiKey: tmpArgs.apiKey,
meetingNumber: tmpArgs.mn,
userName: (function () {
if (tmpArgs.name) {
try {
return testTool.b64DecodeUnicode(tmpArgs.name);
} catch (e) {
return tmpArgs.name;
}
}
return (
"CDN#" +
tmpArgs.version +
"#" +
testTool.detectOS() +
"#" +
testTool.getBrowserInfo()
);
})(),
passWord: tmpArgs.pwd,
leaveUrl: "/index.html",
role: parseInt(tmpArgs.role, 10),
userEmail: (function () {
try {
return testTool.b64DecodeUnicode(tmpArgs.email);
} catch (e) {
return tmpArgs.email;
}
})(),
lang: tmpArgs.lang,
signature: tmpArgs.signature || "",
china: tmpArgs.china === "1",
};
console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));
// it's option if you want to change the WebSDK dependency link resources. setZoomJSLib must be run at first
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
function beginJoin(signature) {
ZoomMtg.init({
leaveUrl: meetingConfig.leaveUrl,
webEndpoint: meetingConfig.webEndpoint,
success: function () {
console.log(meetingConfig);
console.log("signature", signature);
$.i18n.reload(meetingConfig.lang);
ZoomMtg.join({
meetingNumber: meetingConfig.meetingNumber,
userName: meetingConfig.userName,
signature: signature,
apiKey: meetingConfig.apiKey,
userEmail: meetingConfig.userEmail,
passWord: meetingConfig.passWord,
success: function (res) {
console.log("join meeting success");
console.log("get attendeelist");
ZoomMtg.getAttendeeslist({});
ZoomMtg.getCurrentUser({
success: function (res) {
console.log("success getCurrentUser", res.result.currentUser);
},
});
},
error: function (res) {
console.log(res);
},
});
},
error: function (res) {
console.log(res);
},
});
}
beginJoin(meetingConfig.signature);