Integrate SDK

The Web SDK can be imported locally into an existing Node.js app through an npm package, or into any HTML5 project through a CDN (content delivery network).

The Web SDK uses an API Key & Secret for authentication. Login to the Zoom Marketplace and Create a JWT App to get API Keys & Secrets.

Dependencies

Required packages installed locally or through Zoom CDN.

"dependencies": {
	"react": "16.8.6",
	"react-dom": "16.8.6",
	"redux": "3.7.2",
	"react-redux": "7.1.0",
	"jquery": "^3.4.1",
	"lodash": "^4.17.14",
	"redux-thunk": "2.2.0"
}

Import Module Locally

The Zoom Web SDK can be installed through npm using the zoomus-websdk package.

npm i @zoomus/websdk
index.js
import { ZoomMtg } from ‘@zoomus/websdk‘;
Add entry to webpack.config.dev.js
webpack.config.dev.js
entry: {
    meeting: [
        './js/meeting.js'
    ]
},
output: {
    path: path.resolve(__dirname, '/static'),
    publicPath: '/static',
    hashDigestLength: 5,
    filename: '[name].min.js'
},
externals: {
    'babel-polyfill': 'babel-polyfill',
    react: 'React',
    'react-dom': 'ReactDOM',
    redux: 'Redux',
    'redux-thunk': 'ReduxThunk',
    lodash: {
        commonjs: 'lodash',
        amd: 'lodash',
        root: '_',
        var: '_'
    }
}
index.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";
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);

Import Through CDN

The Zoom Web SDK can also be imported and used through CDN. To import, include the following in your index.html file:

index.html
<head>
    <!-- import #zmmtg-root css -->
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.9/css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.9/css/react-select.css" />
<head>
<body>
    <!-- import ZoomMtg dependencies -->
    <script src="https://source.zoom.us/1.7.9/lib/vendor/react.min.js"></script>
    <script src="https://source.zoom.us/1.7.9/lib/vendor/react-dom.min.js"></script>
    <script src="https://source.zoom.us/1.7.9/lib/vendor/redux.min.js"></script>
    <script src="https://source.zoom.us/1.7.9/lib/vendor/redux-thunk.min.js"></script>
    <script src="https://source.zoom.us/1.7.9/lib/vendor/jquery.min.js"></script>
    <script src="https://source.zoom.us/1.7.9/lib/vendor/lodash.min.js"></script>

    <!-- import ZoomMtg -->
    <script src="https://source.zoom.us/zoom-meeting-1.7.9.min.js"></script>
    
    <!-- import local .js file -->
    <script src="js/index.js"></script>
</body>

To specify the required dependency library, use the setZoomJSLib function:

index.js
// For Local module default:
ZoomMtg.setZoomJSLib('node_modules/@zoomus/websdk/dist/lib', '/av');
// For CDN version default
ZoomMtg.setZoomJSLib('https://dmogdx0jrul3u.cloudfront.net/1.7.9/lib', '/av'); 
// For Global use source.zoom.us:
ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.9/lib', '/av'); 
// In China use jssdk.zoomus.cn:
ZoomMtg.setZoomJSLib('https://jssdk.zoomus.cn/1.7.9/lib', '/av'); 

Prepare Required Files

Before launching and joining a meeting, make sure to load WebAssembly files and JavaScript requirements onto the page.

index.js
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

Appended DOM Elements

When imported, the Web SDK adds new elements to the DOM to handle Meeting window overlays and accessibility elements. The following elements are added to the end of <body></body>:

index.html
<body>
    <!-- added on import -->
    <div id="zmmtg-root"></div>
    <div id="aria-notify-area"></div>
</body>

To manage or manipulate this DOM element within your app, use JavaScript to get the element:

index.js
const zoomMeeting = document.getElementById("zmmtg-root")

When a Meeting is launched via ZoomMtg.init() additional DOM elements are appended to include core in-Meeting UI and functions:

index.html
<body class="ReactModal__Body--open">
    
    <!-- added on import -->
    <div id="zmmtg-root"></div>
    <div id="aria-notify-area"></div>
    
    <!-- added on meeting init -->
    <div class="ReactModalPortal"></div>
    <div class="ReactModalPortal"></div>
    <div class="ReactModalPortal"></div>
    <div class="ReactModalPortal"></div>
    <div class="global-pop-up-box"></div>
    <div class="sharer-controlbar-container sharer-controlbar-container--hidden"></div>
	
</body>

Need help?

The first place to look is on our Developer Forum. If you can't find the answer or your request includes sensitive information, contact Developer Support.