1 00:00:00,120 --> 00:00:04,410 In this lecture, we're going to generate multiple screenshots from a video. 2 00:00:04,740 --> 00:00:09,510 We should carefully consider how to scale our current command to handle this action. 3 00:00:09,840 --> 00:00:13,920 The more screenshots we're creating, the more power we're going to need. 4 00:00:14,520 --> 00:00:18,300 The user already has to wait for FFmpeg to download. 5 00:00:18,570 --> 00:00:21,720 We should create screenshots as fast as possible. 6 00:00:22,410 --> 00:00:25,530 Initially, you may be tempted to run three commands. 7 00:00:25,650 --> 00:00:27,660 However, this isn't efficient. 8 00:00:27,930 --> 00:00:30,840 We should generate multiple files in parallel. 9 00:00:31,080 --> 00:00:38,100 On the other hand, the FFmpeg package does not allow us to run multiple run functions simultaneously. 10 00:00:38,430 --> 00:00:41,580 One process must finish before starting another. 11 00:00:41,880 --> 00:00:47,280 Luckily, we can run one extensive command to process files all at once. 12 00:00:47,790 --> 00:00:53,490 We're allowed to have multiple inputs and outputs under a single FFmpeg process. 13 00:00:54,560 --> 00:00:55,520 Do you understand? 14 00:00:55,610 --> 00:00:58,280 Let's build the command in your editor. 15 00:00:58,460 --> 00:01:00,650 Open the FFmpeg service. 16 00:01:03,110 --> 00:01:07,880 We're going to write our code above the run function in the get screenshots function. 17 00:01:08,120 --> 00:01:12,290 First, we need to pick a series of timestamps for generating images. 18 00:01:12,530 --> 00:01:16,070 You can go about this any way you'd like for simplicity. 19 00:01:16,160 --> 00:01:20,930 We're going to generate three screenshots from the first three seconds of the video. 20 00:01:21,200 --> 00:01:23,420 Create an array called seconds. 21 00:01:25,950 --> 00:01:30,990 In this era, we're going to store the following numbers one, two three. 22 00:01:33,570 --> 00:01:37,470 Next, we're going to create another array called commands. 23 00:01:39,890 --> 00:01:44,780 This array is going to contain the list of commands to run with FFmpeg. 24 00:01:45,140 --> 00:01:48,930 Initially, it's going to be empty for a type safety. 25 00:01:48,950 --> 00:01:51,860 We should annotate this array at the moment. 26 00:01:51,980 --> 00:01:56,210 TypeScript will assume this array can contain any type of value. 27 00:01:56,510 --> 00:02:01,700 We should restrict the values in the array to strings by annotating our variable. 28 00:02:04,290 --> 00:02:09,660 Next, we're going to begin looping through the seconds away with the for each function. 29 00:02:12,080 --> 00:02:16,460 We should push a series of commands for every item in the second survey. 30 00:02:16,760 --> 00:02:19,160 One item equals one screenshot. 31 00:02:19,430 --> 00:02:26,570 For example, if we had six items in the array, we should get six screenshots by storing the timestamps 32 00:02:26,570 --> 00:02:27,320 in an array. 33 00:02:27,560 --> 00:02:33,800 We'll be able to scale our project to various amounts of screenshots inside the argument list. 34 00:02:33,980 --> 00:02:38,510 We'll accept the element in the current iteration with an alias of second. 35 00:02:41,000 --> 00:02:47,360 Inside the function, we're going to push a new command by calling the push function on the command 36 00:02:47,390 --> 00:02:47,870 array. 37 00:02:50,550 --> 00:02:56,760 The command is going to be very similar to the command we passed into the run function, actually, 38 00:02:56,880 --> 00:03:01,380 we can cut and paste the command from the run function to the push function. 39 00:03:03,890 --> 00:03:07,610 Typically, developers will push one item into an array. 40 00:03:07,880 --> 00:03:13,130 Luckily, the push function allows us to push multiple items into an array. 41 00:03:13,550 --> 00:03:17,000 There are a couple of modifications we should make to the command. 42 00:03:17,270 --> 00:03:20,720 As it stands, the same screenshot will be generated. 43 00:03:21,050 --> 00:03:26,930 Firstly, we're going to change the time stamp by converting the string into a string templates. 44 00:03:29,390 --> 00:03:35,720 The number at the end can be replaced with an expression, the expression, it will be the second argument. 45 00:03:38,200 --> 00:03:42,540 By having a dynamic time stamp will always have a unique screenshot. 46 00:03:42,850 --> 00:03:45,460 Next, we need to change the file name. 47 00:03:45,790 --> 00:03:51,400 New screenshot files will overwrite the previous screenshots to prevent that from happening. 48 00:03:51,550 --> 00:03:54,550 We're going to convert the string to a string templates. 49 00:03:56,970 --> 00:03:58,120 Same as before. 50 00:03:58,170 --> 00:04:01,140 The number can be replaced with the second argument. 51 00:04:03,520 --> 00:04:07,510 The last step is to execute this command with the run function. 52 00:04:07,780 --> 00:04:14,230 There is one problem if we hover our mouse over this function, the function expects a list of strings 53 00:04:14,230 --> 00:04:15,280 as an argument. 54 00:04:15,580 --> 00:04:17,649 It doesn't want an array of strings. 55 00:04:17,890 --> 00:04:22,870 We can overcome this problem by using the spread operator with the commands array. 56 00:04:25,380 --> 00:04:26,970 Let's give our app a test. 57 00:04:27,250 --> 00:04:30,600 Try uploading a file with the developer tools opened. 58 00:04:33,020 --> 00:04:40,280 Inside the console, dozens of logs are added by the FFmpeg package, similar to before you should be 59 00:04:40,280 --> 00:04:42,110 able to find three outputs. 60 00:04:42,440 --> 00:04:43,160 Here's one. 61 00:04:45,510 --> 00:04:46,290 Here's another. 62 00:04:48,720 --> 00:04:50,310 Here's the last output. 63 00:04:50,580 --> 00:04:52,500 A total of three outputs. 64 00:04:52,740 --> 00:04:58,680 As long as you can find three outputs for the images, you have successfully created a screen shots. 65 00:04:58,950 --> 00:05:02,550 We can't prove it because we haven't rendered these screenshots. 66 00:05:02,850 --> 00:05:08,220 Let's begin sending these screenshots from the service to the components in the next lecture.