- Implemented MeetingParticipantPanelComponent for displaying participant details with moderation controls. - Created MeetingShareLinkOverlayComponent for sharing meeting links when no participants are present. - Developed MeetingShareLinkPanelComponent for sharing links within the participant panel. - Introduced MeetingToolbarButtonsComponent for additional toolbar actions like copying links and leaving meetings. - Refactored MeetingComponent to utilize new components for participant management and sharing links. - Updated styles for new components and removed redundant styles from MeetingComponent. frontend: implement CE-specific meeting component with routing and UI elements frontend: Enhance meeting components with plugin system - Added alternative function inputs for event handling in MeetingLobbyComponent, MeetingParticipantPanelComponent, MeetingShareLinkOverlayComponent, MeetingShareLinkPanelComponent, and MeetingToolbarButtonsComponent. - Introduced MeetingComponentsPlugins interface and MEETING_COMPONENTS_TOKEN for dynamic component injection. - Updated MeetingComponent to utilize NgComponentOutlet for rendering plugins and prepare inputs for plugin components. - Removed CE-specific MeetingCEComponent and its associated files, integrating its functionality directly into MeetingComponent. - Created MEETING_CE_PROVIDERS to configure the plugin system using library components directly. - Updated routing to use the new MeetingComponent with plugin support. frontend: Update meeting component to display prejoin screen with lobby plugin Moves meeting service to a subdirectory Moves the meeting service to its own subdirectory for better organization. Updates imports to reflect the new location. frontend: Refactor dialog component to conditionally render action buttons frontend: Implement lobby state management and enhance prejoin screen functionality frontend: Refactor MeetingComponent to streamline service injections and constructor frontend: Remove unused participantToken variable and add getter for lobbyState participantToken frontend: Rename lobby.service to meeting-lobby.service frontend: Refactor MeetingComponent to use MeetingPluginManagerService for plugin inputs and remove deprecated methods meet.sh: launch testapp with dev command backend: Added webhook config in .env.test Adds web component events e2e tests Introduces end-to-end tests for web component events, covering scenarios such as joining, leaving, and handling meeting closure. The tests verify correct event emission and payload structure, including reason codes for leave events. Also, add `test_localstorage_state.json` to git ignore, removing the file. frontend: Added meeting event handler service frontend: Enhances meeting component reactivity Refactors the meeting component to use signals for reactive updates. This improves performance by reducing unnecessary re-renders and simplifies state management. - Moves event handling to a dedicated service. - Introduces signals for participant lists and updates. - Implements caching for participant panel inputs. - Improves moderator control visibility logic. webcomponent: Added moderation e2e tests refactor(meeting): optimize participant panel item inputs handling frontend: fix moderator badge rendering in participant panel refactor(meeting): remove unused services and streamline constructor logic refactor(meeting): update leave and end meeting handlers to return promises
OpenVidu Meet
OpenVidu Meet is a fully featured video conferencing application built with Angular, Node.js, and LiveKit. This repository provides both a Community Edition (CE) and a Professional Edition (PRO) with advanced features.
Table of Contents
- Architecture Overview
- Prerequisites
- Getting Started
- Development
- Building
- Testing
- Documentation
- Production Deployment
- Project Structure
- Using the meet.sh Script
Architecture Overview
The OpenVidu Meet application is a monorepo managed with pnpm workspaces and consists of multiple interconnected packages:
Core Components
-
Frontend (
frontend/): Angular 20 application providing the user interface- shared-meet-components: Reusable Angular library with shared components for administration and preferences
- Integrates openvidu-components-angular for core video conferencing functionality
-
Backend (
backend/): Node.js/TypeScript REST API server- Manages rooms, participants, recordings, and authentication
- Serves the compiled frontend in production
-
Typings (
typings/): Shared TypeScript type definitions used across frontend and backend -
Webcomponent (
frontend/webcomponent/): Standalone web component version of OpenVidu Meet -
TestApp (
testapp/): Testing application for development and validation
Prerequisites
Before starting, ensure you have the following installed:
- Node.js: Version 22 or higher
- pnpm: Package manager (will be installed automatically by meet.sh if missing)
- LiveKit: For local testing (optional)
curl -sSL https://get.livekit.io/cli | bash
Getting Started
Set up your local development environment by cloning the necessary repositories into a shared folder. This ensures the openvidu-components-angular library is available for development and linking.
your-dev-folder/
├── openvidu/
│ └── openvidu-components-angular/ # Core Angular components library
└── openvidu-meet/ # This repository
Note: Clone the
openvidurepository alongsideopenvidu-meetto enable proper linking. If you haven't done so yet:git clone https://github.com/OpenVidu/openvidu.git
Clone and Setup
# Clone the repository
git clone https://github.com/OpenVidu/openvidu-meet.git
cd openvidu-meet
# Start development mode with hot-reload
./meet.sh dev
Then, the application will be available at http://localhost:6080.
Note: Livereload is also available at http://localhost:5080.
Development
Development Mode
The recommended way to develop is using the integrated development mode that watches all components:
./meet.sh dev
This command starts concurrent watchers for:
- openvidu-components-angular: Core Angular components library
- Typings: Shared type definitions with automatic sync
- Backend: Node.js server with nodemon auto-restart
- Frontend: Angular application with live reload
- REST API Docs: OpenAPI documentation generation
Note
The backend uses
backend/.env.developmentfor environment variables during development. Configure your LiveKit credentials there:LIVEKIT_URL=ws://localhost:7880 LIVEKIT_API_KEY=your-api-key LIVEKIT_API_SECRET=your-api-secret
Manual Development Setup
If you prefer more granular control:
# Install dependencies
./meet.sh install
# Build shared typings (required first)
./meet.sh build-typings
# In separate terminals:
# Terminal 1 - Backend
cd backend
pnpm run start:dev
# Terminal 2 - Frontend
cd frontend
pnpm run dev
# Terminal 3 - Typings watcher (optional)
cd typings
pnpm run dev
Important
Shared Typings: The
typings/package contains types shared between frontend and backend. When you modify these types in development mode, they are automatically synced to both projects. Always build typings before building other components.
Building
Build all components in the correct order:
# Build everything (typings → frontend → backend → webcomponent)
./meet.sh build
# Or build individual components:
./meet.sh build-typings # Build shared types
./meet.sh build-webcomponent # Build web component only
./meet.sh build-testapp # Build test application
CI/CD Optimized Builds
The meet.sh script supports flags to optimize CI/CD pipelines:
# Install dependencies once
./meet.sh install
# Build typings once
./meet.sh build-typings
# Build webcomponent (skip already completed steps)
./meet.sh build-webcomponent --skip-install --skip-typings
# Run tests without reinstalling
./meet.sh test-unit-webcomponent --skip-install
Available flags:
--skip-install: Skip dependency installation--skip-build: Skip build steps--skip-typings: Skip typings build (use when already built)
Testing
OpenVidu Meet includes comprehensive testing capabilities:
Unit Tests
# Backend unit tests
./meet.sh test-unit-backend
# Webcomponent unit tests
./meet.sh test-unit-webcomponent
End-to-End Tests
# Run E2E tests for webcomponent (installs Playwright automatically)
./meet.sh test-e2e-webcomponent
# Force reinstall Playwright browsers
./meet.sh test-e2e-webcomponent --force-install
TestApp
The repository includes a dedicated testing application for manual testing:
# Build and start the test application
./meet.sh start-testapp
The test app will be available at http://localhost:5080
Note
The TestApp requires LiveKit CLI to be installed and configured for full functionality.
Documentation
Generate Documentation
# Generate webcomponent documentation
./meet.sh build-webcomponent-doc [output_dir]
# Generate REST API documentation
./meet.sh build-rest-api-doc [output_dir]
Documentation files will be generated in:
- Webcomponent:
docs/webcomponent-*.md(events, commands, attributes) - REST API:
backend/public/openapi/public.html
If you specify an output directory, the documentation will be copied there.
Production Deployment
Using Docker
Build and run the production container:
# Build the Docker image (using meet.sh)
./meet.sh build-docker openvidu-meet-ce
# Build Docker image for demos (different BASE_HREF)
./meet.sh build-docker openvidu-meet-ce --demos
# Run the container
docker run \
-e LIVEKIT_URL=<your-livekit-url> \
-e LIVEKIT_API_KEY=<your-livekit-api-key> \
-e LIVEKIT_API_SECRET=<your-livekit-api-secret> \
-p 6080:6080 \
openvidu-meet-ce
Manual Production Start
# Build all components
./meet.sh build
# Start in production mode
./meet.sh start --prod
# Or start in CI mode
./meet.sh start --ci
Environment Variables
Configure your production environment using these key variables:
LIVEKIT_URL: WebSocket URL for LiveKit serverLIVEKIT_API_KEY: LiveKit API keyLIVEKIT_API_SECRET: LiveKit API secretSERVER_PORT: Backend server port (default: 6080)NODE_ENV: Environment mode (development,production,ci)
For a complete list of environment variables, see backend/src/environment.ts.
Project Structure
openvidu-meet/
├── meet.sh # Main build and development script
├── pnpm-workspace.yaml # pnpm workspace configuration
├── package.json # Root package with scripts
│
├── typings/ # Shared TypeScript definitions
│ ├── src/
│ │ ├── api-key.ts
│ │ ├── auth-config.ts
│ │ ├── participant.ts
│ │ ├── event.model.ts
│ │ └── ...
│ └── package.json
│
├── frontend/ # Angular frontend application
│ ├── src/ # Main application source
│ ├── projects/
│ │ └── shared-meet-components/ # Reusable Angular library
│ └── webcomponent/ # Web component build
│
├── backend/ # Node.js/Express backend
│ ├── src/
│ │ ├── controllers/ # REST API controllers
│ │ ├── services/ # Business logic
│ │ ├── middleware/ # Express middleware
│ │ └── environment.ts # Environment configuration
│ ├── openapi/ # OpenAPI specifications
│ └── public/ # Static files (includes built frontend)
│
├── testapp/ # Testing application
│ ├── src/
│ └── public/
│
├── docker/ # Docker build files
│ └── create_image.sh
│
├── docs/ # Generated documentation
├── scripts/ # Build and utility scripts
└── openvidu-meet-pro/ # Professional Edition (separate license)
Using the meet.sh Script
The meet.sh script is the main entry point for all development and build tasks:
Command Reference
# Help
./meet.sh help
# Installation
./meet.sh install # Install all dependencies
# Building
./meet.sh build # Build all components
./meet.sh build-typings # Build shared types only
./meet.sh build-webcomponent # Build webcomponent only
./meet.sh build-testapp # Build test application
# Development
./meet.sh dev # Start development mode with watchers
# Testing
./meet.sh test-unit-backend # Run backend unit tests
./meet.sh test-unit-webcomponent # Run webcomponent unit tests
./meet.sh test-e2e-webcomponent # Run webcomponent E2E tests
# Running
./meet.sh start --prod # Start in production mode
./meet.sh start --ci # Start in CI mode
./meet.sh start-testapp # Start test application
# Documentation
./meet.sh build-webcomponent-doc [dir] # Generate webcomponent docs
./meet.sh build-rest-api-doc [dir] # Generate REST API docs
# Docker
./meet.sh build-docker <image-name> [--demos] # Build Docker image
Examples
# Full development workflow
./meet.sh install
./meet.sh dev
# CI/CD optimized workflow
./meet.sh install
./meet.sh build-typings
./meet.sh build-webcomponent --skip-install --skip-typings
./meet.sh test-unit-webcomponent --skip-install
# Production build and deploy
./meet.sh build
./meet.sh start --prod
# Build Docker image
./meet.sh build-docker openvidu-meet-ce
# Build Docker image for demos
./meet.sh build-docker openvidu-meet-ce --demos
Technologies
- Frontend: Angular 20, Material Design, TypeScript
- Backend: Node.js, Express, TypeScript
- WebRTC Infrastructure: LiveKit
- Package Manager: pnpm (workspaces)
- Build Tools: Angular CLI, TypeScript Compiler, Rollup (webcomponent)
- Testing: Jest (unit), Playwright (E2E), Mocha
- Documentation: OpenAPI/Swagger, Custom generators
Contributing
Contributions are welcome! Please ensure that:
- All tests pass:
./meet.sh test-unit-backend && ./meet.sh test-unit-webcomponent - Code is properly formatted
- TypeScript types are correctly defined in
typings/ - Documentation is updated as needed
License
Licensed under the Apache License, Version 2.0. See LICENSE for details.
Links
For questions and support, visit our community forum.
