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

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’;
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
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-grid fixed>
<ion-col size=“12”>
<ion-input type=“text” placeholder=“Name” [(ngModel)]=“name”> </ion-input>
<ion-input type=“text” placeholder=“Room Name” [(ngModel)]=“roomName”>
<ion-button (click)=“onClick()” expand=“block” fill=“clear” shape=“round”>
Connect to Twilio
Once added Your app will look like this.
let body = {
room: this.roomName,

.subscribe((response) =>{

        //Inside this response you will get the token
}, (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.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'); = 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);


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

function trackSubscribed(div, track) {

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

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

Your email address will not be published. Required fields are marked *

Scroll to Top