@onlive.ai/meet

A web components package for video conferencing based on LiveKit, built with Lit Element. Provides reusable components to create high-quality video conferencing experiences.

🚀 Features

• 📹 Real-time video conferencing with LiveKit
• 🎤 Integrated audio and video controls
• 👥 Automatic participant management
• 🎨 Customizable web components based on Lit
• 📱 Responsive design
• 🔊 Visual speaking indicator
• 👤 Automatic avatars when video is off

📦 Installation

Using pnpm (recommended)

pnpm add @onlive.ai/meet
# or
npm install @onlive.ai/meet

🏗️ Package Structure

packages/meet/
├── index.ts                    # Main entry point
├── package.json               # Package configuration
├── tsconfig.json              # TypeScript configuration
├── tsup.config.ts             # Build configuration
└── components/
    └── meet/
        ├── meet.ts            # Main OLMMeet component
        ├── meet.styles.ts     # Component styles
        ├── meet.types.ts      # Types and interfaces
        └── met.context.ts     # Component context

🔧 Basic Usage

ES Modules Import

import { OLMMeet } from '@onlive.ai/meet';

HTML Usage

<olm-meet 
  .options="meetOptions"
  .livekitService="livekitServiceInstance"
  role="guest">
</olm-meet>

TypeScript Configuration

import { OLMMeet, MeetOptions } from '@onlive.ai/meet';
import { LivekitService } from '@onlive.ai/common-121';

const meetOptions: MeetOptions = {
  // Meeting configuration
};

const livekitService = new LivekitService();

// Component automatically registers as 'olm-meet'

📋 Component API

Properties

| Property | Type | Description | Required | |----------|------|-------------|----------| | options | MeetOptions | Meeting configuration | ✅ | | livekitService | LivekitService | LiveKit service instance | ✅ | | role | "agent" \| "guest" | Participant role | ❌ (default: "guest") |

Events

The component emits standard LiveKit events for handling connection state and participants.

🛠️ Development

Available Scripts

• npm run build:package - Build package for distribution
• npm run clean - Clean generated files

Main Dependencies

• Lit - Web components framework
• LiveKit Client - Video conferencing SDK
• @onlive.ai/ui - Shared UI components
• @onlive.ai/common-121 - Common services and utilities

📝 Distribution Formats

The package is distributed in multiple formats:

• ESM (index.js) - ES Modules
• CommonJS (index.cjs) - Node.js
• IIFE (index.iife.js) - Direct browser
• TypeScript (index.d.ts) - Type definitions

🔗 Exports

// Main export
import { OLMMeet } from '@onlive.ai/meet';

// Access to specific components
import '@onlive.ai/meet/components/meet/meet.js';