In this lecture, we're going to generate multiple screenshots from a video.
We should carefully consider how to scale our current command to handle this action.
The more screenshots we're creating, the more power we're going to need.
The user already has to wait for FFmpeg to download.
We should create screenshots as fast as possible.
Initially, you may be tempted to run three commands.
However, this isn't efficient.
We should generate multiple files in parallel.
On the other hand, the FFmpeg package does not allow us to run multiple run functions simultaneously.
One process must finish before starting another.
Luckily, we can run one extensive command to process files all at once.
We're allowed to have multiple inputs and outputs under a single FFmpeg process.
Do you understand?
Let's build the command in your editor.
Open the FFmpeg service.
We're going to write our code above the run function in the get screenshots function.
First, we need to pick a series of timestamps for generating images.
You can go about this any way you'd like for simplicity.
We're going to generate three screenshots from the first three seconds of the video.
Create an array called seconds.
In this era, we're going to store the following numbers one, two three.
Next, we're going to create another array called commands.
This array is going to contain the list of commands to run with FFmpeg.
Initially, it's going to be empty for a type safety.
We should annotate this array at the moment.
TypeScript will assume this array can contain any type of value.
We should restrict the values in the array to strings by annotating our variable.
Next, we're going to begin looping through the seconds away with the for each function.
We should push a series of commands for every item in the second survey.
One item equals one screenshot.
For example, if we had six items in the array, we should get six screenshots by storing the timestamps
in an array.
We'll be able to scale our project to various amounts of screenshots inside the argument list.
We'll accept the element in the current iteration with an alias of second.
Inside the function, we're going to push a new command by calling the push function on the command
array.
The command is going to be very similar to the command we passed into the run function, actually,
we can cut and paste the command from the run function to the push function.
Typically, developers will push one item into an array.
Luckily, the push function allows us to push multiple items into an array.
There are a couple of modifications we should make to the command.
As it stands, the same screenshot will be generated.
Firstly, we're going to change the time stamp by converting the string into a string templates.
The number at the end can be replaced with an expression, the expression, it will be the second argument.
By having a dynamic time stamp will always have a unique screenshot.
Next, we need to change the file name.
New screenshot files will overwrite the previous screenshots to prevent that from happening.
We're going to convert the string to a string templates.
Same as before.
The number can be replaced with the second argument.
The last step is to execute this command with the run function.
There is one problem if we hover our mouse over this function, the function expects a list of strings
as an argument.
It doesn't want an array of strings.
We can overcome this problem by using the spread operator with the commands array.
Let's give our app a test.
Try uploading a file with the developer tools opened.
Inside the console, dozens of logs are added by the FFmpeg package, similar to before you should be
able to find three outputs.
Here's one.
Here's another.
Here's the last output.
A total of three outputs.
As long as you can find three outputs for the images, you have successfully created a screen shots.
We can't prove it because we haven't rendered these screenshots.
Let's begin sending these screenshots from the service to the components in the next lecture.