ionic: How to develop your ionic app to work with zoom — video calls/ meetings/audio calls

Hi all, today I’m going to share with you, how to implement an ionic app to use zoom meeting calls.

First, you should have a Zoom Account (obviously) and the following installed on your computer:

• npm@6.13.4+
• ionic-cli@6.9.0+
• ionic/angular@5.0.0+
• ionic-native/core@5.25.0+
• ionic-native/zoom@5.25.0+

as Prerequisites.

To have ionic-native/zoom@5.25.0+ in your project, you have to install zoom into your root folder.

You can access the ionic zoom package using https://ionicframework.com/docs/native/zoom and you will need to install the zoom package using the following commands.

ionic cordova plugin add cordova.plugin.zoom

npm install @ionic-native/zoom

Zoom SDK Set Up

Go to https://marketplace.zoom.us/develop/create and create your app giving the app name. Here, you may need to agree on terms and conditions. Then scroll down to SDK and click on create

And then you have to fill in the information. Then click next and scroll down and download the zip file related to ionic. And then click on next and then you will able to see the App credentials. You may need to copy the SDK Key and the SDK Secret. And then click on next and finish your SDK setup.

You can refer all the SDK Setup steps from: https://marketplace.zoom.us/docs/sdk/native-sdks/ionic/getting-started/edit-your-keys-names

ionic App implementation

After installing zoom into your root folder, if you are using iOS, you need to add the following to your config.xml file under platform= “ios”

Now, import the zoom into your app.module.ts file.

import { Zoom } from ‘@ionic-native/zoom/ngx’;

and add Zoom into Providers.

And in app.component.ts file, import zoom, add it to the constructor, include your SDK Key and SDK Secret and in the initializeApp() function, initialize the zoom service. This will initialize the zoom service by checking your SDK Key and the SDK Secret in the app initialization.

And then go to your specific page (ex: home page or whatever page inside the app where you need to implement the zoom). Add a button to start your meeting in your HTML file.

In joinMeeting() function in your page.ts file, you can access the following zoom functions as you want.

For login user with a username and a password

this.zoomService.login(userName, password)
  .then((success: any) => console.log(success))
  .catch((error: any) => console.log(error));

And for Logout,

this.zoomService.logout()
  .then((success: boolean) => console.log(success))
  .catch((error: any) => console.log(error));

You can have different meeting options like mentioned in the below, but this is only for Android

let options = {
  "no_driving_mode":true,
  "no_invite":true,
  "no_meeting_end_message":true,
  "no_titlebar":false,
  "no_bottom_toolbar":false,
  "no_dial_in_via_phone":true,
  "no_dial_out_to_phone":true,
  "no_disconnect_audio":true,
  "no_share":true,
  "no_audio":true,
  "no_video":true,
  "no_meeting_error_message":true
 };

If you know the meeting number and the meeting password or if-else if you can get the meeting number and the password, you can mention in the following method with a joining name/ display and call the function.

this.zoomService.joinMeeting(meetingNumber, meetingPassword, displayName, options)
  .then((success: any) => console.log(success))
  .catch((error: any) => console.log(error));

Please note that these are only a few methods. You can browse to https://marketplace.zoom.us/docs/sdk/native-sdks/ionic/mastering-zoom-sdk and check the other methods such as

isLoggedIn

Start an existing meeting for non-login user

Start an existing meeting for logged in user

Start an instant meeting for logged in user

Set Language

After that, you may build and run your ionic app and click on Join Meeting button to join with your Zoom Meeting.

You can check whether it’s working or not by creating a zoom meeting in another device (in your pc or in another mobile) and join to that meeting using your ionic app (with another zoom credentials).

Summary

I have referred the following links :

Edit your keys & names - Getting Started - Ionic - Client SDKs - Zoom Software Development Kit…

Mastering Zoom SDK - Ionic - Client SDKs - Zoom Software Development Kit (Zoom SDK)

Zoom - Ionic Documentation

Here, in the ionic documentation, they have use

import { Zoom } from '@ionic-native/zoom';

to import. But you will need to use

import { Zoom } from '@ionic-native/zoom/ngx';

since we are dealing with ionic-native.

That’s All!!!

Thanks for reading this article! if you have any questions, feel free to comment down.

Cheers!!