react-video-annotation-tool
Version:
A React-based video player with built-in annotation features, enabling interactive video tagging and markup for seamless media annotation workflows
195 lines (152 loc) • 6.33 kB
Markdown
# React Video Annotation Tool
**React Video Annotation Tool** is a flexible and intuitive library to add annotations on videos in real-time. It supports a wide range of features including shape tools, annotation lists, undo/redo functionality, and more.
## Features
- Annotate videos with custom shapes and colors.
- Easily control video playback.
- Undo, redo, and delete shapes with simple methods.
- Manage annotations with a customizable list.
- Integrate directly with databases for saving/loading annotations.
- Responsive and styled UI for modern web apps.
- ### Keyboard Shortcuts for Improved Productivity
- **Ctrl + Z**: Undo the last action.
- **Ctrl + Y**: Redo the undone action.
- **Delete Button**: Remove selected shapes.
### Preview
### Links
- **Demo Site**: [View Live Demo](https://react-video-annotation.vercel.app )
- **GitHub Repository**: [View on GitHub](https://github.com/Iamaniketgupta/react-video-annotation.git)
## Installation
Install the package using npm or yarn:
```bash
npm install react-video-annotation-tool
```
## Usage
### App.js Example
```jsx
import { useRef, useState } from "react";
import { TwoDVideoAnnotation } from "react-video-annotation-tool";
import { FaUndo, FaRedo, FaTrash } from "react-icons/fa";
function App() {
const annotationRef = useRef(null);
const [allAnnotations, setAllAnnotations] = useState([]);
return (
<div className="app">
{/* Toolbar */}
<div className="tools">
<button onClick={() => annotationRef.current?.undo()}>
<FaUndo /> Undo
</button>
<button onClick={() => annotationRef.current?.redo()}>
<FaRedo /> Redo
</button>
<button onClick={() => annotationRef.current?.deleteShape()}>
<FaTrash /> Delete
</button>
</div>
{/* Video Annotation Tool */}
<TwoDVideoAnnotation
rootRef={annotationRef}
shapes={allAnnotations}
setShapes={setAllAnnotations}
selectedShapeTool={"rectangle"}
videoUrl="https://videos.pexels.com/video-files/6804117/6804117-sd_960_506_25fps.mp4"
/>
</div>
);
}
export default App;
```
## Shapes objects and properties examples, expected as initial Data array of shapes of objects if passed
```js
// Example of initial data array with shape objects
const initialShapes = [
{
id: "rectangle1", // Unique identifier for the shape
color: "blue", // Color of the annotation
label: "My Rectangle", // Optional label for the shape
data: {}, // Custom data for user-defined purposes
properties: {
type: "rectangle", // Shape type
x: 13, // X-coordinate of the rectangle
y: 5, // Y-coordinate of the rectangle
width: 4, // Width of the rectangle
height: 4, // Height of the rectangle
startTime: 0, // Start time of the annotation (seconds)
endTime: 0.5, // End time of the annotation (seconds)
scaleX: 1, // Horizontal scale factor
scaleY: 1, // Vertical scale factor
screenHeight: 600, // Height of the annotation area
screenWidth: 400, // Width of the annotation area
strokeWidth: 2, // Stroke width for the rectangle
opacity: 0.8, // Opacity of the rectangle
},
},
{
id: "circle1", // Unique identifier for the circle
color: "red",
label: "My Circle", // Optional label for the circle
data: {},
properties: {
type: "circle",
x: 10,
y: 15,
radius: 4, // Radius of the circle
startTime: 1,
endTime: 1.5,
scaleX: 1,
scaleY: 1,
screenHeight: 600,
screenWidth: 400,
strokeWidth: 2,
opacity: 0.8,
},
},
{
id: "line1",
color: "green",
label: "My Line",
data: {},
properties: {
type: "line",
x: 20,
y: 30,
points: [0, 0, 100, 0, 100, 100], // Array of points defining the line
startTime: 2,
endTime: 2.5,
scaleX: 1,
scaleY: 1,
screenHeight: 600,
screenWidth: 400,
strokeWidth: 2,
opacity: 0.8,
},
},
];
```
## API
### TwoDVideoAnnotation Props
| Prop | Type | Default | Description |
|------------------------|------------|---------|-----------------------------------------------------------------------------|
| `rootRef` | `ref` | - | Ref to access methods (e.g., undo, redo, deleteShape). |
| `shapes` | `array` | `[]` | Initial array of annotations. |
| `setShapes` | `function` | - | State setter to update annotations. |
| `videoUrl` | `string` | - | URL of the video to annotate. |
| `selectedShapeTool` | `string` | - | The currently selected shape tool ('rectangle' , 'circle' , 'line'). |
| `hideAnnotations` | `boolean` | `false` | Whether to hide all annotations. |
| `annotationColor` | `string` | `"red"` | Color for new annotations. |
| `videoControls` | `object` | `{}` | Video playback controls ({`autoPlay:true`, `loop:true`}, etc.). |
| `lockEdit` | `boolean` | `false` | Disable editing annotations. |
| `selectedAnnotationData`| `function`| - | Callback triggered when annotation is selected. |
### Developers
- [Aniket Gupta](mailto:iamaniketgupta1245@gmail.com)
- [Suraj Singh](mailto:surajgsn07@gmail.com)
## License
This library is available under the [MIT License](https://opensource.org/licenses/MIT).