1 00:00:00,120 --> 00:00:03,810 In this lecture, we are going to generate a single screenshot. 2 00:00:04,050 --> 00:00:08,130 Ultimately, we're trying to generate a maximum of three screenshots. 3 00:00:08,370 --> 00:00:11,520 For starters, we should start with a single screenshot. 4 00:00:11,790 --> 00:00:17,430 Once we've learned how to generate a screenshot, we will be able to scale our solution to multiple 5 00:00:17,430 --> 00:00:18,330 screenshots. 6 00:00:18,780 --> 00:00:19,710 To get started? 7 00:00:19,770 --> 00:00:21,930 Open the FFmpeg service. 8 00:00:24,390 --> 00:00:28,230 We're going to continue working inside B get screenshots function. 9 00:00:28,590 --> 00:00:33,960 We left off with writing the file to the file system created by the FFmpeg package. 10 00:00:34,230 --> 00:00:38,340 We can start interacting with our videos by running a set of commands. 11 00:00:38,610 --> 00:00:44,580 In the resource section of this lecture, I provide a link to the official site for FFmpeg. 12 00:00:47,080 --> 00:00:52,450 Let's learn how to find the proper documentation for FFmpeg on the sidebar. 13 00:00:52,600 --> 00:00:54,580 Click on the documentation link. 14 00:00:57,180 --> 00:01:03,300 There's a section called Command Line Tools, Documentation, FFmpeg is not a single tool. 15 00:01:03,660 --> 00:01:07,230 There are a total of three tools for running FFmpeg. 16 00:01:07,560 --> 00:01:10,350 The first tool is the F MPEG tool. 17 00:01:10,740 --> 00:01:13,950 This tool or process video and audio files. 18 00:01:14,220 --> 00:01:20,160 If you want to generate screenshots or convert the file type, this is the tool you want to check out. 19 00:01:20,700 --> 00:01:22,950 The next tool is called F Play. 20 00:01:23,280 --> 00:01:25,620 It's a tool for playing media files. 21 00:01:25,860 --> 00:01:30,180 Lastly, we have the F probe tool, which can read files. 22 00:01:30,480 --> 00:01:35,520 It's completely different from the FFmpeg tool because it can't process files. 23 00:01:35,910 --> 00:01:39,450 You can use this tool to read metadata from a video file. 24 00:01:40,050 --> 00:01:45,180 These three tools make up the f MPEG ecosystem for our purposes. 25 00:01:45,330 --> 00:01:47,430 We're using the FFmpeg tool. 26 00:01:47,730 --> 00:01:52,050 Let's check out the documentation for this tool on this page. 27 00:01:52,200 --> 00:01:56,190 You're going to find everything you'd ever want to know about FFmpeg. 28 00:01:56,490 --> 00:01:58,920 Understandably, it might be overwhelming. 29 00:01:59,190 --> 00:02:01,770 Handling media files is a different world. 30 00:02:02,040 --> 00:02:05,010 Let me simplify how FFmpeg works. 31 00:02:07,150 --> 00:02:13,500 Regardless of what you're trying to do, FFmpeg is initialized with the FFmpeg command. 32 00:02:13,830 --> 00:02:17,240 It'll always be the first command you type in the command line. 33 00:02:17,740 --> 00:02:20,710 Next, we can start adding global options. 34 00:02:20,950 --> 00:02:25,960 You may want to check the current license version or codecs of FFmpeg. 35 00:02:26,260 --> 00:02:30,580 Normally, you're not going to use global options during a file conversion. 36 00:02:30,880 --> 00:02:34,060 It's not something we're going to focus on for this project. 37 00:02:34,570 --> 00:02:38,170 Afterward, we can begin configuring the input file. 38 00:02:38,410 --> 00:02:41,590 Keep in mind, we're trying to process a video file. 39 00:02:42,070 --> 00:02:49,030 FFmpeg wants us to start providing information on the input file or the file we're trying to process. 40 00:02:49,480 --> 00:02:55,540 Lastly, we can start configuring the output, which is the file produced by FFmpeg. 41 00:02:55,900 --> 00:03:00,040 You'll most likely be adding options for this section of the command. 42 00:03:00,400 --> 00:03:03,010 For example, you can change the file name. 43 00:03:03,040 --> 00:03:04,990 Apply filters, et cetera. 44 00:03:05,550 --> 00:03:09,460 Overall, FFmpeg is an extremely powerful tool. 45 00:03:09,790 --> 00:03:13,780 I consider it one of the best tools for working with video files. 46 00:03:14,020 --> 00:03:20,350 Unfortunately, we won't be able to run FFmpeg on the command line because it's not installed on our 47 00:03:20,350 --> 00:03:21,100 machines. 48 00:03:21,400 --> 00:03:25,510 Instead, we're working with a web assembly version of this tool. 49 00:03:25,780 --> 00:03:30,040 Luckily, the FFmpeg package can execute commands. 50 00:03:31,880 --> 00:03:37,130 Back in our project, we're going to begin running commands after storing the file. 51 00:03:37,250 --> 00:03:41,990 Run the FFmpeg Dot run function with the await keyword. 52 00:03:44,610 --> 00:03:46,950 The run function is asynchronous. 53 00:03:47,220 --> 00:03:53,640 We're applying the await keyword to handle the promise the value resolved by the promise is void. 54 00:03:54,000 --> 00:03:59,220 We don't need to handle the value resolved by the promise inside the run command. 55 00:03:59,400 --> 00:04:03,240 We can start adding options we would normally run in the command line. 56 00:04:03,600 --> 00:04:08,100 You can refer to the documentation for a list of available options. 57 00:04:08,640 --> 00:04:15,510 We're going to start by configuring the input file and FFmpeg won't process a file until we tell it 58 00:04:15,510 --> 00:04:19,110 where to find the input file before writing commands. 59 00:04:19,260 --> 00:04:23,190 I'm going to add a series of comments to break down each section. 60 00:04:28,460 --> 00:04:33,200 Starting with the input section, we're going to an option called minus I. 61 00:04:35,800 --> 00:04:41,770 The minus I option will tell FFmpeg to grab a specific file from our file system. 62 00:04:42,160 --> 00:04:48,610 The package we've installed creates an isolated file system or able to access the files we've written 63 00:04:48,610 --> 00:04:49,090 to it. 64 00:04:49,450 --> 00:04:51,880 The files can be accessed by their name. 65 00:04:52,180 --> 00:04:56,650 Conveniently, we have the name of the file through the file object. 66 00:04:56,890 --> 00:04:58,110 Let's pass that in. 67 00:05:00,740 --> 00:05:05,810 The name of the file must correspond to the name we've given to it in the first function. 68 00:05:06,170 --> 00:05:09,290 Otherwise, it will not be able to find the file. 69 00:05:09,650 --> 00:05:11,360 We're finished with the inputs. 70 00:05:11,660 --> 00:05:15,440 We aren't going to apply changes directly to the input file. 71 00:05:15,710 --> 00:05:22,040 Instead, we'll make changes to the output file under the output options section. 72 00:05:22,190 --> 00:05:25,220 We're going to add the minus SS option. 73 00:05:27,790 --> 00:05:35,530 The SS option allows us to configure the current timestamp by default, FFmpeg sets the timestamp to 74 00:05:35,530 --> 00:05:37,240 the very beginning of the video. 75 00:05:37,570 --> 00:05:42,310 We can tell FFmpeg to move to a different timestamp with this option. 76 00:05:42,730 --> 00:05:48,010 The format for a timestamp is the following H.H. colon amp. 77 00:05:48,010 --> 00:05:49,570 Colon SS. 78 00:05:52,110 --> 00:05:58,110 The H h plates holder refers to the hour the M m place holder refers to the minutes. 79 00:05:58,380 --> 00:06:03,850 Lastly, the SS placeholder references the second for this demonstration. 80 00:06:03,990 --> 00:06:08,250 We're going to capture a screenshot on the first seconds of the video. 81 00:06:08,580 --> 00:06:15,120 I'm going to set this option to the following zero zero colon zero zero colon zero one. 82 00:06:17,700 --> 00:06:22,170 The next option we'll add is called minus frames coal in the. 83 00:06:24,900 --> 00:06:32,310 Videos are a series of still images, we refer to these images as frames media players will move from 84 00:06:32,310 --> 00:06:36,180 one image to the next to create the effect of a video playing. 85 00:06:36,630 --> 00:06:42,930 There are devices that can capture up to one million frames per second or one million images per second. 86 00:06:43,260 --> 00:06:50,010 The most popular frame rates are 24, 30 or 60 frames per second at the moment. 87 00:06:50,130 --> 00:06:54,330 We're not sure how many frames will be available at the current timestamp. 88 00:06:54,660 --> 00:07:00,780 We don't want FFmpeg to capture 30 screenshots if there are 30 frames in a given seconds. 89 00:07:01,140 --> 00:07:06,810 The Frames Colon V option allows us to configure how many frames to focus on. 90 00:07:07,230 --> 00:07:12,870 We're trying to generate a single screenshot, so we will set this option to one. 91 00:07:15,480 --> 00:07:21,600 There's one final option won't add the size of the screen shot will have the same width and height as 92 00:07:21,600 --> 00:07:22,260 the video. 93 00:07:22,590 --> 00:07:31,350 For example, if the video size is 1920 by 10 A.D., the image size will be 1920 by ten eighty for our 94 00:07:31,350 --> 00:07:31,770 app. 95 00:07:31,920 --> 00:07:34,380 We're not going to need an image this large. 96 00:07:34,620 --> 00:07:37,380 We should resize the image before saving it. 97 00:07:37,740 --> 00:07:42,020 The next option we'll add is called minus filter colon. 98 00:07:42,030 --> 00:07:42,450 The. 99 00:07:45,150 --> 00:07:47,790 Resizing an image requires a filter. 100 00:07:48,120 --> 00:07:52,260 Filters are functions for modifying the original source of an input. 101 00:07:52,500 --> 00:07:55,560 In our case, we're trying to modify the size. 102 00:07:55,890 --> 00:07:58,920 The next command will be a function, not an option. 103 00:07:59,250 --> 00:08:01,710 The name of the function is called scale. 104 00:08:04,290 --> 00:08:09,690 Functions are followed up by an equal sign symbol with the value to apply it through the output. 105 00:08:09,930 --> 00:08:14,160 In this example, the value must be the new size of the image. 106 00:08:14,460 --> 00:08:20,100 The format for an image is dimensions is the width and height with a colon to separate them. 107 00:08:20,490 --> 00:08:26,850 For example, let's say we want the width and height to be five, 10 and 300, respectively. 108 00:08:29,360 --> 00:08:33,650 However, we should try to maintain the aspect ratio of the image. 109 00:08:33,919 --> 00:08:36,530 Not all videos will have the same dimensions. 110 00:08:36,950 --> 00:08:43,309 FFmpeg will force our dimensions on the image, even if it means losing the original aspect ratio. 111 00:08:43,640 --> 00:08:49,550 We can maintain the aspect ratio by replacing either dimension with a minus one value. 112 00:08:49,880 --> 00:08:52,970 Let's replace the height with a minus one value. 113 00:08:55,350 --> 00:08:58,080 The width of the image will always be five 10. 114 00:08:58,320 --> 00:09:03,690 As for the height of MPEG, we'll calculate the height to preserve the aspect ratio. 115 00:09:03,990 --> 00:09:06,720 We're finished with configuring the output options. 116 00:09:07,020 --> 00:09:11,550 The last step is to create the screenshot under the output section. 117 00:09:11,640 --> 00:09:14,070 We need to provide a name for our file. 118 00:09:14,340 --> 00:09:17,910 We'll call it output zero one dot PNG. 119 00:09:21,010 --> 00:09:28,510 FFmpeg will detect we're trying to generate a PNG image, it'll capture a screenshot based on the configuration 120 00:09:28,510 --> 00:09:33,670 settings for the output with a few options or able to generate a screenshot. 121 00:09:33,940 --> 00:09:36,280 Let me recap what we've done so far. 122 00:09:36,850 --> 00:09:42,040 First, we're telling FFmpeg to process the file stored in the file system. 123 00:09:42,370 --> 00:09:44,980 Next, we're changing the current timestamp. 124 00:09:45,390 --> 00:09:49,630 Afterward, we're telling FFmpeg to focus on a single frame. 125 00:09:49,990 --> 00:09:55,210 Lastly, we're saving the frame to a file called output zero one dot PNG. 126 00:09:56,020 --> 00:09:59,830 You may have noticed, but we're not adding the FFmpeg command. 127 00:10:00,010 --> 00:10:06,580 By default, the run function will add the FFmpeg command at the beginning of our chain of commands. 128 00:10:06,880 --> 00:10:08,980 We can submit it from the argument list. 129 00:10:09,220 --> 00:10:14,620 Let's give our app a test refresh the upload page with the developer tools opened. 130 00:10:17,200 --> 00:10:19,420 I'm going to quickly upload a file. 131 00:10:21,910 --> 00:10:26,530 Inside the developer tools, dozens of logs are added to the console. 132 00:10:26,800 --> 00:10:31,870 The most important log will have the following message output number zero. 133 00:10:34,290 --> 00:10:41,400 This log will tell us if FFmpeg was able to generate an image, if you have this log, you've successfully 134 00:10:41,400 --> 00:10:47,070 created an image, the next step is to scale our solution to generate multiple images. 135 00:10:47,370 --> 00:10:51,900 There isn't a point in allowing the user to select a screenshot if there's only one. 136 00:10:52,200 --> 00:10:58,440 Instead, we want to give them the option of selecting different thumbnails in the next lecture will 137 00:10:58,440 --> 00:10:59,940 begin this process.