Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/boussaidev/webrtc-overlay
A powerful TypeScript library for adding interactive canvas overlays to WebRTC streams using Konva.js
https://github.com/boussaidev/webrtc-overlay
animation canvas convas-overlay graphics interactive javascript konva media-stream real-time screen-sharing typescript vide-filters video-effects video-processing webcam webrtc
Last synced: 20 days ago
JSON representation
A powerful TypeScript library for adding interactive canvas overlays to WebRTC streams using Konva.js
- Host: GitHub
- URL: https://github.com/boussaidev/webrtc-overlay
- Owner: boussaidev
- License: mit
- Created: 2025-01-26T22:50:15.000Z (20 days ago)
- Default Branch: main
- Last Pushed: 2025-01-26T22:52:14.000Z (20 days ago)
- Last Synced: 2025-01-26T23:20:41.594Z (20 days ago)
- Topics: animation, canvas, convas-overlay, graphics, interactive, javascript, konva, media-stream, real-time, screen-sharing, typescript, vide-filters, video-effects, video-processing, webcam, webrtc
- Language: TypeScript
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# webrtc-overlay
A powerful TypeScript library that combines WebRTC with Konva.js to create interactive canvas overlays on video streams. Perfect for adding real-time graphics, animations, filters, and effects to camera or screen-sharing streams.
## Features
### 🎥 WebRTC Integration
- Camera streams with device selection
- Screen sharing
- Multi-stream support
- Stream cloning and manipulation
- Custom video sources
- MediaRecorder support
### 🎨 Drawing Tools
- Shapes
- Rectangle, Circle, Ellipse
- Line, Arrow, Path
- Star, Ring, Arc
- RegularPolygon, Wedge
- Custom shapes
- Text
- Basic text
- TextPath
- Labels
- Images
- Static images
- Animated GIFs
- Video streams
- Groups & Layers
- Node grouping
- Layer management
- Z-index control
### 🔄 Real-time Processing
- Custom video processors
- Frame-by-frame manipulation
- Async processor loading
- Priority ordering
- Enable/disable control
- Built-in Konva filters
- Blur, Brighten, Contrast
- Pixelate, Noise, Threshold
- HSL, RGB manipulation
- Custom WebGL filters
- Animation
- Tweens
- Sprites
- Custom animation frames
### 📹 Recording & Streaming
- WebM recording
- Stream cloning
- Size control
- Frame rate control
- Video controls
## Installation
```bash
npm install webrtc-overlay
```
## Quick Start
### Basic Usage
```typescript
import RTCOverlay from 'webrtc-overlay
';
// Get camera stream
const stream = await RTCOverlay.getUserMedia({ video: true });
// Render both video and canvas
stream.renderVideo();
stream.renderCanvas();
// Set size
stream.setSize(800, 600);
// Add shapes
const rect = stream.addRect({
x: 100,
y: 100,
width: 100,
height: 50,
fill: 'red',
opacity: 0.5,
draggable: true
});
// Add text
const text = stream.addText({
text: "Drag the rectangle!",
x: 10,
y: 10,
fontSize: 20,
fill: "white"
});
```
### Video Processing
```typescript
// Blur effect processor
const blurProcessor = stream.addProcessor({
name: "Blur Effect",
immediate: true,
process: (frame) => {
const ctx = frame.ctx;
const imageData = ctx.getImageData(0, 0, frame.canvas.width, frame.canvas.height);
// Apply blur effect using canvas context
ctx.filter = 'blur(5px)';
ctx.drawImage(frame.canvas, 0, 0);
ctx.filter = 'none';
}
});
// Color manipulation processor
const colorProcessor = stream.addProcessor({
name: "Color Effect",
process: (frame) => {
const ctx = frame.ctx;
const imageData = ctx.getImageData(0, 0, frame.canvas.width, frame.canvas.height);
const data = imageData.data;
// Manipulate pixels directly
for (let i = 0; i < data.length; i += 4) {
data[i] *= 1.2; // Red
data[i + 1] *= 0.8; // Green
data[i + 2] *= 0.8; // Blue
}
ctx.putImageData(imageData, 0, 0);
}
});
// AI-based processor with async loading
const aiProcessor = stream.addProcessor({
name: "AI Effect",
isReady: async () => {
const model = await loadAIModel();
return true;
},
process: (frame) => {
const ctx = frame.ctx;
const imageData = ctx.getImageData(0, 0, frame.canvas.width, frame.canvas.height);
// Process with AI
// ... AI processing ...
ctx.putImageData(imageData, 0, 0);
}
});
// Control processors
blurProcessor.start();
colorProcessor.start();
```
### Recording
```typescript
// Start recording
stream.startRecording();
// After some time...
const blob = stream.stopRecording();
if (blob) {
// Download recording
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'recording.webm';
a.click();
}
```
## API Reference
### Stream Methods
- `renderVideo(parent?: HTMLElement)`
- `renderCanvas(parent?: HTMLElement)`
- `setSize(width: number, height: number)`
- `getSize(): {width: number, height: number}`
- `addTrack(track: MediaStreamTrack)`
- `clone(): MediaStream`
### Shape Methods
- `addRect(config: RectConfig)`
- `addCircle(config: CircleConfig)`
- `addEllipse(config: EllipseConfig)`
- `addText(config: TextConfig)`
- `addImage(config: ImageConfig)`
- `addGif(config: ImageConfig)`
- `addPath(config: PathConfig)`
- `addStar(config: StarConfig)`
- `addRing(config: RingConfig)`
- `addArc(config: ArcConfig)`
- `addArrow(config: ArrowConfig)`
- `addLine(config: LineConfig)`
- `addSprite(config: SpriteConfig)`
- `addLabel(config: LabelConfig)`
- `addGroup(config?: GroupConfig)`
### Node Management
- `removeNode(node: Node)`
- `clearNodes()`
- `getNodes(): Node[]`
- `getVideoNodes(): Image[]`
### Transform Methods
- `rotate(node: Node, angle: number)`
- `scale(node: Node, scaleX: number, scaleY: number)`
- `move(node: Node, x: number, y: number)`
### Processor Methods
- `addProcessor(config: ProcessorConfig)`
- `removeProcessor(id: string)`
- `enableProcessor(id: string, enabled: boolean)`
- `getProcessor(id: string)`
### Recording Methods
- `startRecording()`
- `stopRecording(): Blob`
### Animation Methods
- `createTween(config: TweenConfig)`
- `createAnimation(func: Function, layers?: Layer[])`
## Browser Support
Works in all modern browsers with WebRTC and Canvas support:
- Chrome/Edge (Desktop & Mobile)
- Firefox (Desktop & Mobile)
- Safari (Desktop & Mobile)
## Dependencies
- Konva.js (^8.0.0) - Canvas graphics
- gifler - GIF support
## License
MIT
## Author
Mohamed Boussaid
## Contributing
Currently, this is a private package. For issues or feature requests, please contact the author directly.