In this lecture, we are going to generate a single screenshot.
Ultimately, we're trying to generate a maximum of three screenshots.
For starters, we should start with a single screenshot.
Once we've learned how to generate a screenshot, we will be able to scale our solution to multiple
screenshots.
To get started?
Open the FFmpeg service.
We're going to continue working inside B get screenshots function.
We left off with writing the file to the file system created by the FFmpeg package.
We can start interacting with our videos by running a set of commands.
In the resource section of this lecture, I provide a link to the official site for FFmpeg.
Let's learn how to find the proper documentation for FFmpeg on the sidebar.
Click on the documentation link.
There's a section called Command Line Tools, Documentation, FFmpeg is not a single tool.
There are a total of three tools for running FFmpeg.
The first tool is the F MPEG tool.
This tool or process video and audio files.
If you want to generate screenshots or convert the file type, this is the tool you want to check out.
The next tool is called F Play.
It's a tool for playing media files.
Lastly, we have the F probe tool, which can read files.
It's completely different from the FFmpeg tool because it can't process files.
You can use this tool to read metadata from a video file.
These three tools make up the f MPEG ecosystem for our purposes.
We're using the FFmpeg tool.
Let's check out the documentation for this tool on this page.
You're going to find everything you'd ever want to know about FFmpeg.
Understandably, it might be overwhelming.
Handling media files is a different world.
Let me simplify how FFmpeg works.
Regardless of what you're trying to do, FFmpeg is initialized with the FFmpeg command.
It'll always be the first command you type in the command line.
Next, we can start adding global options.
You may want to check the current license version or codecs of FFmpeg.
Normally, you're not going to use global options during a file conversion.
It's not something we're going to focus on for this project.
Afterward, we can begin configuring the input file.
Keep in mind, we're trying to process a video file.
FFmpeg wants us to start providing information on the input file or the file we're trying to process.
Lastly, we can start configuring the output, which is the file produced by FFmpeg.
You'll most likely be adding options for this section of the command.
For example, you can change the file name.
Apply filters, et cetera.
Overall, FFmpeg is an extremely powerful tool.
I consider it one of the best tools for working with video files.
Unfortunately, we won't be able to run FFmpeg on the command line because it's not installed on our
machines.
Instead, we're working with a web assembly version of this tool.
Luckily, the FFmpeg package can execute commands.
Back in our project, we're going to begin running commands after storing the file.
Run the FFmpeg Dot run function with the await keyword.
The run function is asynchronous.
We're applying the await keyword to handle the promise the value resolved by the promise is void.
We don't need to handle the value resolved by the promise inside the run command.
We can start adding options we would normally run in the command line.
You can refer to the documentation for a list of available options.
We're going to start by configuring the input file and FFmpeg won't process a file until we tell it
where to find the input file before writing commands.
I'm going to add a series of comments to break down each section.
Starting with the input section, we're going to an option called minus I.
The minus I option will tell FFmpeg to grab a specific file from our file system.
The package we've installed creates an isolated file system or able to access the files we've written
to it.
The files can be accessed by their name.
Conveniently, we have the name of the file through the file object.
Let's pass that in.
The name of the file must correspond to the name we've given to it in the first function.
Otherwise, it will not be able to find the file.
We're finished with the inputs.
We aren't going to apply changes directly to the input file.
Instead, we'll make changes to the output file under the output options section.
We're going to add the minus SS option.
The SS option allows us to configure the current timestamp by default, FFmpeg sets the timestamp to
the very beginning of the video.
We can tell FFmpeg to move to a different timestamp with this option.
The format for a timestamp is the following H.H. colon amp.
Colon SS.
The H h plates holder refers to the hour the M m place holder refers to the minutes.
Lastly, the SS placeholder references the second for this demonstration.
We're going to capture a screenshot on the first seconds of the video.
I'm going to set this option to the following zero zero colon zero zero colon zero one.
The next option we'll add is called minus frames coal in the.
Videos are a series of still images, we refer to these images as frames media players will move from
one image to the next to create the effect of a video playing.
There are devices that can capture up to one million frames per second or one million images per second.
The most popular frame rates are 24, 30 or 60 frames per second at the moment.
We're not sure how many frames will be available at the current timestamp.
We don't want FFmpeg to capture 30 screenshots if there are 30 frames in a given seconds.
The Frames Colon V option allows us to configure how many frames to focus on.
We're trying to generate a single screenshot, so we will set this option to one.
There's one final option won't add the size of the screen shot will have the same width and height as
the video.
For example, if the video size is 1920 by 10 A.D., the image size will be 1920 by ten eighty for our
app.
We're not going to need an image this large.
We should resize the image before saving it.
The next option we'll add is called minus filter colon.
The.
Resizing an image requires a filter.
Filters are functions for modifying the original source of an input.
In our case, we're trying to modify the size.
The next command will be a function, not an option.
The name of the function is called scale.
Functions are followed up by an equal sign symbol with the value to apply it through the output.
In this example, the value must be the new size of the image.
The format for an image is dimensions is the width and height with a colon to separate them.
For example, let's say we want the width and height to be five, 10 and 300, respectively.
However, we should try to maintain the aspect ratio of the image.
Not all videos will have the same dimensions.
FFmpeg will force our dimensions on the image, even if it means losing the original aspect ratio.
We can maintain the aspect ratio by replacing either dimension with a minus one value.
Let's replace the height with a minus one value.
The width of the image will always be five 10.
As for the height of MPEG, we'll calculate the height to preserve the aspect ratio.
We're finished with configuring the output options.
The last step is to create the screenshot under the output section.
We need to provide a name for our file.
We'll call it output zero one dot PNG.
FFmpeg will detect we're trying to generate a PNG image, it'll capture a screenshot based on the configuration
settings for the output with a few options or able to generate a screenshot.
Let me recap what we've done so far.
First, we're telling FFmpeg to process the file stored in the file system.
Next, we're changing the current timestamp.
Afterward, we're telling FFmpeg to focus on a single frame.
Lastly, we're saving the frame to a file called output zero one dot PNG.
You may have noticed, but we're not adding the FFmpeg command.
By default, the run function will add the FFmpeg command at the beginning of our chain of commands.
We can submit it from the argument list.
Let's give our app a test refresh the upload page with the developer tools opened.
I'm going to quickly upload a file.
Inside the developer tools, dozens of logs are added to the console.
The most important log will have the following message output number zero.
This log will tell us if FFmpeg was able to generate an image, if you have this log, you've successfully
created an image, the next step is to scale our solution to generate multiple images.
There isn't a point in allowing the user to select a screenshot if there's only one.
Instead, we want to give them the option of selecting different thumbnails in the next lecture will
begin this process.