https://github.com/cdaein/canvas-mp4-stream

A basic example to export canvas animation to mp4 video
https://github.com/cdaein/canvas-mp4-stream

canvas creative-coding export generative-art mp4 video

Last synced: 23 days ago
JSON representation

A basic example to export canvas animation to mp4 video

• Host: GitHub
• URL: https://github.com/cdaein/canvas-mp4-stream
• Owner: cdaein
• License: mit
• Created: 2024-01-11T15:56:58.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-01-12T00:40:49.000Z (10 months ago)
• Last Synced: 2024-05-01T18:01:24.297Z (7 months ago)
• Topics: canvas, creative-coding, export, generative-art, mp4, video
• Language: TypeScript
• Homepage:
• Size: 16.6 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Canvas to mp4 video

A barebone minimal example of saving HTML5 Canvas to mp4 video using ffmpeg process via Vite dev server plugin (Node.js). It can handle very high resolution canvas (tested up to 7k resolution). There is no dependency other than using Vitejs server and having ffmpeg installed.

The same technique is used in [Ssam](https://github.com/cdaein/ssam) creative coding helper package.

## Notes

It is not yet perfect. I've noticed some difference between the frame being processed by ffmpeg and the frame that is being sent from the client.

# License

MIT