From dbdb7acf06b01f588fa9e54db8d6c71573f343b4 Mon Sep 17 00:00:00 2001 From: JackYang Date: Thu, 13 May 2021 11:22:24 +0800 Subject: [PATCH] update 1.9.5 --- CDN/.babelrc | 11 +++ CDN/.eslintrc | 68 --------------- CDN/corp.js | 44 ++++++++++ CDN/helper.html | 9 ++ CDN/js/meeting.js | 2 + CDN/meeting.html | 5 +- CDN/package.json | 19 +++-- CDN/webpack.config.dev.js | 41 +++++++++ Local/.eslintrc | 80 ++++------------- Local/corp.js | 44 ++++++++++ Local/helper.html | 9 ++ Local/js/meeting.js | 3 + Local/package.json | 51 ++++++----- Local/webpack.config.dev.js | 166 ++++++++++++++++++------------------ README.md | 23 +++-- 15 files changed, 321 insertions(+), 254 deletions(-) create mode 100644 CDN/.babelrc delete mode 100644 CDN/.eslintrc create mode 100644 CDN/corp.js create mode 100644 CDN/helper.html create mode 100644 CDN/webpack.config.dev.js create mode 100644 Local/corp.js create mode 100644 Local/helper.html diff --git a/CDN/.babelrc b/CDN/.babelrc new file mode 100644 index 000000000..2eaef33a4 --- /dev/null +++ b/CDN/.babelrc @@ -0,0 +1,11 @@ +{ + "env": { + "production": { + "presets": [ + ] + }, + "development": { + } + }, + "presets": [] +} diff --git a/CDN/.eslintrc b/CDN/.eslintrc deleted file mode 100644 index cec923bbf..000000000 --- a/CDN/.eslintrc +++ /dev/null @@ -1,68 +0,0 @@ -{ - "extends": "airbnb", - "rules": { - "indent": [ - "error", - 2 - ], - "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" -} \ No newline at end of file diff --git a/CDN/corp.js b/CDN/corp.js new file mode 100644 index 000000000..e3439b3fc --- /dev/null +++ b/CDN/corp.js @@ -0,0 +1,44 @@ +const webpack = require('webpack'); +const WebpackDevServer = require('webpack-dev-server'); +const webpackConfig = require('./webpack.config.dev'); + +function runFunc(err) { + if (err) { + console.log(err); + } + console.log('Listening at http://127.0.0.1:9999/index.html'); +} + +new WebpackDevServer(webpack(webpackConfig), { + publicPath: '/static', + hot: true, + host: '0.0.0.0', + open: 'chrome', + after(app, server) { + }, + headers: { + // 'Cross-Origin-Embedder-Policy': 'unsafe-none', + // 'Cross-Origin-Opener-Policy': 'unsafe-none', + }, + openPage: 'http://127.0.0.1:9999/index.html', + disableHostCheck: true, + historyApiFallback: true, + proxy: [{ + path: '/meeting.html', + target: 'http://127.0.0.1:9998/' + }] +}).listen(9999, '0.0.0.0', runFunc); + +new WebpackDevServer(webpack(webpackConfig), { + publicPath: '/static', + hot: true, + host: '0.0.0.0', + after(app, server) { + }, + headers: { + 'Cross-Origin-Embedder-Policy': 'require-corp', + 'Cross-Origin-Opener-Policy': 'same-origin', + }, + disableHostCheck: true, + historyApiFallback: true, +}).listen(9998, '0.0.0.0', runFunc); diff --git a/CDN/helper.html b/CDN/helper.html new file mode 100644 index 000000000..94b0d6f2d --- /dev/null +++ b/CDN/helper.html @@ -0,0 +1,9 @@ +Zoom WebSDK Helper \ No newline at end of file diff --git a/CDN/js/meeting.js b/CDN/js/meeting.js index 138076ccc..2aa520494 100644 --- a/CDN/js/meeting.js +++ b/CDN/js/meeting.js @@ -58,6 +58,8 @@ function websdkready() { ZoomMtg.init({ leaveUrl: meetingConfig.leaveUrl, webEndpoint: meetingConfig.webEndpoint, + disableCORP: !window.crossOriginIsolated, // default true + // disablePreview: false, // default false success: function () { console.log(meetingConfig); console.log("signature", signature); diff --git a/CDN/meeting.html b/CDN/meeting.html index c064dcc39..63b443d6b 100644 --- a/CDN/meeting.html +++ b/CDN/meeting.html @@ -22,10 +22,7 @@ diff --git a/CDN/package.json b/CDN/package.json index b8fb90f76..17422a75b 100755 --- a/CDN/package.json +++ b/CDN/package.json @@ -3,16 +3,17 @@ "version": "1.9.5", "description": "Zoom sample app for web client WebSDK", "main": "index.js", - "dependencies": {}, - "devDependencies": { - "concurrently": "^3.5.1", - "http-server": "^0.12.1" - }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "start": "concurrently \"http-server -a 0.0.0.0 -p 9999 -c-1 -o index.html\"", - "https": "concurrently \"http-server -a 0.0.0.0 -p 9999 -c-1 -S -C localhost.crt -K localhost.key -o https://localhost:9999/index.html\"" + "start": "set NODE_ENV=development && set BABEL_ENV=development && webpack serve --config webpack.config.dev.js", + "https": "set NODE_ENV=development && set BABEL_ENV=development && webpack serve --config webpack.config.dev.js --https", + "corp": "set NODE_ENV=development && set BABEL_ENV=development && node corp.js --corp" }, - "author": "Yang Jack", - "license": "ISC" + "author": "Jack Jack", + "license": "ISC", + "devDependencies": { + "webpack": "5.28.0", + "webpack-cli": "4.5.0", + "webpack-dev-server": "3.11.2" + } } diff --git a/CDN/webpack.config.dev.js b/CDN/webpack.config.dev.js new file mode 100644 index 000000000..76515c95f --- /dev/null +++ b/CDN/webpack.config.dev.js @@ -0,0 +1,41 @@ +const path = require('path'); +const webpack = require('webpack'); +const args = process.argv.slice(2); +let https = false; +let disableCORP = true; +if (args.includes('--https')) https = true; +if (args.includes('--corp')) disableCORP = false; + + +module.exports = { + devtool: 'eval', + entry: { + }, + context: __dirname, + target: 'web', + devServer: { + https, + cert: './localhost.crt', + key: './localhost.key', + host: '0.0.0.0', + port: 9999, + hot: true, + overlay: true, + historyApiFallback: false, + watchContentBase: true, + disableHostCheck: true, + headers: { + 'Access-Control-Allow-Origin': https ? 'https://0.0.0.0:9999' : 'http://0.0.0.0:9999' + }, + open: 'chrome', + openPage: https ? 'https://127.0.0.1:9999' : 'http://127.0.0.1:9999', + }, + mode: 'development', + plugins: [ + new webpack.HotModuleReplacementPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('development'), + 'process.env.BABEL_ENV': JSON.stringify('development'), + }), + ], +}; diff --git a/Local/.eslintrc b/Local/.eslintrc index 0e294584c..0383cbabf 100755 --- a/Local/.eslintrc +++ b/Local/.eslintrc @@ -1,68 +1,20 @@ { - "extends": "airbnb", + "parser": "@babel/eslint-parser", + "extends": [ + "airbnb", "prettier" + ], + "plugins": ["prettier"], "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" - ] - } - ] + "prettier/prettier": ["warn", { + "singleQuote": true, + "semi": true, + "trailingComma": "none" + }], + "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] }, - "env": { - "amd": true, - "browser": true, - "jquery": true, - "node": true, - "es6": true, - "worker": true - }, - "globals": { - "document": true, - "window": true, - "$": true, - "_": true - }, - "parser": "babel-eslint" + "ignorePatterns": [ + "js/index.js", + "js/meeting.js", + "js/tool.js" + ] } \ No newline at end of file diff --git a/Local/corp.js b/Local/corp.js new file mode 100644 index 000000000..e3439b3fc --- /dev/null +++ b/Local/corp.js @@ -0,0 +1,44 @@ +const webpack = require('webpack'); +const WebpackDevServer = require('webpack-dev-server'); +const webpackConfig = require('./webpack.config.dev'); + +function runFunc(err) { + if (err) { + console.log(err); + } + console.log('Listening at http://127.0.0.1:9999/index.html'); +} + +new WebpackDevServer(webpack(webpackConfig), { + publicPath: '/static', + hot: true, + host: '0.0.0.0', + open: 'chrome', + after(app, server) { + }, + headers: { + // 'Cross-Origin-Embedder-Policy': 'unsafe-none', + // 'Cross-Origin-Opener-Policy': 'unsafe-none', + }, + openPage: 'http://127.0.0.1:9999/index.html', + disableHostCheck: true, + historyApiFallback: true, + proxy: [{ + path: '/meeting.html', + target: 'http://127.0.0.1:9998/' + }] +}).listen(9999, '0.0.0.0', runFunc); + +new WebpackDevServer(webpack(webpackConfig), { + publicPath: '/static', + hot: true, + host: '0.0.0.0', + after(app, server) { + }, + headers: { + 'Cross-Origin-Embedder-Policy': 'require-corp', + 'Cross-Origin-Opener-Policy': 'same-origin', + }, + disableHostCheck: true, + historyApiFallback: true, +}).listen(9998, '0.0.0.0', runFunc); diff --git a/Local/helper.html b/Local/helper.html new file mode 100644 index 000000000..94b0d6f2d --- /dev/null +++ b/Local/helper.html @@ -0,0 +1,9 @@ +Zoom WebSDK Helper \ No newline at end of file diff --git a/Local/js/meeting.js b/Local/js/meeting.js index 6b0735634..9cdea4c59 100644 --- a/Local/js/meeting.js +++ b/Local/js/meeting.js @@ -46,6 +46,9 @@ function beginJoin(signature) { ZoomMtg.init({ leaveUrl: meetingConfig.leaveUrl, webEndpoint: meetingConfig.webEndpoint, + webEndpoint: meetingConfig.webEndpoint, + disableCORP: !window.crossOriginIsolated, // default true + // disablePreview: false, // default false success: function () { console.log(meetingConfig); console.log("signature", signature); diff --git a/Local/package.json b/Local/package.json index cc9e1a028..f907a3dd8 100755 --- a/Local/package.json +++ b/Local/package.json @@ -6,8 +6,9 @@ "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "start": "set NODE_ENV=development && set BABEL_ENV=development && webpack-dev-server --config webpack.config.dev.js --https false --watch", - "https": "set NODE_ENV=development && set BABEL_ENV=development && webpack-dev-server --config webpack.config.dev.js --https true --watch" + "start": "set NODE_ENV=development && set BABEL_ENV=development && webpack serve --config webpack.config.dev.js", + "https": "set NODE_ENV=development && set BABEL_ENV=development && webpack serve --config webpack.config.dev.js --https", + "corp": "set NODE_ENV=development && set BABEL_ENV=development && node corp.js --corp" }, "keywords": [ "zoom", @@ -28,26 +29,32 @@ "redux-thunk": "2.2.0" }, "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/cli": "7.13.10", + "@babel/core": "^7.13.10", + "@babel/eslint-parser": "^7.13.14", + "@babel/plugin-syntax-dynamic-import": "^7.8.3", + "@babel/preset-env": "^7.13.15", + "@babel/preset-react": "7.12.13", + "@babel/preset-stage-0": "7.8.3", + "@babel/preset-stage-1": "7.8.3", + "@babel/runtime": "7.13.10", "babel-loader": "^8.0.4", - "babel-polyfill": "^6.26.0", - "babel-preset-airbnb": "^3.0.1", - "css-loader": "^1.0.1", - "eslint": "^4.12.1", - "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" + "babel-preset-airbnb": "^5.0.0", + "css-loader": "5.2.0", + "eslint": "^7.24.0", + "eslint-config-airbnb": "^18.2.1", + "eslint-config-prettier": "^8.2.0", + "eslint-plugin-import": "2.22.1", + "eslint-plugin-jsx-a11y": "6.4.1", + "eslint-plugin-prettier": "^3.4.0", + "eslint-plugin-react": "^7.23.2", + "eslint-plugin-react-hooks": "^4.2.0", + "file-loader": "6.2.0", + "node-polyfill-webpack-plugin": "^1.1.0", + "style-loader": "^2.0.0", + "url-loader": "4.1.1", + "webpack": "5.28.0", + "webpack-cli": "4.5.0", + "webpack-dev-server": "3.11.2" } } diff --git a/Local/webpack.config.dev.js b/Local/webpack.config.dev.js index af2e526a4..dc3a2b225 100755 --- a/Local/webpack.config.dev.js +++ b/Local/webpack.config.dev.js @@ -1,89 +1,93 @@ const path = require('path'); const webpack = require('webpack'); const args = process.argv.slice(2); -const https = args[2] === '--https' && args[3] === 'true'; +let https = false; +let disableCORP = true; +if (args.includes('--https')) https = true; +if (args.includes('--corp')) disableCORP = false; +console.log('https', https); +console.log('disableCORP', disableCORP); module.exports = { - devtool: 'eval', - entry: { - index: [ - './js/index.js' - ], - meeting: [ - './js/meeting.js' - ] - }, - output: { - path: path.resolve(__dirname, '/static'), - publicPath: '/static', - hashDigestLength: 5, - // filename: `zoom-meeting-${buildVersion}-[name]-[chunkhash].min.js`, - 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' + devtool: 'eval', + entry: { + index: ['./js/index.js'], + meeting: ['./js/meeting.js'] + }, + output: { + path: path.resolve(__dirname, '/static'), + publicPath: '/static', + hashDigestLength: 5, + // filename: `zoom-meeting-${buildVersion}-[name]-[chunkhash].min.js`, + filename: '[name].min.js' + }, + module: { + rules: [ + { + test: /\.jsx?$/, + exclude: /node_modules/, + loader: 'babel-loader' + }, + { + test: /\.css$/i, + use: ['style-loader', 'css-loader'] + }, + { + test: /\.(jpg|png|svg)$/, + use: [ + { + loader: 'url-loader', + options: { + limit: 500000 } + } ] + } + ] + }, + resolve: { + extensions: ['.js', '.jsx'] + }, + externals: { + 'babel-polyfill': 'babel-polyfill', + react: 'React', + 'react-dom': 'ReactDOM', + redux: 'Redux', + 'redux-thunk': 'ReduxThunk', + lodash: { + commonjs: 'lodash', + amd: 'lodash', + root: '_', + var: '_' + } + }, + context: __dirname, + target: 'web', + devServer: { + https, + cert: './localhost.crt', + key: './localhost.key', + host: '0.0.0.0', + port: 9999, + hot: true, + overlay: true, + historyApiFallback: false, + watchContentBase: true, + disableHostCheck: true, + headers: { + 'Access-Control-Allow-Origin': https + ? 'https://0.0.0.0:9999' + : 'http://0.0.0.0:9999' }, - resolve: { - extensions: ['.js', '.jsx'] - }, - externals: { - 'babel-polyfill': 'babel-polyfill', - react: 'React', - 'react-dom': 'ReactDOM', - redux: 'Redux', - 'redux-thunk': 'ReduxThunk', - lodash: { - commonjs: 'lodash', - amd: 'lodash', - root: '_', - var: '_' - } - }, - context: __dirname, - target: 'web', - devServer: { - https, - cert: './localhost.crt', - key: './localhost.key', - host: '0.0.0.0', - port: 9999, - hot: true, - overlay: true, - historyApiFallback: false, - watchContentBase: true, - disableHostCheck: true, - headers: { - 'Access-Control-Allow-Origin': https ? 'https://0.0.0.0:9999' : 'http://0.0.0.0:9999' - } - }, - mode: 'development', - plugins: [ - new webpack.HotModuleReplacementPlugin(), - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify('development'), - 'process.env.BABEL_ENV': JSON.stringify('development'), - }) - ], -}; + open: 'chrome', + openPage: https ? 'https://127.0.0.1:9999' : 'http://127.0.0.1:9999' + }, + mode: 'development', + plugins: [ + new webpack.HotModuleReplacementPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('development'), + 'process.env.BABEL_ENV': JSON.stringify('development'), + }) + ] +} diff --git a/README.md b/README.md index 816aa8e59..9c829693f 100755 --- a/README.md +++ b/README.md @@ -1,5 +1,10 @@ # Web Client SDK + Use of this SDK is subject to our [Terms of Use](https://zoom.us/docs/en-us/zoom_api_license_and_tou.html) +## Please note on Jul 20, Chrome 92 will release. Start from chrome92, [SharedArrayBuffer](https://web.dev/coop-coep/) only work for cross-origin isolation. it make WebSDK broken if you don't do any thing when user use Chrome 91. + +1. Apply `SharedArrayBuffers` [origintrials](https://developer.chrome.com/origintrials/#/trials/active) for you domain, it works until Chrome 94 release. +2. Seting you WebSDK/VideoSDK web isolation and update to >= 1.9.5. Zoom offers a web based HTML5 client that is used in environments where the end users cannot download zoom desktop clients due to internal IT restrictions or in very low bandwidth environments. @@ -64,12 +69,12 @@ China CDN ```jssdk.zoomus.cn``` ### Include the source ``` - + ``` ### or ``` -npm install @zoomus/websdk@1.8.6 +npm install @zoomus/websdk@1.9.5 ``` ### zoomus-jssdk move to @zoomus/websdk ``` @@ -77,7 +82,7 @@ import { ZoomMtg } from 'zoomus-jssdk'; change to import { ZoomMtg } from '@zoomus/websdk'; ``` -Please notice, 1.8.6 release with two ways, the normal way and npm way(need babel and webpack). +Please notice, 1.9.5 release with two ways, the normal way and npm way(need babel and webpack). At first, you invoke those three API to init jssdk. ``` @@ -85,14 +90,14 @@ console.log('checkSystemRequirements'); 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 -// if (!china) ZoomMtg.setZoomJSLib('https://source.zoom.us/1.8.6/lib', '/av'); // CDN version default -// else ZoomMtg.setZoomJSLib('https://jssdk.zoomus.cn/1.8.6/lib', '/av'); // china cdn option +// if (!china) ZoomMtg.setZoomJSLib('https://source.zoom.us/1.9.5/lib', '/av'); // CDN version default +// else ZoomMtg.setZoomJSLib('https://jssdk.zoomus.cn/1.9.5/lib', '/av'); // china cdn option // ZoomMtg.setZoomJSLib('http://localhost:9999/node_modules/@zoomus/websdk/dist/lib', '/av'); // Local version default, Angular Project change to use cdn version ZoomMtg.preLoadWasm(); ZoomMtg.prepareJssdk(); ``` -Go to see sample web app (CDN version) how to update 1.8.6 +Go to see sample web app (CDN version) how to update 1.9.5 [![sample](https://zoom.github.io/sample-app-web/img/participent-joined-meeting.png)]() @@ -183,3 +188,9 @@ notice: the certification signed by localhost. don't use in your production. npm run https ``` open browser https://localhost:9999 +### run demo with CORP(Web isolation, chrome91) +we provide a corp options to test chrome 91 web isolation mode + +``` +npm run corp +``` \ No newline at end of file