Plug Online

Walkie-Talkie

INTERNSHIP REPORT ON

Training Program

at

Plug

Submitted by

Vipin Bohra

19CS8100

Under the Supervision of

Dr. Tandra pal

Professor

COMPUTER SCIENCE AND ENGINEERING

National Institute of Technology Durgapur

West Bengal – 713209

India
 April 2023

Department of Computer Science and Engineering

NATIONAL INSTITUTE OF TECHNOLOGY

DURGAPUR
Mahatma Gandhi Avenue, Durgapur-713209

West Bengal

India

BONA-FIDE CERTIFICATE
It is certified that the work contained in the Project entitled "Plug App online walkie talkie" has
been carried out by “Vipin Bohra (Roll No. 19CS8100)” under the supervision of Mr. Manish
Singh Bisht, the data reported here in is original and that this work has not been submitted
elsewhere for any other Degree or Diploma.

Vipin Bohra
Date: 30/04/2023
This is to certify that the above declaration is true.

Manish Singh Bisht

Chief Technology Officer
Plug
 Date: 30/04/2023

Introduction
Abstract
 Contents

Title Page i

Bona-fide certificate ii

Introduction iii

Abstract iv

Table of Contents v

Chapter 1 Learning Summary

Chapter 1

Week - 1 Learning Summary

1.1 Advance JavaScript

1.1.1 Asynchronous JavaScript:

Asynchronous JavaScript is a programming paradigm in which code can be executed

independently from the main program flow. In other words, it allows you to execute multiple
tasks simultaneously without blocking the execution of other tasks.

In JavaScript, asynchronous programming is commonly achieved through the use of callbacks,

promises, and async/await functions.

Callbacks are functions that are passed as arguments to other functions and are executed when a
certain task is completed. Callbacks are commonly used for asynchronous tasks such as reading
data from a file, making an HTTP request, or executing a database query.

Promises are objects that represent the eventual completion or failure of an asynchronous
operation and allow you to handle the result or error of that operation asynchronously. Promises
are commonly used for tasks that return a single value such as making an HTTP request or
executing a database query.
Async/await is a newer syntax that simplifies asynchronous programming by allowing you to
write asynchronous code that looks and behaves like synchronous code. Async/await uses
promises under the hood and allows you to write asynchronous code that is easier to read and
maintain.

In JavaScript, it's important to use asynchronous programming techniques to prevent blocking

the main program flow and improve the performance and responsiveness of your applications.

1.1.2 Modules in JavaScript

Modules in JavaScript are a way to organize code into separate files, making it easier to manage
and reuse code across multiple files and applications. Modules allow you to encapsulate code
into logical units and expose only the necessary parts of that code to other modules.

In JavaScript, modules can be created using the CommonJS module system or the ECMAScript
module system.

The CommonJS module system is used in Node.js and allows you to use the module.exports
object to export a module's functionality. You can then use the require () function to import that
functionality into other modules.

The ECMAScript module system is used in modern browsers and allows you to use the export
keyword to export a module's functionality and the import keyword to import that functionality
into other modules
1.2 React
React is a popular JavaScript library for building user interfaces. It was developed by Facebook
and is now maintained by a large community of developers.

React allows you to build reusable UI components that can be composed together to create
complex and dynamic user interfaces. React uses a declarative programming model, which
means that you describe what you want your UI to look like and react takes care of the
underlying logic to make it happen.

React uses a virtual DOM (Document Object Model) to efficiently update the user interface.
When data changes, react calculates the minimal number of changes needed to update the virtual
DOM and then updates the real DOM accordingly. This makes React highly performant and
efficient. React can be used to build web applications, mobile applications, and even desktop
applications using tools like Electron.

React is often used in conjunction with other technologies like React Router for client-side
routing, Redux for state management, and Axios for making HTTP requests. React also has a
large ecosystem of third-party libraries and plugins that can help you accomplish almost any
task.

Overall, react is a powerful and flexible library for building user interfaces and has become a popular choice
for front-end developers due to its performance, scalability, and ease of use.

1.2.1 React JSX, React Component, State and Props:

i) JSX is a syntax extension for JavaScript that allows you to write HTML-like syntax in your
JavaScript code. JSX is used extensively in React to define UI components in a more intuitive
and readable way. JSX is not valid JavaScript, so it needs to be transpiled into regular JavaScript
using a tool like Babel before it can be executed in a browser or Node.js environment.
ii) A React component is a self-contained piece of code that represents a reusable piece of UI. A
component can be as simple as a button or as complex as an entire application. Components can
be thought of as building blocks for your UI and can be composed together to create more
complex user interfaces. Components in React can be either functional or class-based, but both
types can be used to create reusable UI elements.

iii) State and props are two important concepts in React components. State is used to manage the
internal state of a component, such as data that changes over time or user input. State can only be
modified using the setState() method and is private to the component. Props, on the other hand,
are used to pass data from a parent component to a child component. Props are read-only and
cannot be modified by the child component.

1.2.2 conditional rendering, react map, react router.

i)

1.2.3 React hooks

React hooks are a feature introduced in React 16.8 that allow developers to use state and other
React features in functional components. Prior to hooks, state and lifecycle methods were only
available in class components.

There are several built-in hooks provided by React, such as:

i) The useState hook is used to manage states within a functional component. It takes an
initial state value and returns an array with two elements: the current state value and a
function to update the state value.
ii) The useEffect hook allows developers to perform side effects, such as fetching data from
an API or updating the DOM, in response to changes in the component's state or props.
 iii) The useContext hook enables developers to share state between components without
passing props down through multiple levels of the component tree.
iv) The useRef hook allows developers to create a mutable reference to an element or value
that persists between re-renders of the component.

1.2.4 how react works Virtual Dom behind the scenes and component lifecycle.

1.2.5 controlled and uncontrolled component, react Events and react context.

Chapter 2

Week-2 Creating React Pages.

Using the past learning, I was expected to complete different pages using react. Discription of
the pages is given below.

2.1 Login Page: created Button Component and login Component. The design is shown in fig.1.

2.2 Home Page: created different components like nav bar, group, user List, user status etc. The design
is shown in fig.2.

2.3 new group: this component is used to make new group. The design is shown in fig.3.

2.4 Chat Box: this component is used for showing previous chats and sending new messages. The design
is shown in fig.4.

Fig.1. Login Page

 Fig.2. Home Page.

Fig.3. Create new Group component

 Fig.4. chat box component.

Chapter 3

Week –3 Learning Summary (firebase).

Firebase is a backend cloud computing service and application development platform provided
by Google

3.1 firebase authentication.

Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI
libraries to authenticate users to your app. It supports authentication using passwords, phone
numbers, providers like Google, Facebook and Twitter, and more.

Firebase also provided a method to authenticate using firebase custom token provided by the
firebase admin server.]

Firebase also provides onAuthStateChanged listener to listen for any new user login or logout.

For logout we can call the sign-out function that will logout the user.

3.2 firebase Realtime database

The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON and
synchronized in Realtime to every connected client. When you build cross-platform apps with
our Apple platforms, Android, and JavaScript SDKs, all your clients share one Realtime
Database instance and automatically receive updates with the newest data.

This database also provides security rules to determine who has read and written access to your
database, how your data is structured, and what indexes exist.

Firebase Realtime database provided get, set methods to fetch and add data on database and
onValue listener to listen the Realtime change on the database.
3.3 firebase storage.
Cloud Storage for Firebase provides a way to upload and share user generated content, such as
images and video, which allows us to build rich media content into our apps. Data is stored in a
Google Cloud Storage bucket — an exabyte scale object storage solution with high availability
and global redundancy. Cloud Storage for Firebase lets us securely upload these files directly
from mobile devices and web browsers, handling spotty networks with ease.

3.4 My Learning.
i) For app or webapp development that requires the login of user, for this feature firebase
authentication becomes a good choice because it can be used across all platforms may be the
apple, android or browser.

ii) firebase also provides other services like Realtime storage in database and storing the media
content such as images, audio and video etc. Hence using firebase cloud services makes sense for
faster development and cross platform apps.
Chapter 4

Week-4 Implementing firebase login

We have used different providers for sign in using firebase authentication. Fig.5. shows two
provider method.

4.1 firebase login with google provider:

In our webapp we have used sign in with google provider, user having google account in the
system will be able to choose any account to sign in to our plugApp. Google provider UI pop up
is show in Fig.6.

4.2 firebase login with Microsoft provider:

In our app we have also been given the privilege to login with a Microsoft account using
Microsoft provider. Microsoft provider UI pop up is shown in Fig.7.

4.3 firebase login with phone login.

I have also added phone login feature and OTP verification using the phone login service
provided by the firebase authentication.

Fig.5. login methods.

Fig.6. google login pop up fig.7. Microsoft login pop up
 Fig.8 Phone login fig.9 OTP verification.

Chapter 5

Week – 5 Learning summary and

implementation.

5.1 socket-client.io

5.1.1 Introduction
Socket.IO is a popular JavaScript library that enables real-time, bidirectional and event-based
communication between the browser and the server. It's commonly used in web applications that
require real-time updates, such as chat applications, online games, and collaboration tools.
The "socket.io-client" library provides a client-side API for connecting to a Socket.IO server
from a web browser or a mobile app. It enables real-time data exchange, such as chat messages,
notifications, and updates, between the client and server.

Here is the explanation how it works:

i) Client connects to the server: When a client wants to connect to the server, it sends a
WebSocket handshake request. If WebSocket is not available, it can use other fallback
options such as long-polling, which means it sends a request to the server and waits for
the server to respond before sending the next request.
ii) Server and client establish a connection: Once the handshake is successful, a connection
between the client and the server is established. The connection remains open until it is
closed by either the client or the server.
iii) Events are exchanged: With the connection established, the client and server can now
exchange events. An event is a message sent by either the client or server that contains a
payload of data. When an event is received, the recipient can choose to respond with
another event.
iv) Rooms and namespaces: Socket.IO allow clients to join rooms or namespaces, which can
be used to group clients together and send targeted events to specific clients or groups of
clients.
v) Disconnection handling: Socket.IO can detect when a client has disconnected from the
server, whether it was intentional or due to network issues. The server can then choose to
notify other clients in the same room or namespace about the disconnection.

5.1.2 Events
In Socket.IO, events are messages that are exchanged between the server and the client. Events
are a way of passing data between the two, and they can be used to trigger actions on either the
server or the client.

Socket.IO provides a simple API for creating and handling events. The API includes two
methods: emit () and on (). The emit () method is used to send an event from the client to the
server, while the on () method is used to listen for events on the server or the client.

Socket.IO also provides a few built-in events, such as 'connect', 'disconnect', and 'error', which
can be used to handle connections, disconnections, and errors.

5.1.3 My learning
i) We use socket.io for full-duplex communication and it also reliable because of http long-
pooling while fallback
 ii) The WebSocket protocol enables interaction between a web browser (or other client
application) and a web server with lower overhead than half-duplex alternatives such as
HTTP polling, facilitating real-time data transfer from and to the server.
iii) Since socket.io is based on event-based communication. So, client or server can emit any
event and adding the on listener for that event on other side will listen to that event and
get the payload sent with that event. This approach will work best for real-time
communication like sending messages to all the connected users in a socket room.
Broadcasting the message on groups chat room.
iv) Some custom events are also present that will emit after certain thing happened in socket
connection like connect event will be emit when client and server both will be connected
successfully through web socket.

5.2 Connecting Plugapp with server using WebSocket

5.2.1 connect client to server
Socket io () method is used to connect to server socket. io method takes argument such as what
transport is needed and if auto connect is true or not.

While connecting to server socket we are also sending user token which we get after firebase
authentication. For checking if a valid user who already has account is connecting to socket or
using our backend API.

5.2.2 listen connect, disconnect, connect_error event.

i) Connect event tells that socket connection is successfully established,
ii) After listening to this event, we are ready to emit or listen to any event coming from
server.
iii) A disconnect event will be called when a connection is lost between client and server and
the first parameter will give the reason for the lost connection. The reason can be network
connection loss server down etc.
iv) Connect_error event will be called if the first connection call io () method is unsuccessful
meaning no connection is established.

5.2.3 subscribing to user, groups and signal.

After connecting to server socket, client subscribe for groups meaning subscribe event is called
with a payload type “groups” and the response of this event will give the list of groups where
the user is a member. And we can also make requests for new group through emitting
“makeRequest” event and sending group details as payload.

Same way we subscribe for type “user” for getting all user list with their online status. And
sending the “makeRequest” for set user online or set user offline. We can also listen to new
online or offline users.

Subscribing to signals will let us get to all groups where line is on (someone is talking in that
group) and signal busy for the user mean who is busy on other call. We are also listening to
“lineOn”, “lineOff” and “busy_signal” to get to know who is talking in which group.

5.2.4 Reauthenticating after token expires.

Firebase token, which is used to authorize the user in backend, for using our API expires after
one hour of its creation. So, we need to send a new token after every one hour if user is logged in
for more than one hour. Hence reauthenticating with new socket connection is necessary after
token get expires. If not done the socket will fail to authorize and this will cause connection
error.

Chapter 6

Week-6 Redux and Redux thunk.

6.1 Redux
6.1.1 Introduction
Redux is a predictable state container for JavaScript applications. It is commonly used with
libraries like React for building user interfaces. Redux provides a centralized store that holds the
state of an application and provides a predictable way to update that state.
In a Redux application, the state is stored as a single object tree inside a Redux store. The only
way to modify the state is by dispatching an action, which is a plain JavaScript object that
describes the change that needs to be made to the state. Reducers are functions that take the
current state and an action, and return a new state based on the action.

One of the main benefits of using Redux is that it helps manage the complexity of state in large
applications. By keeping the state in a centralized location and enforcing a strict unidirectional
data flow, Redux makes it easier to reason about an application's behavior and debug issues.
Additionally, Redux allows for easy integration with other tools like middleware and time-travel
debugging.

6.1.2 Store, Action and Reducer

In Redux, the three core concepts are store, actions, and reducers.

i) Store: The store is a JavaScript object that holds the state of an application. It is the single
source of truth for the entire application's state. The store is created by passing a reducer
function to the Redux createStore function. The store has three important methods:
getState, dispatch, and subscribe.
ii) Actions: Actions are plain JavaScript objects that describe a change to the state. An
action must have a type property, which is a string that describes the type of the action.
Other properties of the action can contain additional data needed to update the state.
Actions are typically created by action creator functions, which are functions that return
an action object. Once an action is created, it is dispatched to the store using the store's
dispatch method.
iii) Reducers: Reducers are pure functions that take the current state and an action and return
a new state. A reducer must always return a new state object and must not modify the
current state directly. Reducers are passed as the first argument to the createStore
function and are called automatically by the store whenever an action is dispatched.
Reducers are responsible for updating the state in response to actions and should be
written to be as pure as possible.

6.1.3 My learning
(i) Concepts of Redux: The core concepts of Redux are store, actions, and reducers. The
store is a JavaScript object that holds the state of an application, and the only way to
modify the state is by dispatching an action. Actions are plain JavaScript objects that
describe a change to the state, and reducers are pure functions that take the current state
and an action and return a new state.
(ii) Implementing Redux: To implement Redux in a JavaScript application, I needed to
follow a few steps. First, I created a store by passing a reducer function to the Redux
createStore function. Then, I defined actions and action creators, which are functions that
 return action objects. Finally, I defined reducers that specify how the state should change
in response to actions.
(iii) Benefits of using Redux: The benefits of using Redux include better code organization,
easier debugging, and a more predictable data flow. With Redux, I can more easily
reason about my application's behavior and debug issues. Additionally, Redux allows for
easy integration with other tools like middleware and time-travel debugging.
(iv) Common Redux tools: There are many tools available that work well with Redux.
Middleware can be used to modify the behavior of dispatching actions, while the Redux
DevTools allow for time-travel debugging and state visualization. These tools can help
me better understand how my application is behaving and make it easier to identify and
resolve issues.

6.2 Redux Thunk

6.2.1 Introduction
Redux Thunk is a middleware for Redux that allows you to write action creators that return a
function instead of an action object. This function can perform asynchronous operations such as
making an API call, and then dispatches one or more regular synchronous actions to update the
store based on the result of the asynchronous operation.

The key benefit of using Redux Thunk is that it allows you to write action creators that have
more complex behavior, such as making an API call and then dispatching an action to update the
store with the result of the call. Without Redux Thunk, action creators can only return a plain
object, which limits their usefulness for more complex scenarios.

Redux Thunk works by intercepting actions that are dispatched to the store. If an action creator
returns a function instead of an object, Redux Thunk will call that function with dispatch and
getState arguments, which can be used to dispatch actions and access the current state of the
store. The function can then perform asynchronous operations and dispatch regular synchronous
actions to update the store.

Overall, Redux Thunk is a powerful tool that can make it easier to handle asynchronous
operations in your Redux application. By allowing you to write action creators that return
functions, you can more easily manage complex state updates based on the results of
asynchronous operations.

6.2.2 my learning
i) Concepts of Redux Thunk: The key concept of Redux Thunk is the ability to write
action creators that return functions instead of plain objects. These functions are called
 thunks and can perform any kind of asynchronous operation. Thunks are typically used to
fetch data from an API or perform other side effects that can't be done synchronously.
Once the asynchronous operation is complete, the thunk can dispatch regular
synchronous actions to update the store.
ii) Using Redux Thunk: To use Redux Thunk in a JavaScript application, I needed to
install the redux-thunk package and add it to my Redux middleware stack. Once
installed, I could write action creators that return functions instead of plain objects. These
functions can use the dispatch and getState functions that are passed as arguments to
perform asynchronous operations and dispatch regular synchronous actions.
iii) Benefits of using Redux Thunk: The benefits of using Redux Thunk include the ability
to handle asynchronous operations more easily, improved code organization, and a more
predictable data flow. With Redux Thunk, I can write action creators that perform
complex asynchronous operations without making my code harder to reason about.
Additionally, Redux Thunk integrates well with other Redux tools and best practices,
such as using Redux Toolkit to further simplify state management.

Chapter 7

Week-7 Implementing State management

7.1 Normalization
Normalization is the process of restructuring your Redux store to optimize performance and
simplify state management. Normalization involves breaking down complex nested data
structures into simpler and more manageable pieces. This is important because large, nested state
structures can be difficult to work with and update efficiently. Normalizing data can make it
easier to perform efficient updates to the store and avoid unnecessary re-renders of components.

So based on the different components need different state to be re-render on state change we
have normalized our data structure as much as possible to remove unnecessary re-render.
Ex: - while subscribing to the user we will get the list of users who the member of my
organization with their online statue and total online time. Hence the online status and online
time are needed in different components. So, storing online status and online time in one data
structure here (map) makes no sense because it can cause unnecessary re-rendering. Hence, we
have normalized our data and stored online status and online time in different data structure

7.2 Performance (re-rendering only necessary component)

Performance in Redux refers to the efficiency of your application's state management. In Redux,
updates to the store are triggered by actions, which can cause a re-render of components that
depend on the changed state. To improve performance, it's important to minimize unnecessary
re-renders by ensuring that only the affected components update when state changes occur. One
way to achieve this is by using memoization techniques such as React.memo to prevent
unnecessary re-renders of components.

To connect component with the state we should not add the whole map data structure for every
component. We should connect component with only that key which is responsible for re-
rendering.

Ex: - user online status is a map data structure in the store, where key is the uid from firebase
now that map I am using in group component to show the green dot highlighting user is online.

So, if any user comes online, only the necessary group should re-render not all. Because in our
app we can have more than 1000 plus group list and re-rendering 1000 plus list is performance
inefficient job. Hence while connecting group component to state, we are using the key (uid) of
the user to subscribe for only the change of that state value in userOnlineStatus Map.

7.3 dispatching the action.

We are using redux thunk middleware for dispatching the action. Using redux thunk helps us in
writing the asynchronous logic after some event occurred and then dispatching the right data.

When user visits the webapp at first, we connect the socket with the server and after the
successful connection we subscribe to groups that will provide the list of groups that user have,
after getting the list of groups we can dispatch the total groups.

When subscribing to the user, we get user online status and after the necessary modification done
to create map data structure, we can dispatch the userOnlineStatus map.
When any user comes online, we read that in user_online event from web socket and based on
the payload (user details) we dispatch the action and reducer will take care of changing the state.

7.4 Handling flow

We get the data from the server after a certain event is triggered like
user_online, signal_busy, signal_lineOn, user_offline etc.
We dispatch the necessary action with the modified payload.
Modification of data is done based on the logic we have written in
reducer to update the store or state of application.
After dispatching action certain state in object tree gets change only
those components who have subscribed to that changed stated will get
re-render and work according to the new state.
This is the basic flow of our state management tool in our webapp.

Chapter 8

Week-8 Webrtc and Janus.js

8.1 Webrtc
8.1.1 Introduction
WebRTC (Web Real-Time Communication) is an open-source technology that enables real-time
communication between browsers and mobile applications using a peer-to-peer (P2P) approach.
It provides APIs and protocols that allow web developers to add real-time communication
capabilities to their applications, without requiring any additional plugins or software.
WebRTC was developed by Google in 2011 and is now supported by major web browsers such
as Chrome, Firefox, Safari, and Edge. It has quickly become a popular technology for building
real-time communication applications, such as video and audio chat, file sharing, and screen
sharing.
WebRTC works by using a combination of JavaScript APIs, signaling protocols, and media
codecs to establish a P2P connection between browsers. Once a connection is established, the
browsers can exchange audio, video, and data directly, without the need for a server to mediate
the communication.
Some of the key features of WebRTC include:
i) Support for real-time audio and video communication
ii) Low latency and high-quality audio and video transmission
iii) Secure peer-to-peer communication using encryption
iv) Support for NAT and firewall traversal to enable communication between devices behind
different network configurations
v) Easy integration with existing web technologies and frameworks

8.1.2 My learning

During my exploration of WebRTC, I discovered that it is a powerful and flexible technology that
enables real-time communication between browsers and mobile applications. It provides a way
for developers to add audio, video, and data sharing capabilities to their applications, without
requiring any additional software or plugins.

Some of the key concepts I learned about WebRTC include:

i) Peer-to-peer (P2P) communication: WebRTC uses a P2P approach to enable direct
communication between browsers, without requiring a server to mediate the connection.
This makes it possible to establish low-latency, high-quality audio and video calls
between devices.
ii) Signaling: To establish a WebRTC connection, browsers need to exchange signaling
messages to negotiate the connection. This involves exchanging metadata such as the
user's session ID, IP address, and media capabilities.
iii) Media codecs: WebRTC supports a range of audio and video codecs to enable efficient
transmission of media over the internet. Some of the supported codecs include Opus,
VP8, and H.264.
iv) NAT and firewall traversal: WebRTC includes techniques to enable communication
between devices that may be behind different network configurations, such as NAT and
 firewalls. This involves using techniques such as STUN, TURN, and ICE to establish the
connection.

8.2 Janus.js
8.2.1 Introduction
Janus.js is a JavaScript library for building WebRTC-based real-time communication
applications. It provides a flexible and modular framework for developing applications that use
WebRTC, including video conferencing, streaming, and recording.
Janus.js is built on top of the Janus WebRTC server, which is a general purpose WebRTC server
that provides a range of capabilities for managing WebRTC sessions and interactions. The
Janus.js library provides an easy-to-use interface for interacting with the Janus server, making it
easy to build complex real-time communication applications in the browser.
Some of the key features of Janus.js include:
i) Modular design: Janus.js is built with a modular architecture that makes it easy to add
and remove functionality as needed. This allows developers to build applications that are
tailored to their specific requirements, without having to include unnecessary features or
components.
ii) Easy integration: Janus.js can be easily integrated with other web technologies and
frameworks, such as React, Angular, and Vue. This makes it easy to build real-time
communication applications that are fully integrated with other parts of a web
application.
iii) Customizable user interface: Janus.js provides a set of customizable user interface
components, such as buttons, dialogs, and forms, that can be used to build rich and
engaging user interfaces for real-time communication applications.
iv) Scalability: Janus.js is designed to be scalable, allowing it to handle large numbers of
WebRTC sessions and interactions. It includes features such as load balancing and
clustering to ensure that applications can handle high levels of traffic and usage.

8.2.2 AudioBridge plugin

Janus Audiobridge is a plugin for the Janus WebRTC server that enables audio conferencing
capabilities. It allows multiple participants to join a conference call and communicate with each
other using audio only.
The Janus Audiobridge plugin provides a range of features for managing audio conferences,
including:
 i) Support for multiple participants: The Audiobridge plugin allows multiple participants
to join a conference call and communicate with each other using audio. Participants can
join the conference by entering a specific room or by using a unique conference ID.
ii) Dynamic bitrate adjustment: The Audiobridge plugin can dynamically adjust the
bitrate of audio streams based on the available network bandwidth, ensuring that the
audio quality remains high even in low-bandwidth environments.
iii) Advanced echo cancellation: The Audiobridge plugin includes advanced echo
cancellation capabilities to ensure that participants do not experience any feedback or
echo during the conference call.
iv) Flexible configuration options: The Audiobridge plugin includes a range of
configuration options that allow developers to customize the behavior of the plugin to
suit their specific requirements. This includes options for managing bandwidth, audio
quality, and participant permissions.

Chapter 9

Week-9 Implementing Audio Call using

Janus.js

9.1 connecting to Janus and attaching the plugin.

i) First, we connect to Janus server by creating the new instance of Janus class
 ii) On successful connection we attach the audioBridge plugin
iii) After attaching the plugin, we have added the different parameters like variable and on
Callbacks.
iv) Using the plugin, we can request server for “create”, “join_room”, “edit”, “exists”,
“mute”, “unmute” etc.
v) With the help of plugin, we have added different functionality like joining room, leave
room, mute audio, unmute audio.
vi) We provide the custom media stream to the Janus server for connection, so that we have
access to mute or unmute track directly.
vii) In home page there is list of groups, and the active number of groups will be shown at the
top with the green border. Clicking on the Call or line on button of group will make the
user active to join the Janus room for the webrtc communication using audio call
viii) Fig shows the home page with active group (group where already someone is talking)
ix) We have also provided the group status like total online member, total member, total
member talking.
x) Fig shows the audio calling component and number of participants in the room
xi) All the users with green ring border are active in groups for audio call and sharing voice
message.
xii) While talking in a groupuser can also send the message as shown in fig.
xiii) When user click on lineoff then user change its state from send to receive only
mediaState. It is done using the Janus audiobridge plugin

Fig. Line on Component (when user starts calling)

 Fig list of groups in home page (green color group at top shows someone is talking or lineon in the
group)

9.2 Handling the edge cases

In our webapp we have the business logic as follow:

i) When someone lineOn in the group it broadcasts its line_on status to all the group
members who are online. Upon receiving the line_on event they will join the Janus
room if not already joined.
ii) After joining room, they will all be ready to listen to the voice media from another users.
iii) It is possible to listen to the voice media from two different groups simultaneously.
iv) But it is not talk to the two groups at the same time.
v) After getting all the line_on signal from different groups the user can click and decide
where he/she wants to talk. Upon clicking on the talk/call button we will mute all voices
from the other groups and will allow the user to talk or listen to choose room/group.
vi) And after lineOff the group we will unmute all the already active group again to listen
the audio from all the active groups.
vii) These are some edge cases that I have handled and were the deciding factor of our
business logic.
Chapter 10

Week-10 implementing send message

feature

At this point I was instructed to implement a message feature to send text messages, recorded
voice notes and file transfer.

10.1 group_message event in backend.

First, I have added the group_message event in backend to listen the new message from the
client with the payload (details about the message). In the payload necessary information like
groupid, message type, actual information is shared.
After listening to the group_message the backend saves the data in firebase Realtime database.

And it broadcasts the message to all the online users in the group with given groupid in payload.

10.2 types of messages.

10.2.1 text message:

i) User can send the text message to the other users, here in this case the type in the
payload is “type: text”
ii) Fig shows the text message sent in the group.

10.2.2 voice note:

i) Users can send the voice recording in the group same as what we can do in WhatsApp,
here the type of message in the payload in “mediaURL” which stored the URL to the
media which is saved in firebase storage.
ii) Fig shows the voice recording sent in the group.

10.2.3 file transfer

i) Users can send files like (.pdf, .doc, .zip, .png, .jpg etc.), here the type of the message
will be just “url” and this will have the value to the url to the firebase storage which
saves the sent file in the storage.
ii) Fig shows the file transferred in the group.

10.3 storing message.

i) We are storing the payload given in the group_message event in the firebase Realtime
database at a location referring to the groupid.
ii) Storing of message payload is done at backend.

10.4 storing files.

i) Before emitting group_message event with the payload, we save the voice note and file to
the firebase storage if user sent voice recording or file.
ii) After saving the file successfully in firebase storage the url (referring to the location in
storage) is sent with the payload. MediaURL for the voice note and just url for the file.
iii) Another user can download the file and see the preview modal of the file and can listen
to the voice recording.

10.5 text with media

There is another functionality that the user can send the text with the media file.

Fig text message.

Fig voice recording.

Fig file transfer

Fig pdf send in the group and is clickable to download.