A livestream mini App with Antmedia integration
This project is a live meeting application built using Laravel (backend) and Vue.js (frontend). It allows users to create meetings and playing real-time video streaming with real-time viewer counters.
- Create a Meeting: Users can create a new meeting by entering a meeting name. The system generates a unique meeting key and link.
- Live Video Streaming: Each meeting includes a live video stream (audio and video) powered by Antmedia.
- Live Feed: A real-time feed displays notifications when users join or leave the meeting (without displaying names).
- Real-Time Viewer Counter: Shows the number of users currently watching the live stream as well as the total of watchers.
- Meeting Statistics: Users can view some statistics of meetings.
- Edit Meeting Name or Delete Meeting: Users can edit the name of an existing meeting as well as delete a meeting.
This Use Case Diagrams illustrates the main interactions between users (actors) and the system.
This Sequences Diagram illustrate the flow of events when a user creates a new meeting / play a meeting / edit meeting name / delete meeting. They showing the interactions between the Client, the Backend, the Database and the Antmedia API.
For simplicity, diagrams didn't include all details.
For now, the database is very simple and contains one table.
- Backend: Laravel (PHP framework)
- Frontend: Vue.js (JavaScript framework)
- UI Component Framework: Vuetify
- Database: MySQL
- Real-Time Streaming: Antmedia
The application follows a modern web development architecture, combining Laravel for backend logic (serves as the API layer) and Vue.js for frontend logic and interactivity (serves as the user interface layer). Below is a detailed breakdown of the architecture and how data fetching and API interactions are handled, including integration with the Antmedia Server API:
Vue.js is integrated with Laravel using the method of Embedded Vue Components in Blade Files.
With Vue.js components embedded within Blade files, Laravel serves as the core application. This strategy preserves Laravel's solid architectural foundation while incorporating dynamic Vue.js components, resulting in a more engaging user experience without sacrificing the familiarity of traditional Laravel multi-page and server-side development.
-
Integration with Antmedia Server API: The application integrates with the Antmedia Server API to manage live streams and fetch stream-related data. Both Laravel and Vue.js interact with the Antmedia Server API, each serving a specific purpose: Vue.js handles creating and playing live meetings, while Laravel manages editing and deleting meetings.
-
API Data Fetching: The application uses periodic fetching (polling) to retrieve updates such as viewer counts, live feed updates and updated meetings data. Below are the scenarios where polling is used:
- On First Access of the App: When the application is first accessed, polling is used to synchronize data in local DB with Antmedia Server.
- During a Played Meeting: Polling occurs every 10 seconds to fetch updates.
- When a Meeting Name is Updated: Polling is triggered to synchronize the updated meeting data with local DB.
Note
This approach was chosen instead of WebSockets for simplicity.
To simplify Antmedia API Fetching, and as user authentication was not a requirement in this test, a static JWT is used for all requests.
Important
The JWT Token is generated with this Secret Key : 5R9Pw4sgcCbNYDpseVEtNp93xtRb0Vtb
The application includes two Unit Tests for now to ensure the correctness of two helper methods: formatDuration and formatStartTime. These tests are written using PHPUnit.
- Add user authentication and authorization for secure meeting management.
- Implement WebSockets for real-time updates to enhance user experience.
- Implement dynamic JWT management, including short-lived access tokens and refresh tokens, for enhanced security and scalability.
- Add more meetings management features.
- Expand Tests by adding Features, Integration and Automated tests.
Any work or source code produced as part of this project is the sole property of شركة التحول التقني (Tech Trans).