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
This case study highlights the enhancements and improvements made to the Agora Video Calling Web Application, which was developed by us. It is a follow-up to our previous case study, which explains the initial development of the web application. You can read more here.
Goal
The initial goal was to develop a web application that would allow users to join video calls via a browser, connecting with the client’s mobile application users. The mobile app generates a video call link that contains a Channel ID & Token, which the web application uses to initiate the video call.
Initially, the mobile app only allowed users to schedule video calls within 24 hours, but the client wanted to offer an option to schedule calls well in advance. This required modifications to ensure that users could join scheduled calls without facing token-expiration issues while maintaining security and preventing misuse.
Discovery
We discussed with the client to brainstorm challenges and explore possible solutions for enabling scheduled video calls beyond 24 hours while preventing unauthorized usage. We identified the key technical problems and possible workarounds to achieve the results.
- Agora Token Expiry: The Agora token, used for authentication, expires in 24 hours. If a user schedules a call in advance, the generated video call link will become invalid as the token expires in 24 hours.
- No User Authentication on Web App: The web application did not have user authentication, meaning anyone with the call link could join. This could lead to the misuse of Agora minutes, increasing the client’s operational costs.
- Tokens Generated on Every Page Load: A high-level solution of generating a new token on every page load was not ideal due to potential Agora rate limits and unnecessary API calls.
- Manual Token Storage Was Not Feasible: A best practice would be to store the token in a database, check its expiry, and regenerate it if needed. However, due to the client’s time and budget constraints, this was not an option.
- Users Could Manipulate Call Time: The client wanted to restrict users from joining outside scheduled call hours, but since the call time was visible in the URL, users could modify it and still access the call.
Client Requirements
Based on the goals and problems identified, the client requested the following:
- Enable mobile app users to schedule calls well in advance without token expiry issues.
- Ensure that web users can join calls at the correct scheduled time while preventing unauthorized access.
- Restrict the token generation to a specific time range based on the call time to optimize API usage and minimize unnecessary token requests.
- Prevent misuse of Agora minutes, ensuring that only the intended participants can join the call and only on specific call times.
- Implement a security mechanism to prevent users from manually modifying the call time in the URL.
- 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
Token Expiry
Challenge:
- Agora’s authentication token expires in 24 hours, making it impossible for users to join calls scheduled days or weeks in advance.
- Previously, the token was generated by the mobile app and sent in the video call link.
Solution:
- Instead of using pre-generated tokens from the mobile application, we implemented Agora’s Token Server in the web application.
- The Token Server dynamically generates a new token every time a user loads the page.
- The mobile app now only provides the Channel ID, and the web app generates the token on demand, ensuring that tokens never expire before a scheduled call.
Restricting Misuse of Agora Calls
Challenge:
- Since the web app only has Token authentication and not user authentication, anyone with the call link could share it, leading to unauthorized usage.
- This would increase Agora usage costs, as Agora charges based on call minutes.
Solution:
- We restricted the users from joining outside their scheduled time by adding a time validation check.
- The mobile app now sends the call’s scheduled time in the URL, and the web app only allows users to join:
- 30 minutes before the scheduled time.
- Up to 90 minutes after the scheduled time.
- If a user tries to join outside this time range, they see an error message preventing them from accessing the call.
Preventing Users from Modifying Call Time
Challenge:
Initially, the idea was to send the scheduled call time in the URL as plain text, meaning users could modify it manually and bypass restrictions.
Solution:
- Instead of sending the call time in human readable form, we converted the time into Unix timestamp format(in seconds).
- The unix timestamp has been encoded using Base64 before adding it to the URL.
- On the web app, we decode the Base64 timestamp and convert it into UTC format to validate the allowed join time.
- This prevents users from manipulating the URL to gain unauthorized access.
Avoiding Excessive Token Generation
Challenge:
- Generating a new token on every page load was not an ideal approach as it’s not the best practice, and also, this might create issues due to potential Agora rate limits.
- The recommended approach is to store tokens in a database and regenerate them only when expired, but the client’s time & budget constraints did not allow this.
Solution:
- We confirmed with Agora’s support team that there are no strict rate limits for token generation.
- Given the client’s constraints, we implemented the on-demand token generation on page load, as long as it occurred only within the valid call time range.
Testing & Optimization
As this phase involved core module rework and critical logic changes, we did extensive testing to ensure a seamless and stable experience for users across different browsers and devices, as we faced cross-browser issues during the first phase of development.
Cross-browser Testing
- Verified the Agora video call functionality across all major browsers:
- Google Chrome (Windows, macOS, Android)
- Mozilla Firefox (Windows, macOS, Android)
- Safari (macOS, iOS)
- Microsoft Edge
- Ensured that video, audio, and UI elements worked consistently across platforms.
Time-Based Access Restrictions Validation
- Tested various scenarios of scheduled call time validation, including:
- Joining before the allowed time
- Joining within the allowed window(30 minutes before the scheduled time & Up to 90 minutes after the scheduled time)
- Joining after the allowed window
- Validated that Base64 encoding/decoding worked properly by returning the correct call-scheduled time.
Token Generation & API Performance Testing
- Ensured tokens were generated dynamically on page load without causing rate limit issues.
- Verified and ensured that Agora’s API returned expected results consistently for different channel IDs.
Key Achievements
- Implemented a Token Server in the web app to generate tokens dynamically, allowing scheduled calls without expiry issues.
- Prevented unauthorized access by implementing time-based restrictions for joining video calls.
- Optimized token usage by generating the token on page load only during the specified time range.
- Secured the call time parameter to prevent users from manipulating the call time in the URL.
- Ensured a seamless video call experience where web and mobile app users could connect without issues.
Conclusion
The second phase of development successfully solved the token expiration and unauthorized access issues while keeping implementation time and costs minimal for the client.
Agora Video Calling Web Application
