Making a video call app in Ionic version 5 using Twilio Video SDK and Twilio Server less Function Part Two

This is the Second part of Video Call Application Series. If you have not checked the First part first follow the steps to create a Server less Twilio function to get the token we need to connect to Twilio. Now, In this we will setup A Ionic Application to communicate with the API and log user in the rooms to start the Video Call.

So let’s get Started…

One thing I would like to mention before moving further is twilio video supports free connection if their are only two participants inside the room. So we can use it for free.

#1] Create a Blank Ionic Project

Create a project using the command below.

ionic start

Give your project a name and select Angular from the given frameworks list. As we will be using Angular as a framework for Ionic.

#2] Add Twilio Library to the Project

This will install twilio video library so that we can access all the video features inside our app.

sudo npm install twilio-video

#3] Create a Service for Communication with Twilio function to get a token

ionic g service twilio

This we create a service named twilio. and now we can start creating our front end logic.

Inside service we will need our HTTP client module to send requests to our twilio serverless function to get the token for connection.

when we create a room by a name twilio issues a token which is needed for connection to the room.

To use HttpClient module we first need to import HttpClientModule inside the app.module.ts

import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { RouteReuseStrategy } from ‘@angular/router’;

import { IonicModule, IonicRouteStrategy } from ‘@ionic/angular’;

import { AppComponent } from ‘./app.component’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { HttpClientModule } from ‘@angular/common/http’;
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, 
            HttpClientModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

#4] Create a Sign In Form to log the user.

ionic g page auth

Create a page named auth. And adjust the routings inside app-routing.module

Change this

{
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },

to This

{
    path: ”,
    redirectTo: ‘auth’,
    pathMatch: ‘full’
  },

So, that it will open auth page

Now we will add a form to take inputs for username and a room name. Also a Connect button to get connected.

<ion-content>
<ion-grid fixed>
  <ion-row>
    <ion-col size=“12”>
      <ion-input type=“text” placeholder=“Name” [(ngModel)]=“name”> </ion-input>
      <ion-input type=“text” placeholder=“Room Name” [(ngModel)]=“roomName”> 
        </ion-input>
      <ion-button (click)=“onClick()” expand=“block” fill=“clear” shape=“round”>
        Connect to Twilio
      </ion-button>
    </ion-col>
  </ion-row>
</ion-grid>
</ion-content>

Once added Your app will look like this.

onConnect(){
    console.log("Connect");
    let body = {
      identity: this.name,
      room: this.roomName,

    }
    this.http.post("URL-Of-YOUR-TWILIO-FUNCTION", body)
    .subscribe((response) =>{
      console.log(response);

        //Inside this response you will get the token
      
    }, (error) => {
      console.log(error);
      
    })
    
  }

Once you get the token add the following lines below connect function. This code will take the token

and create a room and connect the user to the room. Now if any user enters the room name they will get connected to the room and it will create a div element with id of the user and set the innerText to identity. And when the user lives the room it will automatically remove them and also detach the videofeed.

Video.connect('$TOKEN', { name: 'room-name' }).then(room => {
  console.log('Connected to Room "%s"', room.name);

  room.participants.forEach(participantConnected);
  room.on('participantConnected', participantConnected);

  room.on('participantDisconnected', participantDisconnected);
  room.once('disconnected', error => room.participants.forEach(participantDisconnected));
});

function participantConnected(participant) {
  console.log('Participant "%s" connected', participant.identity);

  const div = document.createElement('div');
  div.id = participant.sid;
  div.innerText = participant.identity;

  participant.on('trackSubscribed', track => trackSubscribed(div, track));
  participant.on('trackUnsubscribed', trackUnsubscribed);

  participant.tracks.forEach(publication => {
    if (publication.isSubscribed) {
      trackSubscribed(div, publication.track);
    }
  });

  document.body.appendChild(div);
}

function participantDisconnected(participant) {
  console.log('Participant "%s" disconnected', participant.identity);
  document.getElementById(participant.sid).remove();
}

function trackSubscribed(div, track) {
  div.appendChild(track.attach());
}

function trackUnsubscribed(track) {
  track.detach().forEach(element => element.remove());
}

I Hope this guide have helped you in exploring this subject. Feel Free to leave a Comment down below, opinions and feedback’s are extremely useful to help everybody to learn better.

In the Next Post I Will guide you through WebRTC. Stay Connected

Making a video call app in Ionic version 5 using Twilio Video SDK and Twilio Serverless Function Part Two

Making a video call app in Ionic version 5 using Twilio Video SDK and Twilio Server less Function Part Two

I Hope this guide have helped you in exploring this subject. Feel Free to leave a Comment down below, opinions and feedback’s are extremely useful to help everybody to learn better.

1 thought on “Making a video call app in Ionic version 5 using Twilio Video SDK and Twilio Serverless Function Part Two”

Leave a Comment Cancel Reply