118 lines
3.6 KiB
Markdown
118 lines
3.6 KiB
Markdown
# 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.
|