Industry: Wellness & Health
Tools Used: Agora Web SDK, Developer Console & Logging Tools
Region: Singapore
Technology Used: Node.Js, NPM, JavaScript (ES6+), WebRTC, Base64 Encoding/Decoding.
The Team
Project Coordinator: 1
UI / UX Designer: 1
Developers: 1
Goal
The client has a mobile application that has a video call feature. Currently, only App-to-App Video calls are possible. To make it easy for non-mobile app users, the client wanted to develop a web application module that allows joining video calls via browser without a mobile application.
The existing mobile application uses Agora, a real-time voice and video call platform, for the video call functionality in the app. So, we had to use the same Agora platform for developing this video call web application.
Client Requirements
- Develop a web application with a video call feature.
- Ability to connect to a video call between Mobile application and web application users.
- Automatic call initiation feature that allows users to join calls by accessing a specific URL directly.
- Authentication is to be done automatically via Channel ID & Secret Token passed via URL.
- Simple video call interface of Full-screen remote stream and a small local stream on the bottom right corner with intuitive controls for toggling audio and video during calls.
- Cross-Browser Compatibility: Ensure the application works smoothly across major browsers (Chrome, Firefox, Edge, and Safari).
- Display proper error messages to users based on problems like Invalid tokens/Channel ID, Expired Tokens, etc
- Scalability: Design the solution to support future enhancements and a growing user base.
Challenges & Solutions
Understanding Tech Prerequisites
Challenge:
Agora Web SDK needs Node.Js, a Javascript runtime environment, and NPM, a package manager for Node.Js.
The client has a WordPress website that is hosted in a shared hosting space. Issues with shared hosting are that most of the shared hosting does not support Node.Js and NPM.
Solution:
So we had to educate the client about this and asked him to upgrade the Server plan to the one that supports Node.Js & NPM.
As this process might take some time, we started the development in our VPS server, which we use for internal development purposes.
Temporary Token Validity
Challenge:
Agora Web SDK allows us to create Channel ID & temporary tokens from their application console. The major issue we have with these temporary tokens is that they are valid only for 24 hours. After every 24 hours, we have to generate the Channel ID & Token pair again.
Solution:
As the client already has a Mobile application with a video call feature, we understood they should have their own token server for generating Channel ID & Tokens for their mobile application, so instead of using temporary tokens, we asked the client to generate tokens from their mobile application with extended validity for the development purposes.
Special Characters in Token & Channel ID
Challenge:
As this web application requires automatic call joining, the Channel ID and Token must be passed via the URL. These values are then retrieved from the URL and used to authenticate and initiate the video call.
We were getting “dynamic key or token timeout” errors despite using valid Channel IDs & tokens at times. Upon careful debugging, we found that Channel ID & Tokens can sometimes have special characters, and when they are passed via URL, these characters may be automatically converted or misinterpreted.
Example:
+ (Plus) gets converted to a space (%20).
Other special characters (/, =) gets converted to (%2F, %3D).
Solution:
To resolve this issue, we collaborated with the Mobile App Development team, which is responsible for generating the Video Call Joining URL from the mobile application.
We recommended using Base64 Encoding for these values before appending them to the URL. This ensured that all special characters were preserved without modification.
On the web application side, we implemented Base64 Decoding to retrieve the original values before using them for authentication. This approach successfully eliminated token-related errors and allowed seamless video call initiation.
Audio/Video Toggle
Challenge:
We encountered inconsistent behavior in the audio and video toggle functions across different browsers and versions.
For instance, in certain versions of Safari, clicking the audio toggle unexpectedly triggered the video toggle functionality instead. This inconsistency led to user experience issues, making it difficult for users to control their microphones and cameras independently.
Solution:
To ensure consistent behavior across all browsers, we implemented dedicated functions for toggling audio and video separately.
Codec Compatability
Challenge:
Video calls were not working properly when users connected using different browsers like Firefox & Safari, Safari & Chrome, Chrome & Firefox, etc. We identified that these cross-browser performance issues are due to H.264 codec compatibility limitations on certain platforms.
Solution:
Clarity on available codecs was critical to resolving this issue. Chrome and Safari prefer H.264 for video encoding, whereas Firefox has better support for VP8. To ensure seamless video call functionality across all target browsers, we implemented dynamic codec selection, supporting both VP8 and H.264.
Testing & Optimization
Real-Time Debugging & Optimization
Implemented detailed logging and used live debugging techniques to capture the abnormalities in video session data and optimized event handling and error recovery mechanisms wherever necessary.
Cross-browser Testing
We conducted multiple testing sessions across Chrome, Firefox, Edge, and Safari on multiple operating systems to identify any browser-specific issues and ensure consistent video call functionality.
User Feedback
Apart from the internal team, we involved multiple users from our organization to test the web app and gathered feedback on overall user experience and error handling, which contributed to overall improvement.
Key Achievements
- Seamless Web-to-App Connectivity – Users can now join video calls via browser without needing the mobile app.
- Automatic Call Joining – Implemented URL-based authentication using Base64 encoding/decoding for secure and automatic call joining.
- Cross-Browser Compatibility – Ensured smooth performance across Chrome, Firefox, Edge, and Safari by dynamically handling codec selection (VP8 & H.264).
- Stable Audio & Video Toggle Functions – Resolved inconsistencies in browser behavior by implementing dedicated toggle functions for independent control.
- Optimized Error Handling & Debugging – Integrated real-time logging and automated error messages for better troubleshooting and user experience.
- Scalability & Future Growth – Designed the application architecture to support future enhancements and increased user load.
Conclusion
The development of the Agora Video Calling Web Application successfully addressed the client’s requirement to enable browser-based video calls that seamlessly connect with existing mobile application users.
By overcoming key technical challenges, including server compatibility, token authentication, special character encoding, cross-browser inconsistencies, and codec compatibility, we ensured a smooth and reliable video-calling experience across all major browsers.
Sync WooCommerce Customers with a Directory W...
