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.
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...
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
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?
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 "
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?
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.
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 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!!
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
WASM decreased the size of the gap between the web and native substantially, but the lack of access to hardware encoders and decoders still remains an issue.
@@fltfathin it can’t. GPU implementations of video codecs are rarely faster than CPU implementations and when they are they need to be tuned for a specific model of GPU and require low level APIs like Vulkan and tweaks to the driver and probably even shader compiler. I would be extremely surprised if this was possible with WebGPU yet alone WebGL. But even those successful GPU implementations are still orders of magnitudes slower or less power efficient than ASICS.
The overhead of ffmpeg compiled to wasm is huge and converting a video to gif is not computational expensive. When it comes heavier tasks like encoding, ffmpeg in browser runs significantly slower. I think the title is a bit misleading or too ambitious as “video editing” is mostly frame encoding tasks which is not practical at all with the wasm build. The wasm build doesn’t have access to native gpu drivers and that will make process even slower than a native app, which is why nobody has ever tried to port an actual video editing software like Vegas or AE to the web because the performance would be 20x worse. But for simple tasks like converting video to gif, doing it on the frontend is fine I guess.
Uncaught TypeError: Failed to execute 'importScripts' on 'WorkerGlobalScope': This document requires 'TrustedScriptURL' assignment. Been getting this error. Any idea why?
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
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?
@@engineeringwithai As per this answer, there is no guarantee. stackoverflow.com/questions/28896028/do-javascript-memory-leaks-matter-after-a-page-refresh-why
@@ambarmutha8504 developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL The URL lifetime is tied to the document in the window on which it was created. as per MDN documentation it states its lifetime is for window.
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.
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.
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
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.
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 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 "
incase anyone's wondering how to downgrade the ffmpeg version
run `npm uninstall @ffmpeg/ffmpeg`
then run `npm install @ffmpeg/ffmpeg@0.9.0
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!!
Thank you very much
In your Rust to WASM video, I'd love to see some sort of visuals in rust port over to visuals on the browser
Hi Jeff, could you do a video on how to use 'raw' wasm code? In this video you use a wrapper javascript library.
Great stuff as always.
Still can't believe Nathan Fielder is this knowledgeable on web dev!
omg
How about Intro to AssemblyScript 🔥🔥
I don't know how you make this videos so interesting always!! Thank you, I think an AssemblyScript video will also be awesome.
Awesome work man
Been looking forward to this, Jeff! Definitely going to expand on this sometime in the future on my own project. Thanks!
I definitely asked for this video and you delivered, thanks a bunch! Great video as always Jeff, very very useful
Awesome video as usual! Really cool to see how to use all these things together!
This is awesome. Thank you for this great introduction to WA ❤
How 'bout a 2d Rust game compiled to WASM? The game could be a flappy bird clone.
up, that would be awesome
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!
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?
great stuff man, ty. now its really open my mind for WASM :D
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
@@iyxan23 Chrome-book would literally be Wasmbook
For some people, Windows is already just a bootloader for Chrome
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.
Finally most awaited video 🌟✨
I am fan of your way of telling things as they are very easy
Dude just accomplished my dream tool in under 8 minutes lmao
It seemed tough to build but you made it look so easy!
u r hero of making things look simple
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)
Amazing! More videos on WebAssembly please!
🔥🚀 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.
未看先讚啦！！！
Just what I was looking for 🔥
Oh I've watched a video about the chopped truck. THe bridge was elevated, but still choppin the trucks
This is sweet! I was thinking about using wasm to try to make a video editing tool on the web.
Thanks for this!! can't wait to dive wasm :D
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!!
Another really useful video, will try it with my open alpr project great work again.
Would love to see a vid about assembly script :)
Oh wow this one went way over my head
Can someone please help? I cannot move forward due to SharedBufferArray undefined error...
I faced same issue. How can i solved this
Wow! This is simply amazing! Everyone should see this! :)
Amazing! I can't wait to see more WASM content.
Really good music in the beginning 👌
These videos are gold. Thank you so much
That's what I am looking forward. I am also trying to develop custom rust code and covert it to WASM. That's cool.
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
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
excited for web assembly
Your videos are sooooo amazing I can't even tell
Back at it again!
Спасибо за видео, достаточно доступно излагаете.
slowly and slowly wasm is starting to tickle my curisoity
The future is now, old man!
This is helpful
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.
Webassembly is so crazy
Fire ship you truly are a god of tutorials
Hey Jeff, are you still planning to create the Rust to WASM tutorial? That would be super cool
coming first is really exciting
Amazing, WASM it's so powerful, i'll try this example.
I cloned the repo and it gave me this error "SharedArrayBuffer is not defined"
please update the wasm changed some functions and features like i can't able to use createFFmpeg
not working on crome v92....can you suggest how to set cors?
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.
FFmpeg is my favorite program
WASM decreased the size of the gap between the web and native substantially, but the lack of access to hardware encoders and decoders still remains an issue.
Wdym hardware encoder decoder? For video file? Or interfacing with hardware? For the second one, we have webusb/ webserial
@@fltfathin I should have been clearer. I mean for video.
@@ymi_yugy3133 thanks for clarifying, hardware video codec is indeed a problem, maybe can be alleviated by doing codec with webgl or the likes.
@@fltfathin it can’t. GPU implementations of video codecs are rarely faster than CPU implementations and when they are they need to be tuned for a specific model of GPU and require low level APIs like Vulkan and tweaks to the driver and probably even shader compiler. I would be extremely surprised if this was possible with WebGPU yet alone WebGL. But even those successful GPU implementations are still orders of magnitudes slower or less power efficient than ASICS.
Pumped to make this project!!
The overhead of ffmpeg compiled to wasm is huge and converting a video to gif is not computational expensive. When it comes heavier tasks like encoding, ffmpeg in browser runs significantly slower. I think the title is a bit misleading or too ambitious as “video editing” is mostly frame encoding tasks which is not practical at all with the wasm build. The wasm build doesn’t have access to native gpu drivers and that will make process even slower than a native app, which is why nobody has ever tried to port an actual video editing software like Vegas or AE to the web because the performance would be 20x worse. But for simple tasks like converting video to gif, doing it on the frontend is fine I guess.
Awesome tutorial . Please make a video converter using WASM and ffmpeg
Upload to GIPHY... which converts the GIF back to an MP4 file 😂
Well, that was pretty cool!
Idea: Add Tensorflow to have Text hovering over tracked objects
Please do a full course about webAssembly!
i keep getting this: Uncaught ReferenceError: createFFmpegCore is not defined I can't find a fix. Does anyone know how to fix it?
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)
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
Weird request, but can we have Reasonml in 100 seconds?
Your videos are great by the way!
The code at 8:01 is mindblowing :O
Great video by the way!
? 8:01 is the end
Wow! Thank you!
Great video as always. I heard you say Rust 😍😋
Uncaught TypeError: Failed to execute 'importScripts' on 'WorkerGlobalScope': This document requires 'TrustedScriptURL' assignment.
Been getting this error. Any idea why?
This video is not about WASM. It is about using FFmpeg which is already wrapped to be used in JS.
This is really cool!
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
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?
Alternative title: How to create a memory leak by not revoking object URLs.
it gets removed on page close right?
now all the C/C++ pointer, memory issues will occurs much more easier on the Web
@@engineeringwithai Yes. But that's not a good reason to be sloppy while developing web apps.
@@engineeringwithai As per this answer, there is no guarantee. stackoverflow.com/questions/28896028/do-javascript-memory-leaks-matter-after-a-page-refresh-why
@@ambarmutha8504 developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
The URL lifetime is tied to the document in the window on which it was created.
as per MDN documentation it states its lifetime is for window.
can you make a video turorial how to make a video trim function with react and ffmpeg?? please
Where's the rust course mentioned at the end?
Hi, great video
Can I use this inside a webWorker?
Next level stuff
hey, hey thank you , i mean it ...sensei🤗😘😘😘😁 yah i need this, download
You're a legend!
Thank You so much!!!
What theme are you using on the code editor?
Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined, getting this error
Please make a tutorial to Compile c and c++ to wasm
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 ^^