Project: "Omnichannel: Add screen sharing feature in the Livechat widget"

About Me

Namaste! I am Ashwani Yadav, a pre-final year (was a sophomore when started GSoC) BTech Electrical Engineering student at Indian Institute of Technology Patna (IIT Patna). Feel free to contact me on any of the contact information mentioned above.

Special thanks to my mentor and community:

Implemented a new interface between Rocket.Chat (Backend and Frontend), Omnichannel Livechat widget and Rocket.Chat.js.SDK allowing Agents to get real-time screen-share on customer’s devices.

The main goal achieved in this project is adding the core features in Rocket.Chat, Rocket.Chat.Livechat and Rocket.Chat.js.SDK to support any screen sharing provider. Currently we are using cobrowse.io as provider.

The most challenging part were implementing generic screen-sharing manager in typescript to allow integration of any screen-sharing providers (by using dependency inversion principle) and to benchmark the server performance in updating sessions and rooms and declaritively loading JS scripts on livechat widget. This is being done by using proper implementation of APIs and configurations.

A BRIEF OVERVIEW OF MY WORK

Community Bonding Period

• Explored the different aspects of RocketChat codebase.
• Expanded my knowledge more on Livechat codebase, its APIs and their integration methods, MeteorJS framework, Blaze templating engine, NodeJS functions and mongoDB all of which helped me in achieving my target efficiently.
• Learnt about various features of typescript and data structures in javascript.

Coding Phase 1

• Added various system messages to initiate screen-sharing
• Implemented the generic class for screen-sharing known as ScreenSharingManager which acts as backbone for provider integration by adapting an optimal OOPs design
• Enhanced ScreenSharing Manager Class by using Dependency Inversion principle for provider registration and its functioning and decoupling providers from one another
• Added jwt authentication support for agent using RSA public/private key signing method
• Implemented screen sharing sessions manager which manages the screen-sharing sessions in real-time
• Added ScriptCache class for declaritively loading JS scripts on livechat widget

Coding Phase 2

• Implemented streamers for listening to server updates of screen-sharing sessions
• Added ui-screensharing which uses IFrame for rendering active session
• Added server settings for screen-sharing and provider configurations
• Added shareScreen api and updated config endpoint
• Implemented callbacks
• Improved the UI-UX for agents

Coding Phase 3

• Implemented shareScreen api in Rocket.Chat.js.SDK
• Enhanced the server side performance by adding screenSharing status to room model instead of streamers and removed screen sharing streamers
• Enhanced the session manager by adding server restart funcion to update livechat room documents
• Added badge for sessions info and implemented getCustomBadges function for roomTypes

Link to pull requests highlighting my work in different repositories as part of GSoC20 @RocketChat

1. Rocket.Chat

2. Rocket.Chat.Livechat

3. Rocket.Chat.JS.SDK

My overall contribution in Rocket.Chat organization pre, peri and post GSoC20

Further steps:

1. Minor UI changes in accordance with Design team suggestions
2. Any improvements suggested by my mentor

Thank you Rocket.Chat for an amazing summer of code!