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

React Video Annotation Tool Preview

Installation

Install the package using npm or yarn:

npm install react-video-annotation-tool

Usage

App.js Example

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

// 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

License

This library is available under the MIT License.

Package detail

react-video-annotation-tool

readme