GL Video

This is a video manipulation example using HTML5 Canvas and JavaScript. It manipulates the pixels of a video to display the video on canvas as a grayscale image.

Note: Due to the nature of this example (autoplaying video) this project will not run properly on most modern browsers as browsers have inbuilt functionality to prevent autoplaying of videos without user interaction

Getting Started

• Clone this repository to your local machine
• Run yarn install to install the necessary dependencies
• Run yarn start to start the server on port 9000
• The project should be up and running on http://localhost:9000/

Prerequisites

• A web browser like Chrome, Firefox, Safari, or Edge.

Running the Example

1. Open http://localhost:9000/ in your web browser.
2. The video will automatically start playing.
3. The video will be displayed in grayscale on the canvas.

Built With

• HTML5 Canvas
• JavaScript

References

• Mozilla Developer Network: Audio and video manipulation
• Ajin

License

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