Integrate the Web SDK


To get started with using our Web SDK, you can use either by downloading the CDN version of our sample web app, downloading the local version of our sample web app, or including the JS SDK into your own project.

Download the sample web app (CDN version) with dependecies.

  • git clone https://github.com/zoom/sample-app-web.git --branch master --depth 1
  • cd sample-app-web/CDN
  • npm install
  • npm run start

package.json

"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.4",
	"redux-thunk": "2.2.0"
}

index.html

<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.6.0/css/bootstrap.css"/> 
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.6.0/css/react-select.css"/>

<script src="https://source.zoom.us/1.6.0/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/1.6.0/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/1.6.0/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/1.6.0/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/1.6.0/lib/vendor/jquery.min.js"></script>
<script src="https://source.zoom.us/1.6.0/lib/vendor/lodash.min.js"></script>

<script src="https://source.zoom.us/zoom-meeting-1.6.0.min.js"></script>
<script src="js/index.js"></script>

Download the sample web app (local version).

  • git clone https://github.com/zoom/sample-app-web.git
  • cd sample-app-web/Local
  • npm install
  • npm run start

Include the JS SDK into an exisiting NodeJS project.

  1. npm install zoomus-jssdk --save
  2. config add an entry to webpack.config.dev.js
entry: {
    app: [
        './js/index.js'
    ]
},
output: {
    path: path.resolve(__dirname, '/static'),
    publicPath: '/static',
    hashDigestLength: 5,
    filename: '[name].min.js'
}
  1. Add depencies to the index.html
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.6.0/css/bootstrap.css"/>
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.6.0/css/react-select.css"/>

<script src="https://source.zoom.us/1.6.0/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/1.6.0/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/1.6.0/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/1.6.0/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/1.6.0/lib/vendor/jquery.min.js"></script>
<script src="https://source.zoom.us/1.6.0/lib/vendor/lodash.min.js"></script>

<script src="https://source.zoom.us/zoom-meeting-1.6.0.min.js"></script>
  1. Add depencies to the index.js
import { ZoomMtg } from 'zoomus-jssdk';

console.log('checkSystemRequirements');
console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));

// it's option if you want to chenge the jssdk dependency link resources.
// ZoomMtg.setZoomJSLib('https://dmogdx0jrul3u.cloudfront.net/1.6.0/lib', '/av'); // CDN version default
// ZoomMtg.setZoomJSLib('https://source.zoom.us/1.6.0/lib', '/av'); // use source.zoom.us
// ZoomMtg.setZoomJSLib('https://jssdk.zoomus.cn/1.6.0/lib', '/av'); // use jssdk.zoomus.cn   
// ZoomMtg.setZoomJSLib('http://localhost:9999/node_modules/zoomus-jssdk/dist/lib', '/av'); // Local version default
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();


const API_KEY = 'YOUR_API_KEY';

/**
    * NEVER PUT YOUR ACTUAL API SECRET IN CLIENT SIDE CODE, THIS IS JUST FOR QUICK PROTOTYPING
    * The below generateSignature should be done server side as not to expose your api secret in public
    * You can find an eaxmple in here: https://marketplace.zoom.us/docs/sdk/native-sdks/Web-Client-SDK/tutorial/generate-signature
    */
const API_SECRET = 'YOUR_API_SECRET';

document.getElementById('join_meeting').addEventListener('click', (e) => {
    e.preventDefault();

    const meetConfig = {
        apiKey: API_KEY,
        apiSecret: API_SECRET,
        meetingNumber: parseInt(document.getElementById('meeting_number').value, 10),
        userName: document.getElementById('display_name').value,
        passWord: '',
        leaveUrl: 'https://zoom.us',
        role: 0
    };

    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',
                isSupportAV: true,
                success() {
                    ZoomMtg.join(
                        {
                            meetingNumber: meetConfig.meetingNumber,
                            userName: meetConfig.userName,
                            signature: res.result,
                            apiKey: meetConfig.apiKey,
                            userEmail: 'email@gmail.com',
                            passWord: meetConfig.passWord,
                            success() {
                                $('#nav-tool').hide();
                                console.log('join meeting success');
                            },
                            error(res) {
                                console.log(res);
                            }
                        }
                    );
                },
                error(res) {
                    console.log(res);
                }
            });
        }
    });
});