In the dynamic realm of customer service, where every interaction is a moment of truth, innovation becomes the importance for transformative customer experiences. One such innovation that has stood the test of time is WebRTC (Web Real-Time Communication), a technology designed to enable real-time communication directly within web browsers. While WebRTC has been around for some time, its potential has often been underutilized in the contact center landscape.
Sensiple believes in pushing the limits of what is possible. We realized the power of WebRTC early on, but instead of resting on this well-established technology’s honor, we set out to reshape the landscape of contact center services. In our pursuit of excellence, we smoothly combined the time-tested Round Robin algorithm with the cutting-edge capabilities of WebRTC, resulting in a synergy that exceeds expectations.
So, what sets us apart? It’s not just about adopting features; it’s about crafting a unique blend that addresses the specific needs of modern contact centers. Our approach combines the efficiency of Round Robin with innovative features designed to revolutionize the very core of Cloud Contact Center services.
In this blog, you will explore the fascinating world of WebRTC development, delving into its dynamic features such as screen recording, voice and video calls, chat functionality, and seamless screen sharing. The intricate dance of these elements is orchestrated with precision, utilizing the round-robin algorithm and the prowess of socket.io for a connection that’s as smooth as it is sophisticated. Step into the realm where real-time communication meets cutting-edge technology.
The Purpose of WebRTC in Contact Centers:
Our WebRTC-based system, coupled with the round-robin algorithm, ensures fair and efficient call distribution among agents. This streamlined approach optimizes resource use, minimizes idle time, and enhances call-handling efficiency, ultimately improving customer service experiences.
Understanding WebRTC:
WebRTC integrates video and voice calls directly into web browsers, ensuring a user-friendly experience without the need for extra software. Its robust security features, including encrypted communication channels, guarantee the confidentiality of sensitive information. Additionally, WebRTC excels in delivering high-quality audio and video, providing crystal clear, uninterrupted conversations between agents and customers.
WebRTC Components:
At the core of WebRTC lies three essential components, each playing a pivotal role in enabling real-time communication.
- getUserMedia:
Grants access to user media devices, foundational for capturing audio and video streams in real-time communication. - RTCPeerConnection:
Establishes direct peer-to-peer connections between browsers, facilitating audio and video data exchange without intermediaries. - RTCDataChannel:
Enables bidirectional data transfer between connected peers, serving various needs like game data sync, file sharing, or text messaging in real-time communication.
WebRTC with STUN/TURN Server Configuration
WebRTC relies on STUN and TURN servers for optimal functionality. STUN identifies public IP addresses, enabling direct peer-to-peer connections, while TURN serves as a backup for restrictive networks. Configuring these servers involves specifying addresses and credentials, balancing accessibility, and control for reliable real-time communication.
Socket.IO – Facilitating Real-Time Communications
Socket.IO, a JavaScript library, facilitates real-time bidirectional communication between web servers and clients. Using WebSocket as its primary protocol, it ensures efficient full-duplex communication, with fallback options for compatibility with older browsers. This communication model simplifies data exchange, easing the implementation of custom actions and real-time features.
MongoDB – Central to Data Management
MongoDB plays a central role in storing crucial call information, agent status, and call queue data. Its scalability and high availability features make it ideal for handling large call volumes, ensuring a reliable and responsive communication platform with real-time updates. MongoDB’s visualization capabilities contribute to creating an intuitive dashboard for effective data management.
Components and Modules in WebRTC
Breaking down the high-level architecture reveals various components and modules, each fulfilling distinct responsibilities.
- WebRTC Component: Responsible for handling WebRTC connections, enabling real-time audio and video communication between callers and agents.
- Socket.IO Component: Manages Socket connections, facilitates real-time signaling between clients and the server and updates clients on agent availability and caller queue status.
- Round Robin Algorithm Module: Implements the round-robin algorithm logic, ensuring fair distribution of incoming calls among available agents.
- Agent Management Module: Interacts with the MongoDB database to store and retrieve agent information, including status and availability.
- Call Queue Module: Manages the queue of incoming calls, ensuring efficient call distribution based on the round-robin algorithm.
- Dashboard Module: Handles the creation and updating of the dashboard page, retrieving real-time data from the server, and displaying caller queue lists, agent availability, and average wait time.
High-Level Architecture:
The system’s core architecture delineates the overall structure and interactions between major components, typically comprising the following main components:
- Client-Side: Customer interactions are managed in the web browser, handling WebRTC connections via Socket for signaling. The list of features includes audio/video mute/unmute, screen share, and video recording.
- Server-Side: Built on Node.js and Express, managing Socket connections, signaling, and core functions of the Automated Caller Distribution System. Dependencies include Socket.io for real-time communication and MongoDB for database interaction.
- MongoDB Database: MongoDB serves as the storage system for critical data including agent info and caller data.
- Dashboard Page: The dashboard page serves as a monitoring tool for real-time data like caller queues and agent availability through a dashboard, interacting with the server via REST API calls.
Peer-to-Peer: Post Agent Connection
WebRTC enables direct communication between web browsers, fostering real-time video calls, voice chats, and data exchanges without a central server. Its decentralized approach promotes seamless collaboration, making it ideal for applications like video conferencing. With plugin-free, cross-platform compatibility, WebRTC ensures smooth and secure communication, revolutionizing online interactions.
Automated Caller Distribution System Overview:
The Automated Caller Distribution System enhances customer support by utilizing WebRTC for real-time audio and video communication, bypassing traditional phone lines. The round-robin algorithm evenly distributes calls among agents, preventing agent overload. Socket.IO facilitates real-time signaling for prompt updates on agent availability. MongoDB stores agent information and call data, ensuring flexibility and scalability for real-time data management.
Designing the Round Robin Algorithm:
- Agent Queue: Stores information on available agents, adding them to the end of the queue as they become ready.
- Incoming Call Queue: Set up a separate queue to hold incoming call requests, with call requests joining the queue when initiated by a caller.
Logic of Round Robin Algorithm:
- Call Distribution Logic: When an incoming call requires allocation to an agent, the algorithm logic will be Dequeue the first available agent and incoming call, then establish a connection using WebRTC for real-time communication.
- Agent Requeue Logic: After the agent finish handling a call or becomes ready, agents will re-enter the queue for the next call, ensuring fair distribution.
- Agent Availability Tracking: Accurate records of agent availability are maintained. Unavailable agents are temporarily removed and reinserted upon availability.
Ensuring Equal Call Distribution:
The Round Robin algorithm ensures equal call distribution among available agents by cyclically rotating through the agent queue and connecting them to incoming calls. Here’s a quick overview:
- Agent Queue Initialization: Set up a queue with available agent information when agents become available for a call.
- Incoming Call Queue: Maintain a queue for incoming calls, maintaining the order of arrival and forming a waiting list for call distribution.
- Call Distribution Cycle: Dequeue agent and incoming call, connect them and repeat the process, ensuring fair rotation.
- Agent Requeuing: After handling a call, reinsert the agent at the end of the queue to maintain fairness with each agent receiving their turn to handle calls.
- Equal Call Distribution: As the Round Robin algorithm continues to dequeue agent and the incoming calls, calls are evenly distributed over time, giving each agent an equal chance.
- Handling Call Queue Overflow: If calls exceed agents, continue allocating the calls based on availability with excess calls in the queue.
- Handling Agent Queue Underflow: If there are more calls than agents, distribute calls based on availability, preventing stalling.
Application Screenshots:
1. Enter the agent id to log in onto the web page.
2. Enter the username to connect with an Agent.
3. After connecting with the Agent, the user will have to give access to a microphone and video to interact with the agent. Users will have an option to share the screen with any queries.
4. After connecting with the agent, the Agent will have an option like sharing screen, Photo capture and Recording. And, we have a ConverSense widget also added in agent page. Agent can use that to verify the customer.
Dashboard Page Development
The dashboard page is designed using MongoDB Visualization, employing aggregation to format data and visualize it through charts. The page provides insights into caller queue lists, available agents, average wait times, logged-in agents, agents on calls, and users waiting in the queue.
Dashboard Interface Design
- Caller Queue List: Dynamically populated with caller information using JavaScript
- Agent Statistics: Data such as the number of available agents, logged-in agents, agents on calls, users waiting in the queue, and average wait time are updated in real time through MongoDB.
WebRTC Security Best Practices
Securing WebRTC communications is paramount to protect sensitive data and ensure user privacy. Here are some best practices for securing WebRTC communications:
- Use Secure Transport Protocols: Deploy WebRTC over HTTPS and utilize secure WebSocket connections to encrypt data transmission and prevent interception.
- Implement End-to-End Encryption: Encrypt media streams and signaling messages using protocols like SRTP (Secure Real-Time Transport Protocol) and SDES (Session Description Protocol Security Descriptions). This guarantees that only authorized participants can access and decode transmitted data.
- Authentication and Authorization: Implement strong user authentication and access controls to restrict WebRTC access to authorized users and limit their actions.
- Secure Signaling and Session Handling: Protect signaling channels and implement secure session management to prevent unauthorized access and session hijacking and ensure secure communication throughout the session’s duration.
- Regular Updates and Security Audits: Keep servers, libraries, and frameworks updated with the latest security patches. Conduct regular security audits and penetration testing to address potential security weaknesses in the application.
Deploying the Application to App Engine
To deploy your WebRTC application to Google App Engine, ensure your application code, dependencies, and an ‘app.yaml’ configuration file are prepared. Open a terminal, navigate to your project’s root directory, and execute the ‘gcloud app deploy’ command. Follow the prompts and await the deployment’s completion. Once done, your WebRTC application will be accessible at the App Engine URL provided.
Key Takeaways
In the ever-evolving landscape of real-time communication, WebRTC coupled with the round-robin algorithm emerges as a game-changer. It not only demonstrates technological excellence but also underscores our commitment to creating user-centric, secure, and efficient communication systems. This dynamic duo has the potential to revolutionize caller-agent interactions, setting the stage for a new era of seamless communication and collaboration.
To our valued target audience, we recognize your need for cutting-edge solutions that enhance customer support, streamline communication, and drive efficiency in your contact center platforms. Sensiple is here to support you on this transformative journey. Our team of experts is ready to assist you with any questions or challenges related to the concepts discussed in this blog.
For further information and personalized assistance, please feel free to reach out to us. You can contact us through our website at Contact Us. We look forward to partnering with you to unlock the full potential of WebRTC and the round-robin algorithm for your business. Together, we can shape the future of real-time communication.
See Also:
About the Authors
Joseph Amalraj, is at Technical Lead at Sensiple with more than 10 years of expertise in the field of technology and software development, working with contact center, AWS, GCP, Chatbot Integration & Development. He also manages the technical aspects of a software team by making architectural and design choices, counseling team members on technical issues, and overseeing system updates. In the constantly changing world of technology, Joseph has played a crucial part in the pursuit of greatness. He continuously produces good results and helps his team and organization succeed.
Joy Priyadharshan R is a Developer at Sensiple with 5 years of experience in Contact Centre practice and web development. He is also knowledgeable on Node.js, PHP, JS frameworks, and GCP cloud computing.
See Also: