A beautiful React component for screen recording with microphone support, custom styling, and built-in console logging
npm install onscreen-recorderA beautiful, feature-rich React component for screen recording with microphone support, custom styling, and built-in console logging.
- š„ Screen Recording - Record your screen with high-quality video
- š¤ Microphone Support - Optional microphone audio recording with automatic mixing
- šØ Beautiful UI - Modern, responsive design with custom styling
- š Console Logging - Built-in console for real-time recording status
- š¤ Upload Support - Custom upload handling via callback
- š„ Download Support - Easy video download
- š§ TypeScript - Fully typed with TypeScript
- ā” Lightweight - Zero external icon dependencies, custom SVG icons included, optimized bundle size
- šÆ Customizable - Extensive props for customization
``bash`
npm install onscreen-recorderor
yarn add onscreen-recorderor
pnpm add onscreen-recorder
This package works with React 16.8+, React 17, React 18, and React 19. No special installation flags are needed.
This package requires React and React DOM as peer dependencies:
`bash`
npm install react react-dom
`tsx
import React from "react";
import { ScreenRecorder } from "onscreen-recorder";
import "onscreen-recorder/styles";
function App() {
return
}
export default App;
`
`tsx
import React from "react";
import { ScreenRecorder } from "onscreen-recorder";
import "onscreen-recorder/styles";
function App() {
const handleRecordingStart = () => {
console.log("Recording started!");
};
const handleRecordingStop = (blob: Blob) => {
console.log("Recording stopped! Blob size:", blob.size);
};
return
}
`
| Prop | Type | Default | Description |
| ------------------- | ------------------------ | ----------- | ------------------------------------------------------------------------------------------------ |
| onRecordingStart | () => void | undefined | Callback fired when recording starts |onRecordingStop
| | (blob: Blob) => void | undefined | Callback fired when recording stops, receives the video blob |onDownload
| | (blob: Blob) => void | undefined | Callback fired when video is downloaded |onUpload
| | (blob: Blob) => void | undefined | Callback fired when upload button is clicked, receives the video blob for custom upload handling |onError
| | (error: Error) => void | undefined | Callback fired when an error occurs |defaultMicEnabled
| | boolean | true | Whether microphone is enabled by default |countdownSeconds
| | number | 3 | Seconds to count down (3, 2, 1) after you select your screen; then recording starts. Use 0 to start immediately. |className
| | string | "" | Additional CSS class name for the container |
`tsx
import React from "react";
import { ScreenRecorder } from "onscreen-recorder";
import "onscreen-recorder/styles";
function App() {
const handleUpload = async (blob: Blob) => {
// Implement your custom upload logic here
const formData = new FormData();
formData.append("video", blob, screen-recording-${Date.now()}.webm);
try {
const response = await fetch("https://your-api.com/upload", {
method: "POST",
body: formData,
});
const result = await response.json();
console.log("š¤ Upload successful!", result);
} catch (error) {
console.error("ā Upload failed:", error);
}
};
return (
console.log("š¬ Recording started!");
}}
onRecordingStop={(blob) => {
console.log(ā
Recording complete! Size: ${blob.size} bytes);`
// You can process the blob here
}}
onDownload={(blob) => {
console.log("š„ Video downloaded!");
}}
onUpload={handleUpload}
onError={(error) => {
console.error("ā Error:", error.message);
}}
defaultMicEnabled={true}
/>
);
}
`tsx
import React from "react";
import { ScreenRecorder } from "onscreen-recorder";
import "onscreen-recorder/styles";
import "./custom-styles.css";
function App() {
return
}
`
The component comes with built-in styles. Import them using:
`tsx`
import "onscreen-recorder/styles";
The component uses CSS Modules, so you can override styles by targeting the component's class names or by using the className prop.
This component uses the MediaRecorder API and getDisplayMedia API, which are supported in:
- Chrome 72+
- Firefox 66+
- Edge 79+
- Safari 13+
`bash`
npm run build:lib
This will create the distributable files in the dist/ directory.
`bash`
npm run dev
This will start the example application in development mode.
```
onscreen-recorder/
āāā lib/ # Library source code
ā āāā components/ # React components
ā āāā index.ts # Main export file
āāā dist/ # Built files (generated)
āāā example/ # Example application
āāā package.json
Contributions are welcome! Please feel free to submit a Pull Request.
MIT
If you encounter any issues or have questions, please open an issue on the GitHub repository.