Project Abstract Work Product Contributions Future Scope Mentors Contact Me
A journey that will always remain close to my ❤️
-
The goal for the project was to add the capability of audio calls in RocketChat's LiveChat solution using P2P webRTC architecture.
-
Omnichannel is a feature offered by Rocket.Chat that allows companies to handle leads and clients in a multi-channel environment using a single platform. LiveChat is one of those multi-channel environments.
-
Livechat is a modern helpdesk application that helps connect a live-agent with a visitor in real-time using a pop-up widget on the companies’ website without installing anything on their devices.
-
This project will now allow agents to initiate audio/video calls with the visitors to provide better onboarding experience and support.
-
According to The Microsoft 2017 State of Global Customer Service Report, “30% of consumers expressed that not being able to reach a real person when they needed to was the most frustrating part of a poor customer service experience.” This project will help bridge the gap and build a sense of trust with the customers.
The final product / deliverable is integrated with Rocket.Chat core app and LiveChat widget on livechat-calls feature branch 🚀
Rocket.Chat | LiveChat | LiveChat SDK
Click here to watch how an admin can enable call support in livechat.
Click here to watch Jitsi calling in LiveChat.
My Features List:
- Enable WebRTC button and settings to select call provider(WebRTC/Jitsi) to enable call initiation from agent’s side.
- Agent side start call button along with join call and end call action messages.
- Call session storing capability using messages collection.
- 1:1 audio/video call support for LiveChat users using P2P webrtc implementation.
- Switching between avatar screen and video using the camera control button.
- Mic on/off button and End Call button.
- Call expand view button.
- UI Responsiveness to render the meet inside widget and on mobile.
- WebRTC API documentation in developer docs.
- Complete user(admin/agent) flow documentation in user docs.
| Type | Rocket.Chat | Rocket.Chat.Livechat | Rocket.Chat.js.SDK | Developer-Docs |
|---|---|---|---|---|
| Pull Requests | 8 | 2 | 1 | 1 |
| Commits | 7 | 2 | - | - |
E2E Testing Results
-
Browsers: Mozilla Firefox 90.0.2
-
STUN/TURN: Xirsys (free)
-
Networks: Different
-
Distance: ~715Km
-
Call Duration: 24 minutes
-
In Audio Bytes Rx: 14434543
-
In Video Bytes Rx: 363243439
-
Out Video Bytes Tx: 371435664
-
Out Audio Bytes Tx: 14934321
-
Lip Sync: Ok
-
Bugs Found:
- #1 Control buttons hide behind the bottom tab grouping bar in chrome browser on mobile devices.
- #2 In desktop view on chrome and brave, the camera light stays on even when the turn camera button off is toggled. Even when the call ends the red dot in the tab title remains.
- #3 If visitor has video on and agent closes the tab and rejoins or refreshes the screen, then agent won't be able to see the video of visitor and vice-versa. The visitor would have to turn off and then turn on the video for agent to see it.
Other Contributions
- Helped UI/UX team in Discovery Phase - finalizing the designs.
- Documented the implementation approaches here to tackle the project idea.
My Project Board: https://github.com/orgs/RocketChat/projects/37
I'll be resolving the bugs that were encountered during E2E testing and benchmarking(noted on my project board). There is 1 open PR related to documentation that needs to be reviewed and 1 documentation PR is in progress. Finally I'll be coordinating with the team to release this feature as the first version of audio/video calls in the Rocket.Chat's release cycle.
Special thanks to my mentors for guiding me throughout the course of the program so that I was always on track and able deliver the project efficiently in the end.
| Student | Dhruv Jain |
|---|---|
| Organization | Rocket.Chat |
| Project | Introduce audio calls to LiveChat |
| [email protected] | |
| Rocket.Chat | @dhruv.jain |
| GitHub | @dhruvjain99 |
| @dhruvjain99 | |
| @dhruv_jain99 | |
| Medium | @dhruvjain99 |
| HackerOne | @dhruvjain99 |