Use Web Assembly to build an app that converts video files to GIF (using FFmpeg), entirely from a frontend React JavaScript application. https://fireship.io/lessons/wasm-video-to-gif/

Source Code: https://github.com/fireship-io/react-wasm-gif-maker
FFmpeg.wasm https://ffmpegwasm.github.io/

#wasm #webdev #tutorial

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T06:02:58.356Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
39f3c288-aa17-4adc-8396-79418dd90071
e4fc8bc6515e1ad72585d721d4bb7b4ba46e6076198ed1d55f936704284fb6fc
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
WebAssembly opens the door to building high performance applications on the web and languages other than JavaScript.
In today's video, we'll build a simple video editing tool that can take a video file and convert it to an animated GIF.
The cool thing about this demo is that it's made possible by a library called f f mpeg, which is a utility written in the c programming language.
But But thanks to WebAssembly, we can run this tool directly in the browser.
And that means we can perform CPU intensive video editing jobs without the need for a back end server.
For example, here's how a traditional web application might work.
We collect a video file from the end user, then upload it to the cloud.
We use our cloud server to run FFmpeg to encode the file, then send it back down to the client.
That works fine, but it's not very efficient.
And it also has no way to work offline if you're building a progressive web app.
What we'll do in this video is download the web assembly binary for FFmpeg directly into a React app, allowing us to combine the c programming language with JavaScript and offload the video editing work to the end user's hardware.
If you're new here, like and subscribe, and follow along with the full write up and source code on FireShip IO.
And if you have no idea what web assembly is, check out my 100 second breakdown on that topic.
This tutorial is very beginner friendly and doesn't require that you know anything about the c programming language.
That's because the ffmpeg.wasm package provides an API and JavaScript to interact with this low level utility.
Now before we jump into the code, let's take a closer look at the demo.
We have a file input where we can select a video file.
The video can be previewed in a video element, then when you click the convert button, it runs f f mpeg to load the video file into memory and run the conversion.
Very simple stuff, but my main goal here is to give you a starting point for building more complex features through the magic of web assembly.
To get things started, I'm generating a new React app using Snowpack.
And keep in mind here, the code is very simple, so feel free to follow along with any other framework.
Then from inside your project, you'll want to install the following packages from the ffmpeg namespace.
And lastly, you can run npm start, which should give you the default React app running in the browser.
From there, we'll go into the source directory and open the app JS file.
I'm gonna go ahead and delete all the boilerplate code, leaving us with a basic starting point.
From there, I'm going to import 2 functions from the FFmpeg namespace.
The first function, create ffmpeg, we can call right away, which gives us a starting point for working with this library.
We'll set the log option to true so we can see everything that it does directly play in the console.
Now it's important to understand at this point that the actual web assembly binary has not been bundled in our application.
It's a pretty large file, so we don't want it to block our web application right away.
Instead, we load it asynchronously over a CDN.
To keep track of the loading state, I'll go ahead and add a stateful property here called ready with the use state hook.
It has a default value of false, and then we'll create an async function here called load that can flip it to true after the binary has been loaded.
The function awaits the FFmpeg load promise.
And once loaded, we can flip the ready state to true.
And now we just need a place to call this function.
In React, we can do that with the use effect hook to run this function when the component is first initialized.
Use effect takes a function as its argument.
Then notice how I'm adding an empty array as the second argument.
This will ensure that the function is only called once when the component is first initialized or mounted.
Then inside the effect, we can simply call our load function.
If you go ahead and save the file and open up the browser, you should get a blank page.
But in the console, you'll notice that FFmpeg core is being loaded in the background.
In fact, if we go over to the sources tab, you can inspect the actual web assembly code there.
You don't need to understand what any of this code means, but it is useful to know that this originally started as the c programming language and then was compiled over to WebAssembly.
What we're looking at here is the web assembly text, which is an intermediate format before it becomes binary or ones and zeros.
Now back in the source code, we'll go into our JSX, and then we'll use the ternary operator with our ready state.
If the app's ready, we'll show the main UI.
Otherwise, we'll just show the text of loading.
Now our next challenge is loading a video file into the application and also showing it in a video player in the UI.
The first step is to add additional state to the component.
In this case, a video file, which will initially start undefined.
In the HTML, we can add an input element with a type of file.
When this input changes, we'll run an event handler that will set the video state and it gets the actual file from the event.
The event emits a file list and then we use item 0 to select the first file from that list.
Now that we have access to a video file, we want to display it in an HTML video element.
We'll use a logical and operator to only show the video when the video file is defined.
The element has controls, a width of 250, But a tricky thing here is that we can't just pass the raw file to the source attribute.
We need to convert it to a URL that the browser can fetch.
We can handle that by using the URL interface and then calling its create object URL method, which takes the file object as its argument.
If we go ahead and open up the demo, we should now be able to choose a file on our system and then have that file displayed in the video player.
And now we're ready for the fun part, using FFmpeg and WebAssembly to modify this video file or, in our case, convert the file to an animated GIF.
The first thing we'll do here is add one more piece of state to the component called GIF, and it will be used to hold the end result, which is a URL of an image file.
From there, we'll create a function called convert to GIF, which the user can run when they're ready to make the conversion.
Now one thing to understand here is that WebAssembly is managing its own in memory file system.
And in order to run FFmpeg on that file, we need to make it known to that file system.
We can do that by calling f s or file system along with the right file method, along with the name of the file, and then we fetch the actual video file that we've collected from the end user.
What we've done is taken the video file and saved it to a place in memory as test dot m p 4.
They can be now accessed by WebAssembly while it's in memory, and it only stays in memory until the browser is refreshed.
From there, we can run an actual f f mpeg command.
If you're not familiar with utility.
It's a command line tool that can perform all kinds of video editing jobs.
It's been around for a very long time and you can check out the full documentation to get an idea of what it can do.
We can run the command by simply passing arguments that we would normally pass to the command line.
The I flag is for the input file.
The t flag is for the time that we want the length of the video to be.
We can offset it with starting seconds, then we use the f flag to encode it as a GIF file.
When that's complete, it will write the result to memory, and then we can access it by again using the file system command this time to read a file called out dot gif.
We then need to convert the file data into a URL that can be used in the browser.
Once again, we'll use URL create object URL, and as its argument, will create a new blob.
Blob is kind of a scary word, but it just means a raw file, which in this case is the binary that we can access from the data buffer.
It's also a good idea to pass a second argument with the MIME type of the object, which in this case is a GIF image.
And lastly, we take that URL and update the state of the component.
From there, we just have a couple of simple updates to make to the UI.
We'll go down here and add a button that when clicked will run the convert to get function and then we'll add an image tag that's only displayed when we have the GIF URL.
You should now be able to open up your demo, select a video file, Then when you click the convert button, it uses web assembly to convert that file to an animated GIF, and it should log the entire process here in the console.
You could then take this file and upload it to Giphy or use it on Twitter or whatever you want.
And that's how easy it is to start incorporating WebAssembly into your web applications.
I'm gonna go ahead and wrap things up there, but in the near future, I plan on making a video about how to take your own custom rust code and convert it to web assembly to be used in the browser.
And if you have any ideas, please let me know in the comments.
If you want to learn more and support my work, consider becoming a pro member at FireShip I o.
Thanks for watching and I will see you in the next one.

Speaker 0: WebAssembly opens the door to building high performance applications on the web and languages other than JavaScript. In today's video, we'll build a simple video editing tool that can take a video file and convert it to an animated GIF. The cool thing about this demo is that it's made possible by a library called f f mpeg, which is a utility written in the c programming language. But But thanks to WebAssembly, we can run this tool directly in the browser. And that means we can perform CPU intensive video editing jobs without the need for a back end server.

For example, here's how a traditional web application might work. We collect a video file from the end user, then upload it to the cloud. We use our cloud server to run FFmpeg to encode the file, then send it back down to the client. That works fine, but it's not very efficient. And it also has no way to work offline if you're building a progressive web app.

What we'll do in this video is download the web assembly binary for FFmpeg directly into a React app, allowing us to combine the c programming language with JavaScript and offload the video editing work to the end user's hardware. If you're new here, like and subscribe, and follow along with the full write up and source code on FireShip IO. And if you have no idea what web assembly is, check out my 100 second breakdown on that topic. This tutorial is very beginner friendly and doesn't require that you know anything about the c programming language. That's because the ffmpeg.wasm package provides an API and JavaScript to interact with this low level utility.

Now before we jump into the code, let's take a closer look at the demo. We have a file input where we can select a video file. The video can be previewed in a video element, then when you click the convert button, it runs f f mpeg to load the video file into memory and run the conversion. Very simple stuff, but my main goal here is to give you a starting point for building more complex features through the magic of web assembly. To get things started, I'm generating a new React app using Snowpack.

And keep in mind here, the code is very simple, so feel free to follow along with any other framework. Then from inside your project, you'll want to install the following packages from the ffmpeg namespace. And lastly, you can run npm start, which should give you the default React app running in the browser. From there, we'll go into the source directory and open the app JS file. I'm gonna go ahead and delete all the boilerplate code, leaving us with a basic starting point.

From there, I'm going to import 2 functions from the FFmpeg namespace. The first function, create ffmpeg, we can call right away, which gives us a starting point for working with this library. We'll set the log option to true so we can see everything that it does directly play in the console. Now it's important to understand at this point that the actual web assembly binary has not been bundled in our application. It's a pretty large file, so we don't want it to block our web application right away.

Instead, we load it asynchronously over a CDN. To keep track of the loading state, I'll go ahead and add a stateful property here called ready with the use state hook. It has a default value of false, and then we'll create an async function here called load that can flip it to true after the binary has been loaded. The function awaits the FFmpeg load promise. And once loaded, we can flip the ready state to true.

And now we just need a place to call this function. In React, we can do that with the use effect hook to run this function when the component is first initialized. Use effect takes a function as its argument. Then notice how I'm adding an empty array as the second argument. This will ensure that the function is only called once when the component is first initialized or mounted.

Then inside the effect, we can simply call our load function. If you go ahead and save the file and open up the browser, you should get a blank page. But in the console, you'll notice that FFmpeg core is being loaded in the background. In fact, if we go over to the sources tab, you can inspect the actual web assembly code there. You don't need to understand what any of this code means, but it is useful to know that this originally started as the c programming language and then was compiled over to WebAssembly.

What we're looking at here is the web assembly text, which is an intermediate format before it becomes binary or ones and zeros. Now back in the source code, we'll go into our JSX, and then we'll use the ternary operator with our ready state. If the app's ready, we'll show the main UI. Otherwise, we'll just show the text of loading. Now our next challenge is loading a video file into the application and also showing it in a video player in the UI.

The first step is to add additional state to the component. In this case, a video file, which will initially start undefined. In the HTML, we can add an input element with a type of file. When this input changes, we'll run an event handler that will set the video state and it gets the actual file from the event. The event emits a file list and then we use item 0 to select the first file from that list.

Now that we have access to a video file, we want to display it in an HTML video element. We'll use a logical and operator to only show the video when the video file is defined. The element has controls, a width of 250, But a tricky thing here is that we can't just pass the raw file to the source attribute. We need to convert it to a URL that the browser can fetch. We can handle that by using the URL interface and then calling its create object URL method, which takes the file object as its argument.

If we go ahead and open up the demo, we should now be able to choose a file on our system and then have that file displayed in the video player. And now we're ready for the fun part, using FFmpeg and WebAssembly to modify this video file or, in our case, convert the file to an animated GIF. The first thing we'll do here is add one more piece of state to the component called GIF, and it will be used to hold the end result, which is a URL of an image file. From there, we'll create a function called convert to GIF, which the user can run when they're ready to make the conversion. Now one thing to understand here is that WebAssembly is managing its own in memory file system.

And in order to run FFmpeg on that file, we need to make it known to that file system. We can do that by calling f s or file system along with the right file method, along with the name of the file, and then we fetch the actual video file that we've collected from the end user. What we've done is taken the video file and saved it to a place in memory as test dot m p 4. They can be now accessed by WebAssembly while it's in memory, and it only stays in memory until the browser is refreshed. From there, we can run an actual f f mpeg command.

If you're not familiar with utility. It's a command line tool that can perform all kinds of video editing jobs. It's been around for a very long time and you can check out the full documentation to get an idea of what it can do. We can run the command by simply passing arguments that we would normally pass to the command line. The I flag is for the input file.

The t flag is for the time that we want the length of the video to be. We can offset it with starting seconds, then we use the f flag to encode it as a GIF file. When that's complete, it will write the result to memory, and then we can access it by again using the file system command this time to read a file called out dot gif. We then need to convert the file data into a URL that can be used in the browser. Once again, we'll use URL create object URL, and as its argument, will create a new blob.

Blob is kind of a scary word, but it just means a raw file, which in this case is the binary that we can access from the data buffer. It's also a good idea to pass a second argument with the MIME type of the object, which in this case is a GIF image. And lastly, we take that URL and update the state of the component. From there, we just have a couple of simple updates to make to the UI. We'll go down here and add a button that when clicked will run the convert to get function and then we'll add an image tag that's only displayed when we have the GIF URL.

You should now be able to open up your demo, select a video file, Then when you click the convert button, it uses web assembly to convert that file to an animated GIF, and it should log the entire process here in the console. You could then take this file and upload it to Giphy or use it on Twitter or whatever you want. And that's how easy it is to start incorporating WebAssembly into your web applications. I'm gonna go ahead and wrap things up there, but in the near future, I plan on making a video about how to take your own custom rust code and convert it to web assembly to be used in the browser. And if you have any ideas, please let me know in the comments.

If you want to learn more and support my work, consider becoming a pro member at FireShip I o. Thanks for watching and I will see you in the next one.
WebAssembly opens the door to building high performance applications on the web and languages other than JavaScript. In today's video, we'll build a simple video editing tool that can take a video file and convert it to an animated GIF. The cool thing about this demo is that it's made possible by a library called f f mpeg, which is a utility written in the c programming language. But But thanks to WebAssembly, we can run this tool directly in the browser. And that means we can perform CPU intensive video editing jobs without the need for a back end server. For example, here's how a traditional web application might work. We collect a video file from the end user, then upload it to the cloud. We use our cloud server to run FFmpeg to encode the file, then send it back down to the client. That works fine, but it's not very efficient. And it also has no way to work offline if you're building a progressive web app. What we'll do in this video is download the web assembly binary for FFmpeg directly into a React app, allowing us to combine the c programming language with JavaScript and offload the video editing work to the end user's hardware. If you're new here, like and subscribe, and follow along with the full write up and source code on FireShip IO. And if you have no idea what web assembly is, check out my 100 second breakdown on that topic. This tutorial is very beginner friendly and doesn't require that you know anything about the c programming language. That's because the ffmpeg.wasm package provides an API and JavaScript to interact with this low level utility. Now before we jump into the code, let's take a closer look at the demo. We have a file input where we can select a video file. The video can be previewed in a video element, then when you click the convert button, it runs f f mpeg to load the video file into memory and run the conversion. Very simple stuff, but my main goal here is to give you a starting point for building more complex features through the magic of web assembly. To get things started, I'm generating a new React app using Snowpack. And keep in mind here, the code is very simple, so feel free to follow along with any other framework.
video gaming
multimedia
visualization
software development
software
streaming
youtube
programming
computer science
animation
Then from inside your project, you'll want to install the following packages from the ffmpeg namespace. And lastly, you can run npm start, which should give you the default React app running in the browser. From there, we'll go into the source directory and open the app JS file. I'm gonna go ahead and delete all the boilerplate code, leaving us with a basic starting point. From there, I'm going to import 2 functions from the FFmpeg namespace. The first function, create ffmpeg, we can call right away, which gives us a starting point for working with this library. We'll set the log option to true so we can see everything that it does directly play in the console. Now it's important to understand at this point that the actual web assembly binary has not been bundled in our application. It's a pretty large file, so we don't want it to block our web application right away. Instead, we load it asynchronously over a CDN.
To keep track of the loading state, I'll go ahead and add a stateful property here called ready with the use state hook. It has a default value of false, and then we'll create an async function here called load that can flip it to true after the binary has been loaded.
programming
The function awaits the FFmpeg load promise. And once loaded, we can flip the ready state to true. And now we just need a place to call this function. In React, we can do that with the use effect hook to run this function when the component is first initialized. Use effect takes a function as its argument. Then notice how I'm adding an empty array as the second argument. This will ensure that the function is only called once when the component is first initialized or mounted.
Then inside the effect, we can simply call our load function. If you go ahead and save the file and open up the browser, you should get a blank page. But in the console, you'll notice that FFmpeg core is being loaded in the background. In fact, if we go over to the sources tab, you can inspect the actual web assembly code there. You don't need to understand what any of this code means, but it is useful to know that this originally started as the c programming language and then was compiled over to WebAssembly. What we're looking at here is the web assembly text, which is an intermediate format before it becomes binary or ones and zeros. Now back in the source code, we'll go into our JSX, and then we'll use the ternary operator with our ready state. If the app's ready, we'll show the main UI. Otherwise, we'll just show the text of loading. Now our next challenge is loading a video file into the application and also showing it in a video player in the UI. The first step is to add additional state to the component.
programming
multimedia
video gaming
streaming
In this case, a video file, which will initially start undefined. In the HTML, we can add an input element with a type of file.
When this input changes, we'll run an event handler that will set the video state and it gets the actual file from the event. The event emits a file list and then we use item 0 to select the first file from that list. Now that we have access to a video file, we want to display it in an HTML video element. We'll use a logical and operator to only show the video when the video file is defined. The element has controls, a width of 250, But a tricky thing here is that we can't just pass the raw file to the source attribute.
video gaming
youtube
streaming
multimedia
We need to convert it to a URL that the browser can fetch. We can handle that by using the URL interface and then calling its create object URL method, which takes the file object as its argument.
If we go ahead and open up the demo, we should now be able to choose a file on our system and then have that file displayed in the video player. And now we're ready for the fun part, using FFmpeg and WebAssembly to modify this video file or, in our case, convert the file to an animated GIF. The first thing we'll do here is add one more piece of state to the component called GIF, and it will be used to hold the end result, which is a URL of an image file.
multimedia
video gaming
animation
youtube
streaming
From there, we'll create a function called convert to GIF, which the user can run when they're ready to make the conversion. Now one thing to understand here is that WebAssembly is managing its own in memory file system. And in order to run FFmpeg on that file, we need to make it known to that file system. We can do that by calling f s or file system along with the right file method, along with the name of the file, and then we fetch the actual video file that we've collected from the end user. What we've done is taken the video file and saved it to a place in memory as test dot m p 4. They can be now accessed by WebAssembly while it's in memory, and it only stays in memory until the browser is refreshed. From there, we can run an actual f f mpeg command. If you're not familiar with utility. It's a command line tool that can perform all kinds of video editing jobs. It's been around for a very long time and you can check out the full documentation to get an idea of what it can do.
video gaming
streaming
multimedia
youtube
software development
We can run the command by simply passing arguments that we would normally pass to the command line. The I flag is for the input file. The t flag is for the time that we want the length of the video to be. We can offset it with starting seconds, then we use the f flag to encode it as a GIF file. When that's complete, it will write the result to memory, and then we can access it by again using the file system command this time to read a file called out dot gif. We then need to convert the file data into a URL that can be used in the browser. Once again, we'll use URL create object URL, and as its argument, will create a new blob. Blob is kind of a scary word, but it just means a raw file, which in this case is the binary that we can access from the data buffer. It's also a good idea to pass a second argument with the MIME type of the object, which in this case is a GIF image. And lastly, we take that URL and update the state of the component. From there, we just have a couple of simple updates to make to the UI. We'll go down here and add a button that when clicked will run the convert to get function and then we'll add an image tag that's only displayed when we have the GIF URL.
You should now be able to open up your demo, select a video file, Then when you click the convert button, it uses web assembly to convert that file to an animated GIF, and it should log the entire process here in the console. You could then take this file and upload it to Giphy or use it on Twitter or whatever you want.
multimedia
animation
youtube
software
streaming
And that's how easy it is to start incorporating WebAssembly into your web applications. I'm gonna go ahead and wrap things up there, but in the near future, I plan on making a video about how to take your own custom rust code and convert it to web assembly to be used in the browser.
And if you have any ideas, please let me know in the comments. If you want to learn more and support my work, consider becoming a pro member at FireShip I o. Thanks for watching and I will see you in the next one.
leadership
WebAssembly opens the door to building high performance applications on the web and languages other than JavaScript. In today's video, we'll build a simple video editing tool that can take a video file and convert it to an animated GIF. The cool thing about this demo is that it's made possible by a library called f f mpeg, which is a utility written in the c programming language. But But thanks to WebAssembly, we can run this tool directly in the browser. And that means we can perform CPU intensive video editing jobs without the need for a back end server. For example, here's how a traditional web application might work. We collect a video file from the end user, then upload it to the cloud. We use our cloud server to run FFmpeg to encode the file, then send it back down to the client. That works fine, but it's not very efficient. And it also has no way to work offline if you're building a progressive web app. What we'll do in this video is download the web assembly binary for FFmpeg directly into a React app, allowing us to combine the c programming language with JavaScript and offload the video editing work to the end user's hardware. If you're new here, like and subscribe, and follow along with the full write up and source code on FireShip IO. And if you have no idea what web assembly is, check out my 100 second breakdown on that topic. This tutorial is very beginner friendly and doesn't require that you know anything about the c programming language. That's because the ffmpeg.wasm package provides an API and JavaScript to interact with this low level utility. Now before we jump into the code, let's take a closer look at the demo. We have a file input where we can select a video file. The video can be previewed in a video element, then when you click the convert button, it runs f f mpeg to load the video file into memory and run the conversion. Very simple stuff, but my main goal here is to give you a starting point for building more complex features through the magic of web assembly. To get things started, I'm generating a new React app using Snowpack. And keep in mind here, the code is very simple, so feel free to follow along with any other framework. Then from inside your project, you'll want to install the following packages from the ffmpeg namespace. And lastly, you can run npm start, which should give you the default React app running in the browser. From there, we'll go into the source directory and open the app JS file. I'm gonna go ahead and delete all the boilerplate code, leaving us with a basic starting point. From there, I'm going to import 2 functions from the FFmpeg namespace. The first function, create ffmpeg, we can call right away, which gives us a starting point for working with this library. We'll set the log option to true so we can see everything that it does directly play in the console. Now it's important to understand at this point that the actual web assembly binary has not been bundled in our application. It's a pretty large file, so we don't want it to block our web application right away. Instead, we load it asynchronously over a CDN. To keep track of the loading state, I'll go ahead and add a stateful property here called ready with the use state hook. It has a default value of false, and then we'll create an async function here called load that can flip it to true after the binary has been loaded. The function awaits the FFmpeg load promise. And once loaded, we can flip the ready state to true. And now we just need a place to call this function. In React, we can do that with the use effect hook to run this function when the component is first initialized. Use effect takes a function as its argument. Then notice how I'm adding an empty array as the second argument. This will ensure that the function is only called once when the component is first initialized or mounted. Then inside the effect, we can simply call our load function. If you go ahead and save the file and open up the browser, you should get a blank page. But in the console, you'll notice that FFmpeg core is being loaded in the background. In fact, if we go over to the sources tab, you can inspect the actual web assembly code there. You don't need to understand what any of this code means, but it is useful to know that this originally started as the c programming language and then was compiled over to WebAssembly. What we're looking at here is the web assembly text, which is an intermediate format before it becomes binary or ones and zeros. Now back in the source code, we'll go into our JSX, and then we'll use the ternary operator with our ready state. If the app's ready, we'll show the main UI. Otherwise, we'll just show the text of loading. Now our next challenge is loading a video file into the application and also showing it in a video player in the UI. The first step is to add additional state to the component. In this case, a video file, which will initially start undefined. In the HTML, we can add an input element with a type of file. When this input changes, we'll run an event handler that will set the video state and it gets the actual file from the event. The event emits a file list and then we use item 0 to select the first file from that list. Now that we have access to a video file, we want to display it in an HTML video element. We'll use a logical and operator to only show the video when the video file is defined. The element has controls, a width of 250, But a tricky thing here is that we can't just pass the raw file to the source attribute. We need to convert it to a URL that the browser can fetch. We can handle that by using the URL interface and then calling its create object URL method, which takes the file object as its argument. If we go ahead and open up the demo, we should now be able to choose a file on our system and then have that file displayed in the video player. And now we're ready for the fun part, using FFmpeg and WebAssembly to modify this video file or, in our case, convert the file to an animated GIF. The first thing we'll do here is add one more piece of state to the component called GIF, and it will be used to hold the end result, which is a URL of an image file. From there, we'll create a function called convert to GIF, which the user can run when they're ready to make the conversion. Now one thing to understand here is that WebAssembly is managing its own in memory file system. And in order to run FFmpeg on that file, we need to make it known to that file system. We can do that by calling f s or file system along with the right file method, along with the name of the file, and then we fetch the actual video file that we've collected from the end user. What we've done is taken the video file and saved it to a place in memory as test dot m p 4. They can be now accessed by WebAssembly while it's in memory, and it only stays in memory until the browser is refreshed. From there, we can run an actual f f mpeg command. If you're not familiar with utility. It's a command line tool that can perform all kinds of video editing jobs. It's been around for a very long time and you can check out the full documentation to get an idea of what it can do. We can run the command by simply passing arguments that we would normally pass to the command line. The I flag is for the input file. The t flag is for the time that we want the length of the video to be. We can offset it with starting seconds, then we use the f flag to encode it as a GIF file. When that's complete, it will write the result to memory, and then we can access it by again using the file system command this time to read a file called out dot gif. We then need to convert the file data into a URL that can be used in the browser. Once again, we'll use URL create object URL, and as its argument, will create a new blob. Blob is kind of a scary word, but it just means a raw file, which in this case is the binary that we can access from the data buffer. It's also a good idea to pass a second argument with the MIME type of the object, which in this case is a GIF image. And lastly, we take that URL and update the state of the component. From there, we just have a couple of simple updates to make to the UI. We'll go down here and add a button that when clicked will run the convert to get function and then we'll add an image tag that's only displayed when we have the GIF URL. You should now be able to open up your demo, select a video file, Then when you click the convert button, it uses web assembly to convert that file to an animated GIF, and it should log the entire process here in the console. You could then take this file and upload it to Giphy or use it on Twitter or whatever you want. And that's how easy it is to start incorporating WebAssembly into your web applications. I'm gonna go ahead and wrap things up there, but in the near future, I plan on making a video about how to take your own custom rust code and convert it to web assembly to be used in the browser. And if you have any ideas, please let me know in the comments. If you want to learn more and support my work, consider becoming a pro member at FireShip I o. Thanks for watching and I will see you in the next one.
WebAssembly
webassembly
opens
opens
the
the
door
door
to
to
building
building
high
high
performance
performance
applications
applications
on
on
the
the
web
web
and
and
languages
languages
other
other
than
than
JavaScript.
javascript
In
in
today's
today's
video,
video
we'll
we'll
build
build
a
a
simple
simple
video
video
editing
editing
tool
tool
that
that
can
can
take
take
a
a
video
video
file
file
and
and
convert
convert
it
it
to
to
an
an
animated
animated
GIF.
gif
The
the
cool
cool
thing
thing
about
about
this
this
demo
demo
is
is
that
that
it's
it's
made
made
possible
possible
by
by
a
a
library
library
called
called
f
f
f
f
mpeg,
mpeg
which
which
is
is
a
a
utility
utility
written
written
in
in
the
the
c
c
programming
programming
language.
language
But
but
But
but
thanks
thanks
to
to
WebAssembly,
webassembly
we
we
can
can
run
run
this
this
tool
tool
directly
directly
in
in
the
the
browser.
browser
And
and
that
that
means
means
we
we
can
can
perform
perform
CPU
cpu
intensive
intensive
video
video
editing
editing
jobs
jobs
without
without
the
the
need
need
for
for
a
a
back
back
end
end
server.
server
For
for
example,
example
here's
here's
how
how
a
a
traditional
traditional
web
web
application
application
might
might
work.
work
We
we
collect
collect
a
a
video
video
file
file
from
from
the
the
end
end
user,
user
then
then
upload
upload
it
it
to
to
the
the
cloud.
cloud
We
we
use
use
our
our
cloud
cloud
server
server
to
to
run
run
FFmpeg
ffmpeg
to
to
encode
encode
the
the
file,
file
then
then
send
send
it
it
back
back
down
down
to
to
the
the
client.
client
That
that
works
works
fine,
fine
but
but
it's
it's
not
not
very
very
efficient.
efficient
And
and
it
it
also
also
has
has
no
no
way
way
to
to
work
work
offline
offline
if
if
you're
you're
building
building
a
a
progressive
progressive
web
web
app.
app
What
what
we'll
we'll
do
do
in
in
this
this
video
video
is
is
download
download
the
the
web
web
assembly
assembly
binary
binary
for
for
FFmpeg
ffmpeg
directly
directly
into
into
a
a
React
react
app,
app
allowing
allowing
us
us
to
to
combine
combine
the
the
c
c
programming
programming
language
language
with
with
JavaScript
javascript
and
and
offload
offload
the
the
video
video
editing
editing
work
work
to
to
the
the
end
end
user's
user's
hardware.
hardware
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
follow
follow
along
along
with
with
the
the
full
full
write
write
up
up
and
and
source
source
code
code
on
on
FireShip
fireship
IO.
io
And
and
if
if
you
you
have
have
no
no
idea
idea
what
what
web
web
assembly
assembly
is,
is
check
check
out
out
my
my
100
100
second
second
breakdown
breakdown
on
on
that
that
topic.
topic
This
this
tutorial
tutorial
is
is
very
very
beginner
beginner
friendly
friendly
and
and
doesn't
doesn't
require
require
that
that
you
you
know
know
anything
anything
about
about
the
the
c
c
programming
programming
language.
language
That's
that's
because
because
the
the
ffmpeg.wasm
ffmpeg.wasm
package
package
provides
provides
an
an
API
api
and
and
JavaScript
javascript
to
to
interact
interact
with
with
this
this
low
low
level
level
utility.
utility
Now
now
before
before
we
we
jump
jump
into
into
the
the
code,
code
let's
let's
take
take
a
a
closer
closer
look
look
at
at
the
the
demo.
demo
We
we
have
have
a
a
file
file
input
input
where
where
we
we
can
can
select
select
a
a
video
video
file.
file
The
the
video
video
can
can
be
be
previewed
previewed
in
in
a
a
video
video
element,
element
then
then
when
when
you
you
click
click
the
the
convert
convert
button,
button
it
it
runs
runs
f
f
f
f
mpeg
mpeg
to
to
load
load
the
the
video
video
file
file
into
into
memory
memory
and
and
run
run
the
the
conversion.
conversion
Very
very
simple
simple
stuff,
stuff
but
but
my
my
main
main
goal
goal
here
here
is
is
to
to
give
give
you
you
a
a
starting
starting
point
point
for
for
building
building
more
more
complex
complex
features
features
through
through
the
the
magic
magic
of
of
web
web
assembly.
assembly
To
to
get
get
things
things
started,
started
I'm
i'm
generating
generating
a
a
new
new
React
react
app
app
using
using
Snowpack.
snowpack
And
and
keep
keep
in
in
mind
mind
here,
here
the
the
code
code
is
is
very
very
simple,
simple
so
so
feel
feel
free
free
to
to
follow
follow
along
along
with
with
any
any
other
other
framework.
framework
Then
then
from
from
inside
inside
your
your
project,
project
you'll
you'll
want
want
to
to
install
install
the
the
following
following
packages
packages
from
from
the
the
ffmpeg
ffmpeg
namespace.
namespace
And
and
lastly,
lastly
you
you
can
can
run
run
npm
npm
start,
start
which
which
should
should
give
give
you
you
the
the
default
default
React
react
app
app
running
running
in
in
the
the
browser.
browser
From
from
there,
there
we'll
we'll
go
go
into
into
the
the
source
source
directory
directory
and
and
open
open
the
the
app
app
JS
js
file.
file
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
delete
delete
all
all
the
the
boilerplate
boilerplate
code,
code
leaving
leaving
us
us
with
with
a
a
basic
basic
starting
starting
point.
point
From
from
there,
there
I'm
i'm
going
going
to
to
import
import
2
2
functions
functions
from
from
the
the
FFmpeg
ffmpeg
namespace.
namespace
The
the
first
first
function,
function
create
create
ffmpeg,
ffmpeg
we
we
can
can
call
call
right
right
away,
away
which
which
gives
gives
us
us
a
a
starting
starting
point
point
for
for
working
working
with
with
this
this
library.
library
We'll
we'll
set
set
the
the
log
log
option
option
to
to
true
true
so
so
we
we
can
can
see
see
everything
everything
that
that
it
it
does
does
directly
directly
play
play
in
in
the
the
console.
console
Now
now
it's
it's
important
important
to
to
understand
understand
at
at
this
this
point
point
that
that
the
the
actual
actual
web
web
assembly
assembly
binary
binary
has
has
not
not
been
been
bundled
bundled
in
in
our
our
application.
application
It's
it's
a
a
pretty
pretty
large
large
file,
file
so
so
we
we
don't
don't
want
want
it
it
to
to
block
block
our
our
web
web
application
application
right
right
away.
away
Instead,
instead
we
we
load
load
it
it
asynchronously
asynchronously
over
over
a
a
CDN.
cdn
To
to
keep
keep
track
track
of
of
the
the
loading
loading
state,
state
I'll
i'll
go
go
ahead
ahead
and
and
add
add
a
a
stateful
stateful
property
property
here
here
called
called
ready
ready
with
with
the
the
use
use
state
state
hook.
hook
It
it
has
has
a
a
default
default
value
value
of
of
false,
false
and
and
then
then
we'll
we'll
create
create
an
an
async
async
function
function
here
here
called
called
load
load
that
that
can
can
flip
flip
it
it
to
to
true
true
after
after
the
the
binary
binary
has
has
been
been
loaded.
loaded
The
the
function
function
awaits
awaits
the
the
FFmpeg
ffmpeg
load
load
promise.
promise
And
and
once
once
loaded,
loaded
we
we
can
can
flip
flip
the
the
ready
ready
state
state
to
to
true.
true
And
and
now
now
we
we
just
just
need
need
a
a
place
place
to
to
call
call
this
this
function.
function
In
in
React,
react
we
we
can
can
do
do
that
that
with
with
the
the
use
use
effect
effect
hook
hook
to
to
run
run
this
this
function
function
when
when
the
the
component
component
is
is
first
first
initialized.
initialized
Use
use
effect
effect
takes
takes
a
a
function
function
as
as
its
its
argument.
argument
Then
then
notice
notice
how
how
I'm
i'm
adding
adding
an
an
empty
empty
array
array
as
as
the
the
second
second
argument.
argument
This
this
will
will
ensure
ensure
that
that
the
the
function
function
is
is
only
only
called
called
once
once
when
when
the
the
component
component
is
is
first
first
initialized
initialized
or
or
mounted.
mounted
Then
then
inside
inside
the
the
effect,
effect
we
we
can
can
simply
simply
call
call
our
our
load
load
function.
function
If
if
you
you
go
go
ahead
ahead
and
and
save
save
the
the
file
file
and
and
open
open
up
up
the
the
browser,
browser
you
you
should
should
get
get
a
a
blank
blank
page.
page
But
but
in
in
the
the
console,
console
you'll
you'll
notice
notice
that
that
FFmpeg
ffmpeg
core
core
is
is
being
being
loaded
loaded
in
in
the
the
background.
background
In
in
fact,
fact
if
if
we
we
go
go
over
over
to
to
the
the
sources
sources
tab,
tab
you
you
can
can
inspect
inspect
the
the
actual
actual
web
web
assembly
assembly
code
code
there.
there
You
you
don't
don't
need
need
to
to
understand
understand
what
what
any
any
of
of
this
this
code
code
means,
means
but
but
it
it
is
is
useful
useful
to
to
know
know
that
that
this
this
originally
originally
started
started
as
as
the
the
c
c
programming
programming
language
language
and
and
then
then
was
was
compiled
compiled
over
over
to
to
WebAssembly.
webassembly
What
what
we're
we're
looking
looking
at
at
here
here
is
is
the
the
web
web
assembly
assembly
text,
text
which
which
is
is
an
an
intermediate
intermediate
format
format
before
before
it
it
becomes
becomes
binary
binary
or
or
ones
ones
and
and
zeros.
zeros
Now
now
back
back
in
in
the
the
source
source
code,
code
we'll
we'll
go
go
into
into
our
our
JSX,
jsx
and
and
then
then
we'll
we'll
use
use
the
the
ternary
ternary
operator
operator
with
with
our
our
ready
ready
state.
state
If
if
the
the
app's
app's
ready,
ready
we'll
we'll
show
show
the
the
main
main
UI.
ui
Otherwise,
otherwise
we'll
we'll
just
just
show
show
the
the
text
text
of
of
loading.
loading
Now
now
our
our
next
next
challenge
challenge
is
is
loading
loading
a
a
video
video
file
file
into
into
the
the
application
application
and
and
also
also
showing
showing
it
it
in
in
a
a
video
video
player
player
in
in
the
the
UI.
ui
The
the
first
first
step
step
is
is
to
to
add
add
additional
additional
state
state
to
to
the
the
component.
component
In
in
this
this
case,
case
a
a
video
video
file,
file
which
which
will
will
initially
initially
start
start
undefined.
undefined
In
in
the
the
HTML,
html
we
we
can
can
add
add
an
an
input
input
element
element
with
with
a
a
type
type
of
of
file.
file
When
when
this
this
input
input
changes,
changes
we'll
we'll
run
run
an
an
event
event
handler
handler
that
that
will
will
set
set
the
the
video
video
state
state
and
and
it
it
gets
gets
the
the
actual
actual
file
file
from
from
the
the
event.
event
The
the
event
event
emits
emits
a
a
file
file
list
list
and
and
then
then
we
we
use
use
item
item
0
0
to
to
select
select
the
the
first
first
file
file
from
from
that
that
list.
list
Now
now
that
that
we
we
have
have
access
access
to
to
a
a
video
video
file,
file
we
we
want
want
to
to
display
display
it
it
in
in
an
an
HTML
html
video
video
element.
element
We'll
we'll
use
use
a
a
logical
logical
and
and
operator
operator
to
to
only
only
show
show
the
the
video
video
when
when
the
the
video
video
file
file
is
is
defined.
defined
The
the
element
element
has
has
controls,
controls
a
a
width
width
of
of
250,
250
But
but
a
a
tricky
tricky
thing
thing
here
here
is
is
that
that
we
we
can't
can't
just
just
pass
pass
the
the
raw
raw
file
file
to
to
the
the
source
source
attribute.
attribute
We
we
need
need
to
to
convert
convert
it
it
to
to
a
a
URL
url
that
that
the
the
browser
browser
can
can
fetch.
fetch
We
we
can
can
handle
handle
that
that
by
by
using
using
the
the
URL
url
interface
interface
and
and
then
then
calling
calling
its
its
create
create
object
object
URL
url
method,
method
which
which
takes
takes
the
the
file
file
object
object
as
as
its
its
argument.
argument
If
if
we
we
go
go
ahead
ahead
and
and
open
open
up
up
the
the
demo,
demo
we
we
should
should
now
now
be
be
able
able
to
to
choose
choose
a
a
file
file
on
on
our
our
system
system
and
and
then
then
have
have
that
that
file
file
displayed
displayed
in
in
the
the
video
video
player.
player
And
and
now
now
we're
we're
ready
ready
for
for
the
the
fun
fun
part,
part
using
using
FFmpeg
ffmpeg
and
and
WebAssembly
webassembly
to
to
modify
modify
this
this
video
video
file
file
or,
or
in
in
our
our
case,
case
convert
convert
the
the
file
file
to
to
an
an
animated
animated
GIF.
gif
The
the
first
first
thing
thing
we'll
we'll
do
do
here
here
is
is
add
add
one
one
more
more
piece
piece
of
of
state
state
to
to
the
the
component
component
called
called
GIF,
gif
and
and
it
it
will
will
be
be
used
used
to
to
hold
hold
the
the
end
end
result,
result
which
which
is
is
a
a
URL
url
of
of
an
an
image
image
file.
file
From
from
there,
there
we'll
we'll
create
create
a
a
function
function
called
called
convert
convert
to
to
GIF,
gif
which
which
the
the
user
user
can
can
run
run
when
when
they're
they're
ready
ready
to
to
make
make
the
the
conversion.
conversion
Now
now
one
one
thing
thing
to
to
understand
understand
here
here
is
is
that
that
WebAssembly
webassembly
is
is
managing
managing
its
its
own
own
in
in
memory
memory
file
file
system.
system
And
and
in
in
order
order
to
to
run
run
FFmpeg
ffmpeg
on
on
that
that
file,
file
we
we
need
need
to
to
make
make
it
it
known
known
to
to
that
that
file
file
system.
system
We
we
can
can
do
do
that
that
by
by
calling
calling
f
f
s
s
or
or
file
file
system
system
along
along
with
with
the
the
right
right
file
file
method,
method
along
along
with
with
the
the
name
name
of
of
the
the
file,
file
and
and
then
then
we
we
fetch
fetch
the
the
actual
actual
video
video
file
file
that
that
we've
we've
collected
collected
from
from
the
the
end
end
user.
user
What
what
we've
we've
done
done
is
is
taken
taken
the
the
video
video
file
file
and
and
saved
saved
it
it
to
to
a
a
place
place
in
in
memory
memory
as
as
test
test
dot
dot
m
m
p
p
4.
4
They
they
can
can
be
be
now
now
accessed
accessed
by
by
WebAssembly
webassembly
while
while
it's
it's
in
in
memory,
memory
and
and
it
it
only
only
stays
stays
in
in
memory
memory
until
until
the
the
browser
browser
is
is
refreshed.
refreshed
From
from
there,
there
we
we
can
can
run
run
an
an
actual
actual
f
f
f
f
mpeg
mpeg
command.
command
If
if
you're
you're
not
not
familiar
familiar
with
with
utility.
utility
It's
it's
a
a
command
command
line
line
tool
tool
that
that
can
can
perform
perform
all
all
kinds
kinds
of
of
video
video
editing
editing
jobs.
jobs
It's
it's
been
been
around
around
for
for
a
a
very
very
long
long
time
time
and
and
you
you
can
can
check
check
out
out
the
the
full
full
documentation
documentation
to
to
get
get
an
an
idea
idea
of
of
what
what
it
it
can
can
do.
do
We
we
can
can
run
run
the
the
command
command
by
by
simply
simply
passing
passing
arguments
arguments
that
that
we
we
would
would
normally
normally
pass
pass
to
to
the
the
command
command
line.
line
The
the
I
i
flag
flag
is
is
for
for
the
the
input
input
file.
file
The
the
t
t
flag
flag
is
is
for
for
the
the
time
time
that
that
we
we
want
want
the
the
length
length
of
of
the
the
video
video
to
to
be.
be
We
we
can
can
offset
offset
it
it
with
with
starting
starting
seconds,
seconds
then
then
we
we
use
use
the
the
f
f
flag
flag
to
to
encode
encode
it
it
as
as
a
a
GIF
gif
file.
file
When
when
that's
that's
complete,
complete
it
it
will
will
write
write
the
the
result
result
to
to
memory,
memory
and
and
then
then
we
we
can
can
access
access
it
it
by
by
again
again
using
using
the
the
file
file
system
system
command
command
this
this
time
time
to
to
read
read
a
a
file
file
called
called
out
out
dot
dot
gif.
gif
We
we
then
then
need
need
to
to
convert
convert
the
the
file
file
data
data
into
into
a
a
URL
url
that
that
can
can
be
be
used
used
in
in
the
the
browser.
browser
Once
once
again,
again
we'll
we'll
use
use
URL
url
create
create
object
object
URL,
url
and
and
as
as
its
its
argument,
argument
will
will
create
create
a
a
new
new
blob.
blob
Blob
blob
is
is
kind
kind
of
of
a
a
scary
scary
word,
word
but
but
it
it
just
just
means
means
a
a
raw
raw
file,
file
which
which
in
in
this
this
case
case
is
is
the
the
binary
binary
that
that
we
we
can
can
access
access
from
from
the
the
data
data
buffer.
buffer
It's
it's
also
also
a
a
good
good
idea
idea
to
to
pass
pass
a
a
second
second
argument
argument
with
with
the
the
MIME
mime
type
type
of
of
the
the
object,
object
which
which
in
in
this
this
case
case
is
is
a
a
GIF
gif
image.
image
And
and
lastly,
lastly
we
we
take
take
that
that
URL
url
and
and
update
update
the
the
state
state
of
of
the
the
component.
component
From
from
there,
there
we
we
just
just
have
have
a
a
couple
couple
of
of
simple
simple
updates
updates
to
to
make
make
to
to
the
the
UI.
ui
We'll
we'll
go
go
down
down
here
here
and
and
add
add
a
a
button
button
that
that
when
when
clicked
clicked
will
will
run
run
the
the
convert
convert
to
to
get
get
function
function
and
and
then
then
we'll
we'll
add
add
an
an
image
image
tag
tag
that's
that's
only
only
displayed
displayed
when
when
we
we
have
have
the
the
GIF
gif
URL.
url
You
you
should
should
now
now
be
be
able
able
to
to
open
open
up
up
your
your
demo,
demo
select
select
a
a
video
video
file,
file
Then
then
when
when
you
you
click
click
the
the
convert
convert
button,
button
it
it
uses
uses
web
web
assembly
assembly
to
to
convert
convert
that
that
file
file
to
to
an
an
animated
animated
GIF,
gif
and
and
it
it
should
should
log
log
the
the
entire
entire
process
process
here
here
in
in
the
the
console.
console
You
you
could
could
then
then
take
take
this
this
file
file
and
and
upload
upload
it
it
to
to
Giphy
giphy
or
or
use
use
it
it
on
on
Twitter
twitter
or
or
whatever
whatever
you
you
want.
want
And
and
that's
that's
how
how
easy
easy
it
it
is
is
to
to
start
start
incorporating
incorporating
WebAssembly
webassembly
into
into
your
your
web
web
applications.
applications
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there,
there
but
but
in
in
the
the
near
near
future,
future
I
i
plan
plan
on
on
making
making
a
a
video
video
about
about
how
how
to
to
take
take
your
your
own
own
custom
custom
rust
rust
code
code
and
and
convert
convert
it
it
to
to
web
web
assembly
assembly
to
to
be
be
used
used
in
in
the
the
browser.
browser
And
and
if
if
you
you
have
have
any
any
ideas,
ideas
please
please
let
let
me
me
know
know
in
in
the
the
comments.
comments
If
if
you
you
want
want
to
to
learn
learn
more
more
and
and
support
support
my
my
work,
work
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
FireShip
fireship
I
i
o.
o
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speakers discuss how to use Web reminded the web application to convert video files to animated GIF files, using a library called FFTF and the use state hook in React app. They also explain the process of creating a new React app using the web assembly file, installing the necessary functions, and modifying it with the help of a web assembly code. They also discuss the use of the web assembly code, the loading state of the web assembly file, and the use of the logical and operator method. Finally, they discuss the process of adding additional state to a component in an application, including a video file, which can be displayed in an HTML video element, and the use of a tool called WebFinancial.
WASM + React... Easily build video editing software with JS & FFmpeg
WebAssembly opens the door to building high performance applications on the web and languages other than JavaScript. In today's video, we'll build a simple video editing tool that can take a video file and convert it to an animated GIF. The cool thing about this demo is that it's made possible by a library called f f mpeg, which is a utility written in the c programming language. But But thanks to WebAssembly, we can run this tool directly in the browser. And that means we can perform CPU intensive video editing jobs without the need for a back end server. For example, here's how a traditional web application might work. We collect a video file from the end user, then upload it to the cloud. We use our cloud server to run FFmpeg to encode the file, then send it back down to the client. That works fine, but it's not very efficient. And it also has no way to work offline if you're building a progressive web app. What we'll do in this video is download the web assembly binary for FFmpeg directly into a React app, allowing us to combine the c programming language with JavaScript and offload the video editing work to the end user's hardware. If you're new here, like and subscribe, and follow along with the full write up and source code on FireShip IO. And if you have no idea what web assembly is, check out my 100 second breakdown on that topic. This tutorial is very beginner friendly and doesn't require that you know anything about the c programming language. That's because the ffmpeg.wasm package provides an API and JavaScript to interact with this low level utility. Now before we jump into the code, let's take a closer look at the demo. We have a file input where we can select a video file. The video can be previewed in a video element, then when you click the convert button, it runs f f mpeg to load the video file into memory and run the conversion. Very simple stuff, but my main goal here is to give you a starting point for building more complex features through the magic of web assembly. To get things started, I'm generating a new React app using Snowpack. And keep in mind here, the code is very simple, so feel free to follow along with any other framework. Then from inside your project, you'll want to install the following packages from the ffmpeg namespace. And lastly, you can run npm start, which should give you the default React app running in the browser. From there, we'll go into the source directory and open the app JS file. I'm gonna go ahead and delete all the boilerplate code, leaving us with a basic starting point. From there, I'm going to import 2 functions from the FFmpeg namespace. The first function, create ffmpeg, we can call right away, which gives us a starting point for working with this library. We'll set the log option to true so we can see everything that it does directly play in the console. Now it's important to understand at this point that the actual web assembly binary has not been bundled in our application. It's a pretty large file, so we don't want it to block our web application right away. Instead, we load it asynchronously over a CDN. To keep track of the loading state, I'll go ahead and add a stateful property here called ready with the use state hook. It has a default value of false, and then we'll create an async function here called load that can flip it to true after the binary has been loaded. The function awaits the FFmpeg load promise. And once loaded, we can flip the ready state to true. And now we just need a place to call this function. In React, we can do that with the use effect hook to run this function when the component is first initialized. Use effect takes a function as its argument. Then notice how I'm adding an empty array as the second argument. This will ensure that the function is only called once when the component is first initialized or mounted. Then inside the effect, we can simply call our load function. If you go ahead and save the file and open up the browser, you should get a blank page. But in the console, you'll notice that FFmpeg core is being loaded in the background. In fact, if we go over to the sources tab, you can inspect the actual web assembly code there. You don't need to understand what any of this code means, but it is useful to know that this originally started as the c programming language and then was compiled over to WebAssembly. What we're looking at here is the web assembly text, which is an intermediate format before it becomes binary or ones and zeros. Now back in the source code, we'll go into our JSX, and then we'll use the ternary operator with our ready state. If the app's ready, we'll show the main UI. Otherwise, we'll just show the text of loading. Now our next challenge is loading a video file into the application and also showing it in a video player in the UI. The first step is to add additional state to the component. In this case, a video file, which will initially start undefined. In the HTML, we can add an input element with a type of file. When this input changes, we'll run an event handler that will set the video state and it gets the actual file from the event. The event emits a file list and then we use item 0 to select the first file from that list. Now that we have access to a video file, we want to display it in an HTML video element. We'll use a logical and operator to only show the video when the video file is defined. The element has controls, a width of 250, But a tricky thing here is that we can't just pass the raw file to the source attribute. We need to convert it to a URL that the browser can fetch. We can handle that by using the URL interface and then calling its create object URL method, which takes the file object as its argument. If we go ahead and open up the demo, we should now be able to choose a file on our system and then have that file displayed in the video player. And now we're ready for the fun part, using FFmpeg and WebAssembly to modify this video file or, in our case, convert the file to an animated GIF. The first thing we'll do here is add one more piece of state to the component called GIF, and it will be used to hold the end result, which is a URL of an image file. From there, we'll create a function called convert to GIF, which the user can run when they're ready to make the conversion. Now one thing to understand here is that WebAssembly is managing its own in memory file system. And in order to run FFmpeg on that file, we need to make it known to that file system. We can do that by calling f s or file system along with the right file method, along with the name of the file, and then we fetch the actual video file that we've collected from the end user. What we've done is taken the video file and saved it to a place in memory as test dot m p 4. They can be now accessed by WebAssembly while it's in memory, and it only stays in memory until the browser is refreshed. From there, we can run an actual f f mpeg command. If you're not familiar with utility. It's a command line tool that can perform all kinds of video editing jobs. It's been around for a very long time and you can check out the full documentation to get an idea of what it can do. We can run the command by simply passing arguments that we would normally pass to the command line. The I flag is for the input file. The t flag is for the time that we want the length of the video to be. We can offset it with starting seconds, then we use the f flag to encode it as a GIF file. When that's complete, it will write the result to memory, and then we can access it by again using the file system command this time to read a file called out dot gif. We then need to convert the file data into a URL that can be used in the browser. Once again, we'll use URL create object URL, and as its argument, will create a new blob. Blob is kind of a scary word, but it just means a raw file, which in this case is the binary that we can access from the data buffer. It's also a good idea to pass a second argument with the MIME type of the object, which in this case is a GIF image. And lastly, we take that URL and update the state of the component. From there, we just have a couple of simple updates to make to the UI. We'll go down here and add a button that when clicked will run the convert to get function and then we'll add an image tag that's only displayed when we have the GIF URL. You should now be able to open up your demo, select a video file, Then when you click the convert button, it uses web assembly to convert that file to an animated GIF, and it should log the entire process here in the console. You could then take this file and upload it to Giphy or use it on Twitter or whatever you want. And that's how easy it is to start incorporating WebAssembly into your web applications. I'm gonna go ahead and wrap things up there, but in the near future, I plan on making a video about how to take your own custom rust code and convert it to web assembly to be used in the browser. And if you have any ideas, please let me know in the comments. If you want to learn more and support my work, consider becoming a pro member at FireShip I o. Thanks for watching and I will see you in the next one.
The speakers discuss how to use Web reminded the web application to convert video files to animated GIF files, using a library called FFTF and the use state hook in React app. They also explain the process of creating a new React app using the web assembly file, installing the necessary functions, and modifying it with the help of a web assembly code. They also discuss the use of the web assembly code, the loading state of the web assembly file, and the use of the logical and operator method. Finally, they discuss the process of adding additional state to a component in an application, including a video file, which can be displayed in an HTML video element, and the use of a tool called WebFinancial.