https://github.com/patrick-s-young/react-video-scrubber

React canvas-enabled video frame scrubber.
https://github.com/patrick-s-young/react-video-scrubber

canvas canvas2d html-canvas html-video javascript react redux-toolkit typescript video-player

Last synced: over 1 year ago
JSON representation

React canvas-enabled video frame scrubber.

• Host: GitHub
• URL: https://github.com/patrick-s-young/react-video-scrubber
• Owner: patrick-s-young
• Created: 2020-08-16T16:28:15.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-20T22:57:49.000Z (over 3 years ago)
• Last Synced: 2025-04-14T22:10:04.371Z (over 1 year ago)
• Topics: canvas, canvas2d, html-canvas, html-video, javascript, react, redux-toolkit, typescript, video-player
• Language: TypeScript
• Homepage:
• Size: 13.2 MB
• Stars: 12
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 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.

![05](https://user-images.githubusercontent.com/42591798/90859550-4ba77f80-e33d-11ea-95fd-2c974e32865e.gif)

# Scrub Video Frames using Array of Canvas Elements

![03_main_sequence](https://user-images.githubusercontent.com/42591798/90858701-91634880-e33b-11ea-984c-b63f8655ec01.gif)

## Running Locally

Make sure you have [Node.js](http://nodejs.org/) installed.

```sh

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](https://react-cn.github.io/react/downloads.html) - JavaScript UI library.

* [Redux Toolkit](https://redux-toolkit.js.org/) - Opinionated, batteries-included toolset for efficient Redux development.

* [TypeScript](https://www.typescriptlang.org/) - Extends JavaScript by adding types to the language.

* [webpack](https://webpack.js.org/) - Static module builder.

## Authors

* **Patrick Young** - [Patrick Young](https://github.com/patrick-s-young)

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.