Carlos Santos ad4ae2a69d frontend: Refactor meeting component for allowing customization
- 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
2025-10-31 13:16:43 +01:00
2025-10-15 17:42:04 +02:00
2025-10-15 19:15:00 +02:00
2025-10-15 17:42:04 +02:00
2025-03-10 17:19:23 +01:00

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

  1. Architecture Overview
  2. Prerequisites
  3. Getting Started
  4. Development
  5. Building
  6. Testing
  7. Documentation
  8. Production Deployment
  9. Project Structure
  10. Using the meet.sh Script

Architecture Overview

The OpenVidu Meet application is a monorepo managed with pnpm workspaces and consists of multiple interconnected packages:

OpenVidu Meet CE Architecture Overview

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 openvidu repository alongside openvidu-meet to 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.development for 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 server
  • LIVEKIT_API_KEY: LiveKit API key
  • LIVEKIT_API_SECRET: LiveKit API secret
  • SERVER_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:

  1. All tests pass: ./meet.sh test-unit-backend && ./meet.sh test-unit-webcomponent
  2. Code is properly formatted
  3. TypeScript types are correctly defined in typings/
  4. Documentation is updated as needed

License

Licensed under the Apache License, Version 2.0. See LICENSE for details.


For questions and support, visit our community forum.

Description
No description provided
Readme 8.7 MiB
Languages
TypeScript 74.8%
SCSS 9.5%
HTML 6.6%
Shell 4.2%
JavaScript 2.4%
Other 2.2%