Modern HTML5 Video & Screen Recording Library
npm install videorecorderjsVideoRecorderJS is a modern, lightweight, and powerful JavaScript library for recording video, audio, and screen content directly in the browser.
- 🎥 Camera Recording: Capture video from webcam with audio.
- 🎨 Filters & Effects: Apply realtime filters (sepia, grayscale, blur) and watermarks.
- 🖼 Canvas Processing: Internal pipeline ensures effects are baked into the recording.
- 💻 Screen Recording: Record screen, windows, or tabs (getDisplayMedia).
- 🔊 Audio Visualization: Built-in event hooks to easily visualize audio data.
- 🚀 Modern API: Promise-based, Event-driven, and ES Module ready.
- 📦 Lightweight: Zero dependencies.
> Note: Version 3.1.0 introduces a Canvas-based processing pipeline. This enables real-time effects but is slightly more resource-intensive than raw stream recording.
``bash`
npm install videorecorderjsor
yarn add videorecorderjs
`javascript
import VideoRecorderJS from 'videorecorderjs';
const recorder = new VideoRecorderJS({
videoTagId: 'my-video-element', // Changed from videotagid
videoWidth: 1280,
videoHeight: 720,
log: true
});
// ... listeners ...
// Start Camera (Async/Await recommended)
try {
await recorder.startCamera();
} catch (error) {
console.error("Camera access failed:", error);
}
// Start Recording
try {
recorder.startRecording();
} catch (error) {
console.error("Recording failed to start:", error);
}
`
You can apply CSS-style filters and text watermarks dynamically. These effects are rendered onto the recorded video string.
`javascript
// Apply a filter (accepts standard Canvas 'filter' strings)
recorder.setFilter('grayscale(100%)');
recorder.setFilter('sepia(100%)');
recorder.setFilter('blur(5px)');
recorder.setFilter('none'); // Reset
// Add a Watermark (Top-Right, White text with background box)
recorder.setWatermark('Confidential - 2025');
recorder.setWatermark(null); // Remove
`
`javascript`
try {
await recorder.startScreen();
// Filters work on Screen Share too!
recorder.setWatermark('Screen Capture');
recorder.startRecording();
} catch (error) {
console.error("Screen recording failed:", error);
}
| Option | Type | Default | Description |
| -- | -- | -- | -- |
| videoTagId | string or HTMLElement | Required | The ID or Element to attach the stream to. |videoWidth
| | number | 640 | Ideal video width. |videoHeight
| | number | 480 | Ideal video height. |frameRate
| | number | 30 | Desired frame rate. |webpQuality
| | number | 1.0 | Quality of WebP images (if used). |mimeType
| | string | video/webm | The MIME type for recording. |log
| | boolean | false | Enable console logging. |
VideoRecorderJS is a headless library. This means it provides the logic but leaves the UI entirely up to you. This gives you maximum freedom to style your application.
`mermaid`
graph TD
A[Your Custom UI] -- Controls --> B[VideoRecorderJS Logic]
B -- Internal Canvas Pipeline --> C[Procesed Stream]
C -- Stream --> D[
Since you provide the
`css``
/ Example: Make the video look like a modern card /
#my-video-element {
width: 100%;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
object-fit: contain; / Recommended to prevent watermark cropping /
background: #000;
}
You can overlay buttons, add custom controls, or build a complete studio interface around it (as seen in the screenshot above).
We are actively working on making VideoRecorderJS the de-facto standard. Here is what's coming next:
Contributions are welcome! Please open an issue or submit a pull request.
MIT © Imal Hasaranga