A browser-based streaming player for rendering real-time presentations streamed with lectureStudio. Built with modern web technologies, it provides an interactive lecture experience with live annotations, video conferencing, and collaborative features.
- Real-time Slide Streaming — View presentations with live annotations as they happen
- Interactive Annotations — Pen, highlighter, shapes, and text support
- Video Conferencing — Multi-party video/audio via WebRTC (Janus Gateway)
- Live Chat — Real-time messaging during lectures
- Quiz Integration — Interactive quizzes and polls
- PDF Rendering — High-quality slide rendering with PDF.js
- Multi-language — English and German localization
- Theme Support — Light, dark, and system-adaptive themes
- Responsive Design — Works on desktop and tablet devices
| Category | Technology |
|---|---|
| UI Framework | Lit 3.x (Web Components) |
| State Management | MobX 6.x |
| Real-time Communication | Janus Gateway (WebRTC) |
| Messaging | STOMP over WebSocket |
| PDF Rendering | PDF.js |
| UI Components | Shoelace |
| Internationalization | i18next |
| Build Tools | Webpack, esbuild, Babel, TypeScript |
- Node.js 18.x or higher
- npm 9.x or higher
# Clone the repository
git clone https://github.com/lectureStudio/lecturePlayer.git
cd lecturePlayer
# Install dependencies
npm install# Start development build with watch mode
npm run watch
# Or use webpack watch mode
npm run webpack:watch# Create optimized production build
npm run webpack:prod
# Or development build (unminified)
npm run webpack:devBuild output is written to the build/ directory.
# Run tests with coverage
npm run test# Run tests in watch mode
npm run test:watch
# Run ESLint
npm run lintsrc/
├── action/ # Action system for recording/playback
│ └── parser/ # Binary action parsers
├── component/ # Lit Web Components
│ ├── controls/ # Player control buttons
│ ├── player/ # Main player component
│ ├── slide-view/ # Slide rendering component
│ └── ...
├── event/ # Custom event type definitions
├── geometry/ # Geometric primitives (Point, Rectangle, etc.)
├── model/ # Data models
│ └── shape/ # Annotation shape types
├── paint/ # Drawing primitives (Brush, Color, Font)
├── render/ # Canvas rendering engine
├── service/ # External service integrations
│ ├── janus.service.ts # WebRTC via Janus
│ ├── chat.service.ts # Chat messaging
│ └── playback.service.ts # Action playback
├── store/ # MobX state stores
├── tool/ # Interactive annotation tools
├── transport/ # REST API clients
├── locales/ # i18n translation files
│ ├── de/ # German
│ └── en/ # English
└── utils/ # Utility functions
The PDF.js worker must be available at /js/pdf.worker.js. Ensure your server or build process copies the worker file to this location.
The player expects the following backend endpoints:
| Endpoint | Description |
|---|---|
/api/v1/course/state/{courseId} | Course state and documents |
/ws-state | WebSocket endpoint for STOMP |
/janus | Janus Gateway WebRTC signaling |
| Browser | Version | Notes |
|---|---|---|
| Chrome | 90+ | Full support |
| Firefox | 90+ | Speaker selection requires media.setsinkid.enabled flag |
| Edge | 90+ | Full support |
| Safari | 15+ | Limited speaker selection, iOS volume control via hardware |
- WebRTC (RTCPeerConnection)
- WebSocket
- Canvas 2D
- Web Audio API
- ES2020+ JavaScript
The player supports three color schemes:
- Light — Bright theme for well-lit environments
- Dark — Dark theme for reduced eye strain
- System — Follows the operating system preference
Theme preference is persisted in localStorage.
Embed the player in your HTML:
<!DOCTYPE html><html><head><scripttype="module" src="path/to/lecture-player.js"></script></head><body><lecture-playercourseId="12345"
isLive="true"
isClassroom="false"></lecture-player></body></html>| Attribute | Type | Description |
|---|---|---|
courseId | Number | The unique course/lecture identifier |
isLive | Boolean | Whether the stream is currently live |
isClassroom | Boolean | Classroom mode (features only, no streaming) |
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- TypeScript with strict mode enabled
- ESLint for code quality
- Lit for web components
- Follow existing patterns and conventions
This project is licensed under the Apache License 2.0 - see the LICENSE file for details.
- lectureStudio — Desktop application for creating and streaming lectures
- Janus Gateway — WebRTC server used for video conferencing