How to Integrate Zoom Web SDK to a website

How to Integrate Zoom Web SDK to a website

INTRODUCTION

With the rise in remote-working and online learning, caused especially by the pandemic that broke out in 2020. It has become paramount that meetings, work-related communication, school lessons and all, be held over the air.

In this article, as a developer, I'm going to show you how to integrate zoom video conferencing into a website using zoom web SDK. So sit back and have a nice read. All that will be discussed here is gotten from Zoom's documentation

WHY DO YOU NEED THIS?

Building a video conferencing app is quite cumbersome and a good deal of experience and knowledge is required to be able to spin that off. Why go through all the stress and hassle of building one from scratch when you can easily utilize what is there already and have its full features right in your hands. Well, unless you intend to compete with Zoom, I don't see any reason why you need to build from scratch.

Perhaps you just got a new gig, which requires a video conferencing feature. Well, you just landed on the right post for that.

BUILDING THE APP

There are four steps which we will follow to set up a video conferencing app utilizing zoom API.

  • Generate Tokens.
  • Integrate SDK.
  • Generate Signature App.
  • Joining a Meeting.

STEP 1 - Generate Tokens.

To use the zoom web SDK, we will need an API key token and aSecret token which can be gotten from the Zoom market place by creating a JWT app.

  • Sign up on zoom if you haven't yet.
  • Choose your app type by clicking on create JWT.

You will be presented with a screen as shown below.

zoom-information.png

  • Fill the information; the basic and Developer contact information. Click on Continue to go to the App Credentials tab.
  • Copy your API key and API Secret tokens and save somewhere for later use.
  • Set the expiration time of your token.
  • Go the Activation and click on activate.

jwt-app-success.png If you can see the same display as what we have above, congratulations you have successfully created your your tokens.

STEP 2 - Integrate SDK.

Using the web SDK, there are two ways to do this either importing to a node app (using npm) or into an HTML5 project. We will go with the later in this post. You can always check out the doc for the other, they are basically the same thing.

Let's begin;

  • Create a project folder.
  • In the folder created above, create an index.html file with content as shown below;
  <!DOCTYPE HTML>
    <html lang="en">
      <head>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <title>Zoom SDK Integration</title>
     </head>
     <body>

     </body>
      </html>
  • Import the SDK through CDNs into the index.html file as shown below;
    // CSS LIBRARIES
    <!-- import #zmmtg-root css -->
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.8.5/css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.8.5/css/react-select.css" />


   //  JAVASCRIPT LIBRARIES
    <!-- import ZoomMtg dependencies -->
    <script src="https://source.zoom.us/1.8.5/lib/vendor/react.min.js"></script>
    <script src="https://source.zoom.us/1.8.5/lib/vendor/react-dom.min.js"></script>
    <script src="https://source.zoom.us/1.8.5/lib/vendor/redux.min.js"></script>
    <script src="https://source.zoom.us/1.8.5/lib/vendor/redux-thunk.min.js"></script>
    <script src="https://source.zoom.us/1.8.5/lib/vendor/lodash.min.js"></script>

    <!-- import ZoomMtg -->
    <script src="https://source.zoom.us/zoom-meeting-1.8.5.min.js"></script>
  • Specify the dependency library.

Specify the required dependency library with the following for CDN.

// For CDN version default
ZoomMtg.setZoomJSLib('https://dmogdx0jrul3u.cloudfront.net/1.8.5/lib', '/av');
  • Prepare the required library files, by initializing the following methods.
<script>
  // load WebAssembly files
  ZoomMtg.preLoadWasm();

  // JavaScript requirements
  ZoomMtg.prepareJssdk();
</script>

I know you'd probably be wondering where all these configurations are gotten from, worry not, for I did not make any up. They are all in the documentation

  • Append to the DOM After the libraries are imported and initialized, elements are added to the DOM to take care of meeting window and overlay.
<body>
    <!-- added on import -->
    <div id="zmmtg-root"></div>
    <div id="aria-notify-area"></div>
</body>

The above code is a sample of DOM elements created on the fly when libraries are loaded. You don't need to add that to your code.

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

<script>
   const zoomMeeting = document.getElementById("zmmtg-root") 
</script>

STEP 3 - GENERATE SIGNATURE APP

Every request to start or join a meeting must be verified by an encrypted signature, which will authorize the user to join a meeting. A signature must be generated each time a user joins a meeting and stored securely on a backend service. The signature will be used when calling the join method i.e ZoomMtg.join().

Here's a list of various parameters which are required when generating a token;

NameDescription
apiKeyAPI Key generated from your account
apiSecretAPI secret generated from your account
meetingNumberZoom meeting number / id
role1 for meeting host and 0 for participants
  • Deploying a signature app to Heroku.

See the documentation on how to generate signatures on different backend services. Let's have ours hosted on a free hosting platform that supports backend like Heroku, there's a Deploy to Heroku button on the documentation, click on it to deploy a sample signature generation code which was provided by Zoom as shown below.

signature.png

After clicking on the button, you'd presented with a screen to input your app details, like; name (Take note of the name as you API URL is based on that), API key and API secret. If you don't see this screen, you're probably not signed in, sign in or register if you don't have an account with Heroku.

Here's how the display should look like;

naming-app-in-heroku-to-deploy-signature.png

Click on deploy after you've filled the necessary fields, sit tight and wait for your signature app to be deployed. On completion, you should have a URL like this https://zoom-signature-2.herokuapp.com/.

Note: zoom-signature-2 is the name I specified, your URL should be https://{your signature app name}.herokuapp.com.

STEP 4 - JOIN A MEETING.

  • Create a zoom meeting

Go over to zoom and create a meeting, retrieve the meeting number, it will be needed for the next step.

  • Create a generate signature function.

Here, we will create a generateSignature() function to generate signature from your signature app deployed earlier on.

We will be making a POST request to the deployed app URL, sending a body object containing the meetingNumber and role.

Request URL

https://{your signature app name}.herokuapp.com/

Request Body

{
     "meetingNumber": zoom_meeting_number, // Meeting number of a zoom meeting created.
     "role": 0 // "1" to join as host and "0" to join as a guest.
}

Generate Signature function

 // Generate Signature
 const generateSignature = async () => {
      let _data = {
        "meetingNumber": zoom_meeting_number,
        "role": 0
      }

      await fetch('https://{your signature app name}.herokuapp.com/', {
          method: "POST",
          body: JSON.stringify(_data),
          headers: {"Content-type": "application/json; charset=UTF-8"}
      })
      .then(response => response.json()) 
      .then(json => {
          let signature = json.signature;
       })
       .catch(err => console.log(err)); 
}

Response Data

Your response data will contain your signature as shown below;

{
  "signature": "eHUzSlBhQV9SSlcyLTlsNV9IQWFMQS4xMjM0NTY3ODkuMTU4MzE2OTUzODc3My4wLkJMNEtiM3FINGx5ZzA1MUZtbGJOcGtPRnlFQS9lQUR2bGllVzJNNGZJeWs9"
}

NOTE: Signature should only be generated on the backend especially in a production environment.

  • Initialize Zoom App

Initialize a zoom meeting by calling join() method on ZoomMtg instance.

 // JOIN A MEETING
/**
* string signature
*/
  function joinMeeting(signature)
  {
       ZoomMtg.init({
          // Two-way audio and video over VoIP is disabled by default.
          // Set isSupportAV to true to enable that
          isSupportAV: true,

          // The page to load when the meeting is over.
          // Create the file and have a basic HTML content there.
          leaveUrl: 'end.html', 

          success: function() {

              ZoomMtg.join({
                  signature: signature,
                  apiKey: your_api_key",
                  meetingNumber: 82299146512,
                  userName: "devugo",
                  // password optional; 
                  passWord: 111111,
                  error(res) { 
                      console.log(res) 
                   }
               })        
           },
           error: (error) => {
               console.log(error)
           }
       })
   }

So, let's call the joinMeeting function inside our generate signature function (in the response section), so that immediately we have generated a signature, the meeting starts.

Here's how it's done below;

 .then(json => {
      let signature = json.signature;
      joinMeeting(signature);
 })

Open up index.html on the browser and you should see either of the screens below

image.png

You will be presented with the above if you didn't enter the meeting as a host, guest users have to wait for the host to let them in. (This is actually a setting I checked when creating the meeting, your case might be different).

Join the meeting as a host from here, ensure you join the meeting you created while following this post.

image.png

You should see the above if the meeting was set for only the host to allow users in. If so, host admits the user in and voila, you have your zoom meeting fully integrated into your website.

image.png

Here's the final code on Github

SUMMARY

With this post, you should have the knowledge on how to have a video conferencing feature on your next project by utilizing ZOOM API.

I do hope you enjoyed reading this as much I enjoyed writing this. Share and comment if you find it useful in any way. Thank you!

I love connecting with developers and people within the tech space; reach out to me on twitter.