Tutorial: Sample Demo Local Statement

Sample Demo Local Statement

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

open http://localhost:9999

packages.json

{
  "$schema": "http://json.schemastore.org/coffeelint",
  "name": "websdk-local",
  "version": "1.8.1",
  "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": "Jack Yang",
  "license": "ISC",
  "dependencies": {
    "@zoomus/websdk": "^1.8.1"
  },
  "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,
        "jquery": 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',
        jQuery: 'jQuery',
        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="node_modules/jquery/dist/jquery.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.prepareJssdk();
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);

tool.js