Name Picker Malfunction

    @zoomus/websdk
    TypeScript icon, indicating that this package has built-in type declarations

    2.4.0 • Public • Published

    Zoom Web SDK

    Use of this SDK is subject to our Terms of Use

    Open Source Software (OSS) Attribution

    Starting from version 1.9.1, an OSS attribution file (oss_attribution.txt) will be provided in each release. Some licenses for OSS contained in our products give you the right to access the source code under said license. You may obtain a copy of source code for the relevant OSS via the following link: https://zoom.us/opensource/source. Please obtain independent legal advice or counsel to determine your responsibility to make source code available under any specific OSS project.

    About

    The Zoom Web Meeting SDK NPM package is for implementing the Zoom Meeting Web SDK with a frontend framework like React or Angular that uses webpack / babel.

    There are now two views to choose from, Component, and Client.

    NOTE: Please read how to improve Web SDK performance in Chrome.

    Installation

    In your frontend project, install the Web SDK:

    $ npm install @zoomus/websdk --save

    Use Component View

    Usage

    In the component file where you want to use the Web Meeting SDK, import ZoomMtgEmbedded and create the client.

    import ZoomMtgEmbedded from "@zoomus/websdk/embedded";
    
    const client = ZoomMtgEmbedded.createClient();

    In the HTML file, set an id attribute on the HTML element where you want to render the Web Meeting SDK. It will be hidden until you start or join a meeting.

    <div id=”meetingSDKElement”>
       <!-- Zoom Meeting SDK Rendered Here -->
    </div>

    Back in the JavaScript file, init the SDK with the HTML element above:

    let meetingSDKElement = document.getElementById('meetingSDKElement');
    
    client.init({
      debug: true,
      zoomAppRoot: meetingSDKElement,
      language: 'en-US',
      customize: {
        meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
        toolbar: {
          buttons: [
            {
              text: 'Custom Button',
              className: 'CustomButton',
              onClick: () => {
                console.log('custom button');
              }
            }
          ]
        }
      }
    });

    Here are the required properties for the client.join() function. You can get the Meeting Number and password from the Zoom Meeting APIs.

    Parameter Description
    apiKey Required, your Zoom JWT App API Key.
    signature Required, your signature. Instructions here.
    meetingNumber Required, the Zoom Meeting number.
    password Requried, leave as empty string if the meeting only requires the waiting room.
    userName Required, the name of the user starting or joining the meeting.
    userEmail Optional, the email of the user starting or joining the meeting.

    Then, join the meeting.

    client.join({
    	apiKey: apiKey,
    	signature: signature,
    	meetingNumber: meetingNumber,
    	password: password,
    	userName: userName
    })

    For the full list of features and event listeners, as well as additional guides, please see our Meeting SDK docs.

    Use Client View

    Usage

    In the component file where you want to use the Web SDK, import ZoomMtg and call the preLoadWasm() and prepareJssdk() functions.

    import { ZoomMtg } from '@zoomus/websdk';
    
    ZoomMtg.preLoadWasm();
    ZoomMtg.prepareJssdk();

    NOTE: The following directory (already in node_modules) must be accessible in your url path:

    • node_modules/@zoomus/websdk/dist/lib/

    Or, you can set a custom path to the Web SDK's lib directory using:

    ZoomMtg.setZoomJSLib('http://localhost:9999/custom/path/to/lib/', '/av')

    NOTE: The following files (already in node_modules) must be globally accessible (equivalent of link and script tag in index.html):

    • node_modules/@zoomus/websdk/dist/css/bootstrap.css
    • node_modules/@zoomus/websdk/dist/css/react-select.css

    Set the config variables (reference below):

    // setup your signautre endpoint here: https://github.com/zoom/websdk-sample-signature-node.js
    var signatureEndpoint = 'http://localhost:4000'
    var apiKey = 'JWT_API_KEY'
    var meetingNumber = 123456789
    var role = 0
    var leaveUrl = 'http://localhost:9999'
    var userName = 'WebSDK'
    var userEmail = ''
    var passWord = ''

    Config variables reference:

    Variable Description
    signatureEndpoint Required, the endpoint url that returns a signature. Get a signature endpoint here.
    apiKey Required, your Zoom JWT App API Key.
    meetingNumber The Zoom meeting / webinar number.
    role Required, 0 to join the meeting / webinar, 1 to start the meeting.
    leaveUrl Required, the URL the user is taken to once the meeting is over.
    userName Required, A name for the user joining / starting the meeting / webinar.
    userEmail Optional, the user joining / starting the meeting / webinar.
    passWord Optional, meeting password. Leave as empty string if the meeting does not require a password.

    Generate the meeting signature to authenticate, instructions here.

    var signature = 'eHUzSlBhQV9SSlcyLTlsNV9IQWFMQS4xMjM0NTY3ODkuMTU4MzE2OTUzODc3My4wLkJMNEtiM3FINGx5ZzA1MUZtbGJOcGtPRnlFQS9lQUR2bGllVzJNNGZJeWs9'

    Then init, and join the meeting.

    ZoomMtg.init({
      leaveUrl: leaveUrl,
      isSupportAV: true,
      success: (success) => {
        console.log(success)
    
        ZoomMtg.join({
          signature: signature,
          meetingNumber: meetingNumber,
          userName: userName,
          apiKey: apiKey,
          userEmail: userEmail,
          passWord: passWord,
          success: (success) => {
            console.log(success)
          },
          error: (error) => {
            console.log(error)
          }
        })
    
      },
      error: (error) => {
        console.log(error)
      }
    })

    For the full list of features and event listeners, as well as additional guides, please see our Meeting SDK docs.

    Sample App

    Checkout the Zoom Web SDK Sample App, and the Simple Signature Setup Sample App.

    Need help?

    If you're looking for help, try Developer Support or our Developer Forum. Priority support is also available with Premier Developer Support plans.

    Keywords

    Install

    npm i @zoomus/websdk

    DownloadsWeekly Downloads

    10,224

    Version

    2.4.0

    License

    SEE LICENSE IN LICENSE.md

    Unpacked Size

    39.8 MB

    Total Files

    71

    Last publish

    Collaborators

    • tommygaessler
    • zoomnode
    • zoomwebteam
    • zoomzach
    • michaelpurnell
    • mete.a.zoom