React Video Scrubber

This React component is a locally-based solution for generating still frames from a video source. This method is an alternative to a server-side, Node.js/FFmpeg solution where video frames would be extracted and returned to the client as a sequence of images.

Scrub Video Frames using Array of Canvas Elements

Application Logic Flow

The diagram below illustrates the high-level data and component flow of the application, from initial video load through frame extraction and user-driven scrubbing.

flowchart TD
    A[App mounts] --> B{videoReady?}
    B -- No --> C[VideoUpload component]
    C --> D[preloadVideo<br/>fetch video as Blob]
    D --> E[loadVideoMetadata<br/>read duration, width, height]
    E --> F[dispatch setVideoState<br/>updates videoSlice]
    F --> G[User clicks 'Use Video']
    G --> H[onVideoSelectedCallback<br/>setVideoReady=true]
    H --> B
    B -- Yes --> I[Scrubber component]
    I --> J[ScrubberFrames]
    I --> K[ScrubberSlider]
    J --> L[Compute currentTimes array<br/>duration / scrubberFramesMax]
    L --> M[videoFramesToCanvasArray<br/>seek video to each time<br/>draw frame to canvas]
    M --> N[setCanvasFrames<br/>array of HTMLCanvasElement]
    K --> O[User moves slider]
    O --> P[dispatch setCurrentScrubberFrame<br/>updates scrubberSlice]
    P --> Q[ScrubberFrames re-renders]
    N --> Q
    Q --> R[Draw canvasFrames currentScrubberFrame<br/>to visible canvas]

Loading

Flow Summary

1. Load — VideoUpload preloads the source video as a Blob and reads its metadata, then dispatches it into the Redux videoSlice.
2. Confirm — Once the user confirms the video, App swaps VideoUpload for the Scrubber.
3. Extract Frames — ScrubberFrames calculates evenly-spaced time offsets and uses videoFramesToCanvasArray to seek a hidden <video> element to each offset, drawing the result into an array of <canvas> elements.
4. Scrub — ScrubberSlider dispatches the current frame index to the scrubberSlice; ScrubberFrames listens for changes and paints the matching cached canvas into the visible canvas.

Running Locally

Make sure you have Node.js installed.

git clone https://github.com/patrick-s-young/react-video-scrubber.git # or clone your own fork
cd react-video-scrubber
yarn install
yarn start

Built With

• React - JavaScript UI library.
• Redux Toolkit - Opinionated, batteries-included toolset for efficient Redux development.
• TypeScript - Extends JavaScript by adding types to the language.
• webpack - Static module builder.

Authors

• Patrick Young - Patrick Young

License

This project is licensed under the MIT License - see the LICENSE file for details.