Integration of ZOOM video conferencing in the Angular-Ionic app

What is angular-ionic?

Angular is a TypeScript-based, open-source JavaScript frontend framework. Google maintains it, and its primary use is to create single-page applications. It allows users to build huge apps in a manageable way. Ionic is used to build hybrid mobile applications for iOS, Windows, and Android.

What is a video conferencing app?

A video conferencing App allows users to connect with video, audio, phone, and chat. When meeting in person is impossible, people can connect and collaborate effectively “face-to-face” using platforms like Zoom.

Advantages of video conferencing app

Video conferencing boosts productivity saves time, reduces travel expenses, and promotes collaboration. From an educational perspective, a key advantage of video conferencing is that it lets students easily collaborate on group work or projects and attend online classes from remote areas.

Supported Platforms

• Android
• iOS

The version of the required modules

• node@14.16.1+
• npm@6.14.12+
• ionic-cli@6.9.0+
• ionic/angular@5.0.0+
• ionic-native/core@5.25.0+
• ionic-native/zoom@5.25.0+

Steps to integrate ZOOM app in Angular-Ionic

• You should have a Zoom Account
• Setup ZOOM SDK (Img 1 and 2 )
• Modules need to install in your project:
  • ionic cordova plugin add cordova. plugin.zoom
  • npm install @ionic-native/zoom

                                                                                                                img 1

                                                                                                               img 2

Code setup

• Import zoom into app.module.ts file, like     
  import { Zoom } from ‘@ionic-native/zoom/ngx’;
  providers: [
  Zoom,
  ]
• Initialize Zoom service in Constructor into app.component.ts with SDK Key and SDK Secret.(img 3)
• In your specific page, add the Zoom Start or Join button. In HTML file-
  <button (click)=”joinMeeting()”>
  Join Meeting
  <button>
  
  And ZOOM login and logout in TS file (img 4 and 5) –
  this.zoomService.login(userName, password).
  then((success:any) => console.log(success)).
  catch((error:any) => console.log(error));
  
  this.zoomService.logout().
  then((success: boolean) => console.log(success)).
  catch((error: any) => console.log(error));
                                                                                                         img 3

                                                                                                                   img 4

                                                                                                                 img 5

Conclusion

A video conferencing app can be used for team meetings, product demos, job interviews, and much more. The primary purpose of it is to help users connect, regardless of where they’re located. The mobility and flexibility offered by video conferencing give people more control over their work days.

Reference Links

• https://ionicframework.com/docs/native/zoom
• https://marketplace.zoom.us/develop/create

Authors