WASM + React... Easily build video editing software with JS & FFmpeg
2020 ж. 16 Қар.
215 259 Рет қаралды
Use Web Assembly to build an app that converts video files to GIF (using FFmpeg), entirely from a frontend React JavaScript application. fireship.io/lessons/wasm-vide...
Source Code: github.com/fireship-io/react-...
FFmpeg.wasm ffmpegwasm.github.io/
#wasm #webdev #tutorial
Install the quiz app 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font
Been watching these for about a year now and dude, your videos are tremendous. You are a tremendous instructor. You keep it cutting-edge, concise, and super informative. Thank you.
Sadly the Source Code doesn't work anymore because of the Spectre Vuneability in modern browsers. They disabled SharedArrayBuffer which was essential for this to work (for some reason, i am not an expert on this). So before you try this, try to find a more recent video =D
@@yotubecreators47 wow thank you!
is it also disabled on Apple M1?
@@yotubecreators47JavaFX is so good though
@@yotubecreators47 is their any solution for vue too?
Thank you man. Saved my time.
Been looking forward to this, Jeff! Definitely going to expand on this sometime in the future on my own project. Thanks!
Awesome work man
What people see: WASM allows one to run server tasks on the client What I see: serverless SQL injection
not sure if that's a joke or a real thing because i don't have very much knowledge on the subject, so, honest question: there's a point on do that? i mean you could hack it (could u?), but it will be only in your browser because nothing was sended to the server, right? so...
@@jorgekunrath1016 it was originally a joke. But now, re-thinking about it... you've got a point!
@@joaovaz3473 cool joke tho and thanks ^^
Good way to practice your hacking skills before taking them to a real server.
@@Fireship buddy what file icon theme do you use pls state it
I definitely asked for this video and you delivered, thanks a bunch! Great video as always Jeff, very very useful
I ran into these errors: 1. ffmpeg was not loading in browser: Soln: downgrade ffmpeg version to 0.9.0 2. SharedArray buffer error: Soln: Run chrome wuth this flag "chrome --enable-features=SharedArrayBuffer "
Man that was amazingly simple, I was scared of web assembly but I might start learning now. Also unrelated but have you considered doing a react course?
Yes, working on a React-Firebase course :)
@@Fireship It'll be the first time I've bought a course then
@@Fireship Great! Looking forward to it!
I’ve been looking forward to this!
Me too, but more WASM content on coming soon :)
I don't know how you make this videos so interesting always!! Thank you, I think an AssemblyScript video will also be awesome.
This is awesome. Thank you for this great introduction to WA ❤
Awesome video as usual! Really cool to see how to use all these things together!
Thank you very much
Really excited for the rust video. I could port my CLI app to web if you keep on your promise. Amazing as usual! Keep it up!
Omg I’m so pumped for the rust web assembly video. I am a rust dev and would like to get some benefit from it on the web
This tutorial is fantastic!! Got a lot of value from this tutorial!!
great stuff man, ty. now its really open my mind for WASM :D
Amazing! I can't wait to see more WASM content.
It seemed tough to build but you made it look so easy!
In your Rust to WASM video, I'd love to see some sort of visuals in rust port over to visuals on the browser
Awesome video, so incredibly simple. Now I'm going to read more in depth about how to create these Web assembly files and bind them to javascript. Can't wait for the rust to wasm video!! Do you know if FS will conflict with other tabs accessing the same file ? This could be a problem, even two tabs overwriting the same place in memory. But I'm guessing this only runs in the current context of the tab. Another question, can we access the whole file system with wasm ? I'm not really sure what the `video` var contained, but could we somehow build it so we could access any file in the system or is the browser sandboxing this ? Thanks!!
Hi Jeff, could you do a video on how to use 'raw' wasm code? In this video you use a wrapper javascript library.
How about Intro to AssemblyScript 🔥🔥
Amazing! More videos on WebAssembly please!
Another really useful video, will try it with my open alpr project great work again.
This is sweet! I was thinking about using wasm to try to make a video editing tool on the web.
Great stuff as always. Still can't believe Nathan Fielder is this knowledgeable on web dev!
omg
That's what I am looking forward. I am also trying to develop custom rust code and covert it to WASM. That's cool.
Finally most awaited video 🌟✨
Wow! This is simply amazing! Everyone should see this! :)
I am fan of your way of telling things as they are very easy
Oh wow this one went way over my head
Thanks for this!! can't wait to dive wasm :D
Pumped to make this project!!
Amazing, WASM it's so powerful, i'll try this example.
Just what I was looking for 🔥
These videos are gold. Thank you so much
Really good music in the beginning 👌
🔥🚀 I have press the like button when I get into this page at the very first time, coz there is no chance this video will have crap content. 未看先讚啦！！！
u r hero of making things look simple
Hmm you using React more and more? I always thought of you as an Angular guy. It's good to see that you are open to everything.
Your videos are sooooo amazing I can't even tell
Would love to see a vid about assembly script :)
Going to be honest here I was looking at the same technology about 2 years ago. I worked on a transcoding project with multiple video streaming m3 u8, vast advertising.
How 'bout a 2d Rust game compiled to WASM? The game could be a flappy bird clone.
up, that would be awesome
excited for web assembly
May be in future plan an intro to rust and how we can write web assembly code using rust, I am really interested in those kind of videos.
We are about to enter an age, when there would be no OS. Just JS & Chrome. Your OS would be Chrome and everything else loaded in WASM. SMFH.
Wait until you hear about Chromebooks 🤣
@@MatthewTaylor86 those are awful
Linux, WASM edition :p
@@iyxan2340 Chrome-book would literally be Wasmbook
For some people, Windows is already just a bootloader for Chrome
Awesome tutorial . Please make a video converter using WASM and ffmpeg
Amazing !!! It inspires me to code a simple app to gain some money 😛 (I ve never done it and dont know how to monetize something like that aside ads)
Oh I've watched a video about the chopped truck. THe bridge was elevated, but still choppin the trucks
3:53 great way to add a preloader ,never thought of it that way
You can also use React Suspense for things like that, but that's a topic for another video...
You might also want to take a look at swr.vercel.app/. It deals with fetching data while showing a loading state or optionally showing already cached data while the data is being updated. It also supports infinite scrolling and react-native. Not exactly related to this video's scenario, but you might find it cool.
@@Fireship thanks ...I made a react app that actually allows you to watch movies and web series online. amoldalwai.github.io/watch-any-movie/ Can I get your thoughts on it?
Hey Jeff, are you still planning to create the Rust to WASM tutorial? That would be super cool
coming first is really exciting
please update the wasm changed some functions and features like i can't able to use createFFmpeg
Dude just accomplished my dream tool in under 8 minutes lmao
Wow! Thank you!
Please do a full course about webAssembly!
Back at it again!
FFmpeg is my favorite program
Weird request, but can we have Reasonml in 100 seconds? Your videos are great by the way!
Well, that was pretty cool!
Great video as always. I heard you say Rust 😍😋
Thank You so much!!!
Hi, great video Can I use this inside a webWorker?
This is really cool!
Can someone please help? I cannot move forward due to SharedBufferArray undefined error...
I faced same issue. How can i solved this
Idea: Add Tensorflow to have Text hovering over tracked objects
An idea I would like to see is how to handle editing videos and how to store and retrieve those videos in the local file system in react for different users e.g user 1 and user 2? sadly there is not very many resources showing how to work with react and video media
Good vid. Curious to know the licensing restriction for this type of "distribution."
FFMPEG is a FOSS tool, so it is not a problem in this case. but in other cases, I get what do you mean
Fire ship you truly are a god of tutorials
I want to be able to load a video, draw on that video(using canvas?), and then save it as a new file with the drawing visible. I also want to be able to have some sort of trim controls. Is something like this possible?
You're a legend!
If you use youtube-dl or one of the forks you can go from a source video straight to a gif I have a personal bash script that does that for me
Webassembly is so crazy
slowly and slowly wasm is starting to tickle my curisoity
Know any good libraries that would be great for having their wasm counterparts? Ffmpeg is one, game engines are another, what else? Also what else can you do with wasm, can you run sockets, etc? Would love to make browser in a browser
Can you fix the codebase that you shared in GIT. When I tried to run it, it throws an error: ffmpeg-core.js:22 Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined
The future is now, old man!
Next level stuff
hey, hey thank you , i mean it ...sensei🤗😘😘😘😁 yah i need this, download
Hey it took me a long time to figure out how to configure google and fb sign in with firebase on react native expo. Maybe if you could help others with it would be nice, or even do a full stack react native video on firebase
can you make a video turorial how to make a video trim function with react and ffmpeg?? please
Can you do a video on the web assembly file system?
It would be interesting to see how you deploy this app on the web. One aspect I'm oblivious is how to bunddle everything up. Since you said that WASM binary it's a pretty large file, how do you give that to the client? I mean the ffmpeg object is already there, is the .load() method that brings it down to the computer client or the client already downloaded it? Sorry if I'm confusing some concepts here.
I guess that FFMPEG does it in the background with .load() (2:58). Or the files already was bundled in the application, but not really downloaded and that function did that, but he mention CDN so not sure this part got me too
@@jorgekunrath1016 indeed, I took a look at the documentation. What's bundled and sended to the user is always a javascript bundle. From there, once in the client enviroment, the script triggers the method .load() (this is an API call that downloads ffmpeg-core.js from a CDN - the file occupies arround 25MB! That's the reason you trigger load() from the client with an async function). Afterwards the method instantiate a .wasm code (or session), all in the browser.
@@keteremillpario wow thats cool, thanks for share ^^
What theme are you using on the code editor?
Could this be used to record an animation in the client's browser given some pixel coordinates and dimensions, and let them save the output as an mp4?
Probably. developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture There's also a package called html2canvas but I think that just re-renders parts of the DOM, rather than actually capturing the display window.
Which framework you will be using for Rust WA?
1. Create react and react fiber in rust, then have a ui framework entirely in webassembly 2. Rewrite typescript in webassembly and have faster linting
1. You want to have core of React in wasm and an JS API? I'm not sure if the overhead due to the need for communication between JS and WASM (not just with the api, but WASM can't modify DOM, so it needs to call JS to do that). 2. There is a TS compiler in rust, SWC: swc.rs/ It's not WASM, but why would you run typescript compiler in the browser anyway? SWC is already used by Deno, though TSC still handles the actual typechecking (github.com/denoland/deno/issues/5432)
Awesome
🔥
hi I want to ask a question about using FFmpeg library with javascript and wasm is this can be work for me
Very valuable content! Thank you very much!
not working on crome v92....can you suggest how to set cors?
I cloned the repo and it gave me this error "SharedArrayBuffer is not defined"
Hi, I am interested and want to shoot in the same format as you, I would like to ask if you can take these lectures and translate them into my native Russian, with a note in the video that the original video is yours and leave links to your channel?
Why did you choose snowpack recently?
Good job
Where's the rust course mentioned at the end?
thanks very useful