WASM + React... Easily build video editing software with JS & FFmpeg

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

[@jakobarsement8266]

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.

[@thomasjardanedeoliveirabou9993]

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

[@Vishnu-oo4gh]

@@yotubecreators47 wow thank you!

[@batmanatkinson1188]

is it also disabled on Apple M1?

[@ABDTalk1]

@@yotubecreators47JavaFX is so good though

[@BelugaSam]

@@yotubecreators47 is their any solution for vue too?

[@irahazda]

Thank you man. Saved my time.

[@Apoorvpandey]

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 "

[@acollierr17]

Been looking forward to this, Jeff! Definitely going to expand on this sometime in the future on my own project. Thanks!

[@edwincarlsson9014]

I’ve been looking forward to this!

[@Fireship]

Me too, but more WASM content on coming soon :)

[@DrSwad]

Awesome work man

[@mikemartire1612]

I definitely asked for this video and you delivered, thanks a bunch! Great video as always Jeff, very very useful

[@joaovaz3473]

What people see: WASM allows one to run server tasks on the client What I see: serverless SQL injection

[@jorgekunrath1016]

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

[@joaovaz3473]

@@jorgekunrath1016 it was originally a joke. But now, re-thinking about it... you've got a point!

[@jorgekunrath1016]

@@joaovaz3473 cool joke tho and thanks ^^

[@Fireship]

Good way to practice your hacking skills before taking them to a real server.

[@myxmad800]

@@Fireship buddy what file icon theme do you use pls state it

[@miguel_bogota]

I don't know how you make this videos so interesting always!! Thank you, I think an AssemblyScript video will also be awesome.

[@CodeWithAndrea]

Awesome video as usual! Really cool to see how to use all these things together!

[@YahirTrejo]

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?

[@Fireship]

Yes, working on a React-Firebase course :)

[@kordoulakis]

@@Fireship It'll be the first time I've bought a course then

[@YahirTrejo]

@@Fireship Great! Looking forward to it!

[@wizamit]

This is awesome. Thank you for this great introduction to WA ❤

[@yampolskie]

It seemed tough to build but you made it look so easy!

[@OBLIVIOUSKARI]

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

[@prashoonbhattacharjee8211]

This tutorial is fantastic!! Got a lot of value from this tutorial!!

[@NicolaiWeitkemper]

Amazing! I can't wait to see more WASM content.

[@davidhusicka8440]

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!

[@jessejordan8569]

Great stuff as always. Still can't believe Nathan Fielder is this knowledgeable on web dev!

[@Monogrammaton]

omg

[@aminehl6025]

Thank you very much

[@MrChernicharo]

Amazing! More videos on WebAssembly please!

[@ridl27]

great stuff man, ty. now its really open my mind for WASM :D

[@jaforewit]

In your Rust to WASM video, I'd love to see some sort of visuals in rust port over to visuals on the browser

[@WrongAkram]

This is sweet! I was thinking about using wasm to try to make a video editing tool on the web.

[@parikshitthale7708]

How about Intro to AssemblyScript 🔥🔥

[@amanraj1608]

Finally most awaited video 🌟✨

[@rubenpoppe]

Hi Jeff, could you do a video on how to use 'raw' wasm code? In this video you use a wrapper javascript library.

[@HenokWehibe]

Another really useful video, will try it with my open alpr project great work again.

[@HackUniversity]

Wow! This is simply amazing! Everyone should see this! :)

[@user-eb4jr3qr5h]

Just what I was looking for 🔥

[@theseriouslook]

I am fan of your way of telling things as they are very easy

[@ChunkyChest]

Thanks for this!! can't wait to dive wasm :D

[@prashoonbhattacharjee8211]

Pumped to make this project!!

[@DodaGarcia]

Oh wow this one went way over my head

[@djcardwellai]

These videos are gold. Thank you so much

[@vietnamnguyen369]

That's what I am looking forward. I am also trying to develop custom rust code and covert it to WASM. That's cool.

[@ShafterPlay]

Your videos are sooooo amazing I can't even tell

[@TheRanguna]

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!!

[@uniqhnd23]

Really good music in the beginning 👌

[@aryanmn1569]

u r hero of making things look simple

[@omegaomar29]

Amazing, WASM it's so powerful, i'll try this example.

[@daksmemes7428]

excited for web assembly

[@DaggieBlanqx]

Wow! Thank you!

[@fevicoI]

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.

[@MatthewTaylor86]

Wait until you hear about Chromebooks 🤣

[@fevicoI]

@@MatthewTaylor86 those are awful

[@iyxan2340]

Linux, WASM edition :p

[@fevicoI]

@@iyxan2340 Chrome-book would literally be Wasmbook

[@nhat4359]

For some people, Windows is already just a bootloader for Chrome

[@aaron32190]

Would love to see a vid about assembly script :)

[@AB3D-tutorials]

This is really cool!

[@jaimerojas6578]

Well, that was pretty cool!

[@pro-nav]

coming first is really exciting

[@SpaghettDev]

Back at it again!

[@dibaliba]

🔥🚀 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. 未看先讚啦！！！

[@captainlennyjapan27]

Can someone please help? I cannot move forward due to SharedBufferArray undefined error...

[@samiurrahmanmukul]

I faced same issue. How can i solved this

[@sumukhakb2701]

Awesome tutorial . Please make a video converter using WASM and ffmpeg

[@Abhinavkmr]

Thank You so much!!!

[@amoldalwai3961]

3:53 great way to add a preloader ,never thought of it that way

[@Fireship]

You can also use React Suspense for things like that, but that's a topic for another video...

[@DrSwad]

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.

[@amoldalwai3961]

@@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?

[@dj_256]

Dude just accomplished my dream tool in under 8 minutes lmao

[@rand0mtv660]

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.

[@CodingUnited]

How 'bout a 2d Rust game compiled to WASM? The game could be a flappy bird clone.

[@ursochurrasqueira]

up, that would be awesome

[@martinmaldonado4923]

You're a legend!

[@manvendrasingh4556]

please update the wasm changed some functions and features like i can't able to use createFFmpeg

[@aspiringpro]

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?

[@sridharkatta3461]

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.

[@Daimyo7]

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.

[@brucewayne2480]

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)

[@ikezedev]

Great video as always. I heard you say Rust 😍😋

[@TheEtsgp1]

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

[@rishabhanand4270]

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

[@jamesxu4538]

Oh I've watched a video about the chopped truck. THe bridge was elevated, but still choppin the trucks

[@nithinchinni]

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

[@PTM1008]

Next level stuff

[@malikmouhiidine9828]

Please do a full course about webAssembly!

[@andor1904]

Awesome

[@OBLIVIOUSKARI]

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

[@timkelly9886]

Hey Jeff, are you still planning to create the Rust to WASM tutorial? That would be super cool

[@JeremyChone]

Good vid. Curious to know the licensing restriction for this type of "distribution."

[@katech6020]

FFMPEG is a FOSS tool, so it is not a problem in this case. but in other cases, I get what do you mean

[@nadico5740]

Hi, great video Can I use this inside a webWorker?

[@Iglum]

FFmpeg is my favorite program

[@Janman81]

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?

[@DFPercush]

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.

[@thanhphongtran2263]

can you make a video turorial how to make a video trim function with react and ffmpeg?? please

[@tippy_]

slowly and slowly wasm is starting to tickle my curisoity

[@NicoZadeh]

What theme are you using on the code editor?

[@VeryBlueBot]

thanks very useful

[@Damfler]

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?

[@imadharile2151]

hi I want to ask a question about using FFmpeg library with javascript and wasm is this can be work for me

[@supremelizard946]

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

[@nathandaven]

Webassembly is so crazy

[@vaxo2210]

Can you do a video on the web assembly file system?

[@gofudgeyourselves9024]

Which framework you will be using for Rust WA?

[@kevinbatdorf]

Where's the rust course mentioned at the end?

[@albertbennett6290]

Weird request, but can we have Reasonml in 100 seconds? Your videos are great by the way!

[@alejkun4923]

Idea: Add Tensorflow to have Text hovering over tracked objects

[@keteremillpario]

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.

[@jorgekunrath1016]

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

[@keteremillpario]

​@@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.

[@jorgekunrath1016]

@@keteremillpario wow thats cool, thanks for share ^^

[@tuananhngyen2985]

i am wondering how to get the GIF file after being converted, could you please you explain this in details ?

[@nadawhoever]

I cloned the repo and it gave me this error "SharedArrayBuffer is not defined"

[@bickbalsy]

Love it

[@surbhigoel7062]

not working on crome v92....can you suggest how to set cors?

[@poopoo888888]

Very valuable content! Thank you very much!

[@fevicoI]

Uncaught TypeError: Failed to execute 'importScripts' on 'WorkerGlobalScope': This document requires 'TrustedScriptURL' assignment. Been getting this error. Any idea why?

[@gogoikabir]

🔥

[@tegaogheneovo5881]

hey, hey thank you , i mean it ...sensei🤗😘😘😘😁 yah i need this, download

[@justafreak15able]

Why did you choose snowpack recently?

[@JustCode39]

noice!