1 00:00:00,120 --> 00:00:07,230 In this lecture, we're going to pass our file to FFmpeg internally, FFmpeg, we'll create a separate 2 00:00:07,230 --> 00:00:08,850 memory storage for files. 3 00:00:09,360 --> 00:00:14,730 We're going to be dealing with video files, which can be very large without a separate memory storage 4 00:00:14,730 --> 00:00:15,240 system. 5 00:00:15,390 --> 00:00:18,040 Loading files can cause our app to lag. 6 00:00:18,390 --> 00:00:22,620 Generating screenshots will require storing the user's upload in memory. 7 00:00:23,190 --> 00:00:27,060 The F of package has a function for handling this process. 8 00:00:27,330 --> 00:00:29,550 Let's get started in your editor. 9 00:00:29,730 --> 00:00:32,250 Open the upload component class file. 10 00:00:34,780 --> 00:00:38,410 The first step is to send the file from our component to our service. 11 00:00:38,710 --> 00:00:42,640 We're storing the file in these store file function in this function. 12 00:00:42,820 --> 00:00:46,420 We're retrieving the file from the event after doing so. 13 00:00:46,510 --> 00:00:49,780 We're checking if the file is valid, if it is. 14 00:00:49,960 --> 00:00:52,360 We can start sending it over to our service. 15 00:00:52,630 --> 00:00:55,630 Processing and image is an asynchronous action. 16 00:00:55,960 --> 00:00:58,780 We should apply the async keyword to the function. 17 00:01:01,240 --> 00:01:06,580 Next, let's run a function called FFmpeg service, dont get screenshots. 18 00:01:09,000 --> 00:01:15,330 Like I said before, generating a screenshot is an asynchronous action ahead of time, we should apply 19 00:01:15,330 --> 00:01:17,340 the await keyword to the function. 20 00:01:19,880 --> 00:01:23,690 Lastly, we should pass on the file object to the service. 21 00:01:26,160 --> 00:01:31,860 Our service needs to be updated with this function definition, open the FFmpeg service. 22 00:01:34,320 --> 00:01:39,090 Next to finally get screenshots function with the async keyword. 23 00:01:41,600 --> 00:01:45,140 In the argument list, we're going to accept the final arguments. 24 00:01:45,450 --> 00:01:47,690 It'll be annotated with the file type. 25 00:01:50,230 --> 00:01:51,430 We're almost finished. 26 00:01:51,580 --> 00:01:56,440 The overall goal is to store the file in FFmpeg, separate memory storage. 27 00:01:56,740 --> 00:02:02,860 Otherwise, it won't be able to manipulate the file before we send the file, it needs to be converted 28 00:02:02,860 --> 00:02:04,180 into binary data. 29 00:02:04,510 --> 00:02:07,330 We've encountered this issue before with images. 30 00:02:07,600 --> 00:02:09,430 Images are stored as binary. 31 00:02:09,580 --> 00:02:11,410 The same is true for videos. 32 00:02:11,920 --> 00:02:16,600 However, we're receiving the file as a file object in JavaScript. 33 00:02:16,960 --> 00:02:21,160 The file needs to be converted from a file object to binary data. 34 00:02:21,640 --> 00:02:27,850 Luckily, the FFmpeg package has a helper function for performing this conversion at the top of the 35 00:02:27,850 --> 00:02:28,410 file. 36 00:02:28,450 --> 00:02:34,450 Update the import statement for the FFmpeg package to include a function called fetch file. 37 00:02:36,970 --> 00:02:43,330 If we have our mouse over this function, we can view the return type, the value returned by this function 38 00:02:43,330 --> 00:02:48,070 is a promise that resolves to an array of integers a.k.a. binary data. 39 00:02:50,590 --> 00:02:56,770 It's the same type of data from our image app after decoding an image, we will return to an array of 40 00:02:56,770 --> 00:02:57,760 binary data. 41 00:02:58,060 --> 00:03:04,060 It's very common to work binary data in systems programming, especially if you're working with files. 42 00:03:06,490 --> 00:03:08,290 Let's begin using this function. 43 00:03:08,590 --> 00:03:13,890 Back in the get screenshots function, we're going to create a variable called data. 44 00:03:14,230 --> 00:03:18,700 Its value will be the fetch file function with the await keyword. 45 00:03:21,230 --> 00:03:23,420 Remember, we're dealing with the function. 46 00:03:23,660 --> 00:03:28,490 We should add the await keyword to receive the value resolved by the promise. 47 00:03:28,910 --> 00:03:34,670 This function has one argument, which is the file will pass and the file arguments. 48 00:03:37,330 --> 00:03:44,080 There's one last step the Fitch file function will convert the file to binary data, storing the data 49 00:03:44,080 --> 00:03:46,630 in memory is not performed by this function. 50 00:03:46,990 --> 00:03:54,570 There's an alternative function below the variable called the this dot FFmpeg dot fs function. 51 00:03:57,140 --> 00:03:59,600 Air Force is short for file system. 52 00:03:59,900 --> 00:04:06,560 The PFS function gives us access to the packages independent memory system, we can read and write files 53 00:04:06,560 --> 00:04:07,490 to this system. 54 00:04:07,760 --> 00:04:12,530 If we were to run FFmpeg, it would search for files from this memory. 55 00:04:12,800 --> 00:04:18,230 Therefore, we need to store the file before we can start running FFmpeg commands. 56 00:04:18,740 --> 00:04:21,110 This function has a couple of arguments. 57 00:04:21,410 --> 00:04:24,500 The first argument is the action we wish to perform. 58 00:04:24,770 --> 00:04:28,880 We can read, write and delete files from the file system. 59 00:04:29,180 --> 00:04:34,940 For this example, we will write a new file by passing in a stream called Write File. 60 00:04:37,410 --> 00:04:40,440 Next, we need to provide a name for our file. 61 00:04:40,680 --> 00:04:45,390 We'll be able to reference our file by this name to keep things consistent. 62 00:04:45,510 --> 00:04:47,880 We're going to use the original file name. 63 00:04:48,210 --> 00:04:53,370 Accessing the original file name can be done through the file name property. 64 00:04:55,900 --> 00:04:58,660 The last argument is the data for the file. 65 00:04:58,840 --> 00:05:01,050 Let's pass on the data variable. 66 00:05:03,530 --> 00:05:08,060 After making those changes, let's verify the file is written to the memory. 67 00:05:08,390 --> 00:05:11,930 Refresh the upload page with the developer tools opened. 68 00:05:14,490 --> 00:05:18,960 After FFmpeg has been initialized, try uploading a new file. 69 00:05:21,450 --> 00:05:24,870 In the console, a log will be added by the package. 70 00:05:25,170 --> 00:05:28,560 It'll tell us a new file has been written to the file system. 71 00:05:28,890 --> 00:05:32,550 Information such as the name and file size are provided. 72 00:05:32,820 --> 00:05:35,910 You should see a similar log after uploading a file. 73 00:05:36,120 --> 00:05:40,490 If you do, you successfully written a new file to the file system. 74 00:05:40,740 --> 00:05:44,370 In the next lecture, we can begin generating screenshots.