In this lecture, we're going to pass our file to FFmpeg internally, FFmpeg, we'll create a separate
memory storage for files.
We're going to be dealing with video files, which can be very large without a separate memory storage
system.
Loading files can cause our app to lag.
Generating screenshots will require storing the user's upload in memory.
The F of package has a function for handling this process.
Let's get started in your editor.
Open the upload component class file.
The first step is to send the file from our component to our service.
We're storing the file in these store file function in this function.
We're retrieving the file from the event after doing so.
We're checking if the file is valid, if it is.
We can start sending it over to our service.
Processing and image is an asynchronous action.
We should apply the async keyword to the function.
Next, let's run a function called FFmpeg service, dont get screenshots.
Like I said before, generating a screenshot is an asynchronous action ahead of time, we should apply
the await keyword to the function.
Lastly, we should pass on the file object to the service.
Our service needs to be updated with this function definition, open the FFmpeg service.
Next to finally get screenshots function with the async keyword.
In the argument list, we're going to accept the final arguments.
It'll be annotated with the file type.
We're almost finished.
The overall goal is to store the file in FFmpeg, separate memory storage.
Otherwise, it won't be able to manipulate the file before we send the file, it needs to be converted
into binary data.
We've encountered this issue before with images.
Images are stored as binary.
The same is true for videos.
However, we're receiving the file as a file object in JavaScript.
The file needs to be converted from a file object to binary data.
Luckily, the FFmpeg package has a helper function for performing this conversion at the top of the
file.
Update the import statement for the FFmpeg package to include a function called fetch file.
If we have our mouse over this function, we can view the return type, the value returned by this function
is a promise that resolves to an array of integers a.k.a. binary data.
It's the same type of data from our image app after decoding an image, we will return to an array of
binary data.
It's very common to work binary data in systems programming, especially if you're working with files.
Let's begin using this function.
Back in the get screenshots function, we're going to create a variable called data.
Its value will be the fetch file function with the await keyword.
Remember, we're dealing with the function.
We should add the await keyword to receive the value resolved by the promise.
This function has one argument, which is the file will pass and the file arguments.
There's one last step the Fitch file function will convert the file to binary data, storing the data
in memory is not performed by this function.
There's an alternative function below the variable called the this dot FFmpeg dot fs function.
Air Force is short for file system.
The PFS function gives us access to the packages independent memory system, we can read and write files
to this system.
If we were to run FFmpeg, it would search for files from this memory.
Therefore, we need to store the file before we can start running FFmpeg commands.
This function has a couple of arguments.
The first argument is the action we wish to perform.
We can read, write and delete files from the file system.
For this example, we will write a new file by passing in a stream called Write File.
Next, we need to provide a name for our file.
We'll be able to reference our file by this name to keep things consistent.
We're going to use the original file name.
Accessing the original file name can be done through the file name property.
The last argument is the data for the file.
Let's pass on the data variable.
After making those changes, let's verify the file is written to the memory.
Refresh the upload page with the developer tools opened.
After FFmpeg has been initialized, try uploading a new file.
In the console, a log will be added by the package.
It'll tell us a new file has been written to the file system.
Information such as the name and file size are provided.
You should see a similar log after uploading a file.
If you do, you successfully written a new file to the file system.
In the next lecture, we can begin generating screenshots.