ccapture.js
ffmpeg.wasm
Our great sponsors
ccapture.js | ffmpeg.wasm | |
---|---|---|
12 | 76 | |
3,473 | 12,983 | |
- | 3.6% | |
0.0 | 8.9 | |
over 1 year ago | 17 days ago | |
JavaScript | C | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
ccapture.js
-
Making YouTube video with React
I also tried to find a better recording method. Since I’m now using canvas, there are some solutions to recording that seemed quite elegant. For example, paper.js uses requestAnimationFrame to achieve its smooth animation. There are libraries like ccapture.js that hooks into the various methods like requestAnimationFrame and setInterval, allowing it to render each frame separately.
-
how to save scene as image file in three.js?
I actually spent a fair bit of time on this and eventually got something to work. Someone named "spite" made a great library called CCapture for doing this, but it needs to be updated and repackaged for ES6. Right now it is painful to integrate into your project, but it could be super-easy. You can help to encourage someone to fix the issues here.
-
Help! does anyone know how to export p5.js into WebM?
Check out CCapture.
- How to download/export animation ?
-
How to create a video editor that works in your browser.
The image capture step uses ccapture to ensure that the playback frame is converted to an image. All frame images to webm video.
-
qgis2threejs export to gif
ccapture.js basically let's you write out frames from a threejs camera, which you then stitch together with ffmpeg.
-
rivers
I use ccapture, using the png option, which will spit out a tar with a png of each frame, and then I stitch them with ffmpeg.
-
[p5.js] Flame.
This video is 1800 frames (30 FPS * 60s)... a browser trying to save 1800 individual frames would lock up and die. Ccapture.js hooks into the browser's rendering code and captures the frames as a 'blob' - a binary object that is often used for streaming video - and then wraps them up into one single download.
-
[p5.js] Swirling the drain
p5.js runs the sketch, ccapture.js captures all of the frames (1800 in this video), and ffmpeg combines the frames into an MP4.
-
[p5.js] Surfing the simplex.
I use ccapture.js, which captures the frames as a blob in real-time then exports it as a .tar file full of jpgs when the sketch is finished (with 'finished' defined as reaching 1800 frames, in this case). This is a lot better than having the browser try to save 1800 jpgs the usual way.
ffmpeg.wasm
-
Show HN: I open-sourced the in-memory PostgreSQL I built at work for E2E tests
There's already ffmpeg wasm. I've used it in projects. Works great.
https://github.com/ffmpegwasm/ffmpeg.wasm
-
FFmpeg 7.0 Released
There's a low-hanging fruit that I think would make ffmpeg more helpful for regular people.
There's a million terrible websites that offer file conversion services. They're ad-ridden, with god-knows-what privacy/security postures. There's little reason for users to need to upload their files to a third-party when they can do it locally. But getting them to download fiddly technical software is tough - and they're right to mistrust it.
So, there's a WASM version of ffmpeg, already working and hosted at Netlify [1]. It downloads the WASM bundle to your browser and you can run conversions/transformations as you wish, in your browser. Sandboxed and pretty performant too!
If this tool a) was updated regularly b) had a nicer, non-CLI UI for everyday users and c) was available at an easily-Googlable domain name - it would solve all the problems I mentioned above.
[1]: https://ffmpegwasm.netlify.app/
-
FFmpeg-online: ffpmeg running on the browser
As their github page says, based on https://ffmpegwasm.netlify.app ...
I'm guessing no one did GPU-optimizations? I saw a web app (not an ffmpeg transpilation) that went clever and used WebGL so it can access the GPU and use its parallel processing capabilities...
-
Locoly (locoly.app): an in-browser video editor running all computations locally
ffmpeg.wasm: The engine making all these happen. However, I’m a bit concerned about its current situation. The repo has not been updated for more than six months now, and that’s not a healthy sign for an open-source project. Clearly I was reading the commits wrong. The author mentioned “speed up x264 with SIMD intrinsics” in their roadmap (https://github.com/ffmpegwasm/ffmpeg.wasm/discussions/415), which, if landed, could make such on-device video editors much more competitive.
-
[TASK] Reverse Engineer my Web App Before Production
I use https://github.com/ffmpegwasm/ffmpeg.wasm and I want my FFMPEG commands to be hidden from others.
- AWS service for transcoding audio to mp3 and images to jpg?
-
I made a simple online video editor with React and ffmpeg
Possibly using this? https://github.com/ffmpegwasm/ffmpeg.wasm
-
Newbie question: Is there any possible way to grab metadata from local media files and process them in the webbrowser?
You could try using something like ffmpeg wasm which is a way of using ffmpeg client side in browser. Unfortunately WebAssembly only supports files less than 2 gigabytes, which is a problem for videos. And I don't know if ffmpeg wasm contains ffprobe, so you might have to find another project or try to compile ffprobe to wasm yourself. This stuff is out of my wheelhouse so I can't offer much help.
- Show HN: FFmpeg UI
- Petition to add support for Gopher protocol in Firefox
What are some alternatives?
webm-writer-js - JavaScript-based WebM video encoder for Google Chrome
rust-ffmpeg-wasi - ffmpeg libraries precompiled for WebAsembly/WASI, as a Rust crate.
react-native-view-shot - Snapshot a React Native view and save it to an image
ffprobe-wasm - A Web-based FFProbe. Powered by FFmpeg, Vue and Web Assembly!
spectrum-vue - Adobe Spectrum UI Components for Vue.
ffmpeg-libav-tutorial - FFmpeg libav tutorial - learn how media works from basic to transmuxing, transcoding and more. Translations: 🇺🇸 🇨🇳 🇰🇷 🇪🇸 🇻🇳 🇧🇷
piskel - A simple web-based tool for Spriting and Pixel art.
node-ytdl-core - YouTube video downloader in javascript.
next-img - A Next.js plugin for embedding optimized images.
handbrake-js - Video encoding / transcoding / converting for node.js
ReelSteady-Joiner - ReelSteady Joiner merge multiple GoPro separate video files into one without losing the gyro data
ffmpeg.js - Port of FFmpeg with Emscripten