# LiveKit Meet - Yew WASM Port

A complete port of the LiveKit Meet video conferencing application to Rust/Yew WebAssembly.

## Features

- **Home Page**: Demo and custom connection options with E2E encryption support
- **Pre-join Screen**: Camera/microphone preview and device selection
- **Video Conference**: Grid layout with participant video tiles
- **Media Controls**: Mute/unmute audio, enable/disable video, screen sharing, chat toggle
- **Chat**: Real-time messaging sidebar
- **Settings Menu**: Device selection and configuration
- **Responsive Design**: Mobile-friendly interface

## Architecture

This port maintains the same functionality as the original React LiveKit Meet app while leveraging:

- **Yew**: Modern Rust frontend framework with component-based architecture
- **WebAssembly**: High-performance execution in the browser
- **LiveKit Rust SDK**: Native Rust integration with LiveKit (WASM-compatible)
- **Web APIs**: Direct browser API access via web-sys

## Building and Running

### Prerequisites

- Rust (latest stable)
- Trunk (WASM build tool)
- wasm-pack

```bash
# Install Trunk
cargo install trunk

# Install wasm-pack
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
```

### Development

```bash
# Start development server
trunk serve

# Build for production
trunk build --release
```

The application will be available at `http://localhost:8080`.

## Project Structure

```
src/
├── main.rs              # Application entry point
├── app.rs               # Main app component and routing
├── utils/               # Utility functions
│   └── mod.rs
├── pages/               # Page components
│   ├── mod.rs
│   ├── home.rs          # Home page with tabs
│   ├── room.rs          # Main meeting room
│   └── custom.rs        # Custom connection page
└── components/          # Reusable UI components
    ├── mod.rs
    ├── video_tile.rs    # Participant video display
    ├── chat.rs          # Chat sidebar
    ├── controls.rs      # Media control buttons
    ├── prejoin.rs       # Pre-join screen
    └── settings_menu.rs # Settings overlay
```

## Key Differences from React Version

1. **State Management**: Uses Yew's `use_state` hooks instead of React state
2. **Event Handling**: Rust callbacks with type safety
3. **Async Operations**: Rust futures with `spawn_local`
4. **WebRTC Integration**: Direct web-sys bindings instead of JavaScript interop
5. **Type Safety**: Full compile-time type checking for all data structures

## LiveKit Integration

The application is designed to work with:
- LiveKit Cloud
- Self-hosted LiveKit Server
- End-to-end encryption support
- All standard LiveKit features (audio, video, screen share, chat)

## Browser Support

Supports all modern browsers with WebAssembly and WebRTC capabilities:
- Chrome 57+
- Firefox 52+
- Safari 11+
- Edge 16+

## Development Notes

- Video/audio device enumeration via MediaDevices API
- Real-time media stream handling with web-sys
- Responsive CSS Grid layout for video tiles
- Dark theme with CSS custom properties
- Accessibility features with proper ARIA labels

## TODO: LiveKit SDK Integration

Currently, the application has placeholder implementations for LiveKit functionality. The next phase involves:

1. Integrating the LiveKit Rust SDK for WASM
2. Implementing real-time audio/video streaming
3. Adding participant management
4. Enabling chat messaging
5. Supporting screen sharing
6. Adding recording capabilities

The UI and component structure are complete and ready for LiveKit integration.