1 00:00:00,210 --> 00:00:06,660 In this lecture, we are going to create URLs from our screenshots, our screenshots are being stored 2 00:00:06,660 --> 00:00:07,860 as binary data. 3 00:00:08,130 --> 00:00:13,080 Unfortunately, browsers do not allow us to display an image with binary data. 4 00:00:13,380 --> 00:00:18,000 We must set an image tags source attribute to a URL. 5 00:00:18,330 --> 00:00:23,460 Therefore, we need to convert a screenshot from a binary array to a stream. 6 00:00:24,090 --> 00:00:27,330 It's completely possible, but it's going to take some work. 7 00:00:27,600 --> 00:00:28,410 Let's begin. 8 00:00:28,710 --> 00:00:31,740 Open the FFmpeg service in your editor. 9 00:00:34,360 --> 00:00:38,140 We're going to continue working on the get screenshots function. 10 00:00:38,470 --> 00:00:42,580 We're not going to directly return the screenshots in their binary form. 11 00:00:42,850 --> 00:00:49,570 Instead, we're going to return you URLs to the images component shouldn't have to worry about working 12 00:00:49,570 --> 00:00:50,770 with binary data. 13 00:00:51,100 --> 00:00:54,680 Data should be ready to go at the end of the function. 14 00:00:54,700 --> 00:00:58,420 We're going to create an empty array called screenshots. 15 00:00:58,690 --> 00:01:02,560 The items in the array will be annotated with the string type. 16 00:01:05,110 --> 00:01:07,930 We're going to push the URLs into this array. 17 00:01:08,230 --> 00:01:12,310 Next, we're going to create the same loop on the seconds array. 18 00:01:14,880 --> 00:01:21,570 As we discussed before, a screenshot is generated for each item in this array, we can loop through 19 00:01:21,570 --> 00:01:24,390 the array to get the same number of you are L's. 20 00:01:24,630 --> 00:01:29,580 Inside the callback function, create a variable called screenshot file. 21 00:01:32,150 --> 00:01:36,440 The screenshot file is stored inside the isolated file system. 22 00:01:36,710 --> 00:01:40,610 We need to grab the file before we can create a new URL. 23 00:01:40,880 --> 00:01:46,790 We can call the F MPEG dot fs function to grab files from the file system. 24 00:01:49,360 --> 00:01:53,710 For the first argument, will pass in a value of Reid file. 25 00:01:56,270 --> 00:02:02,810 Previously, we were writing to the file system, the Reid File Command will grab a file from the same 26 00:02:02,810 --> 00:02:03,380 system. 27 00:02:03,710 --> 00:02:08,120 The second argument to the function is the name of the file we'd like to grab. 28 00:02:08,449 --> 00:02:12,530 The file name must correspond to the file name in the output. 29 00:02:12,860 --> 00:02:17,180 If we look at the first loop, the name of the file is the word output. 30 00:02:17,510 --> 00:02:21,660 The element from the current iteration is appended at the end of the name. 31 00:02:21,980 --> 00:02:23,390 Let's copy this name. 32 00:02:25,920 --> 00:02:30,510 Next, we can paste it as the second argument to the first function. 33 00:02:33,020 --> 00:02:38,810 We can hover our mouse over the variable to view the type of data returned by the first function. 34 00:02:39,170 --> 00:02:41,960 It's going to give us an array of binary data. 35 00:02:42,320 --> 00:02:47,090 The next step is to begin converting the binary data into a URL. 36 00:02:47,420 --> 00:02:50,930 There's a feature called Blobs for creating new URLs. 37 00:02:53,410 --> 00:02:59,410 I'm not kidding when I say it's called a blob blob is short for a binary large object. 38 00:02:59,770 --> 00:03:03,130 It's an alternative data type to storing binary data. 39 00:03:03,490 --> 00:03:08,500 The biggest difference between a blob and array is what we can do with a blob. 40 00:03:09,070 --> 00:03:12,730 Browsers can render the contents of the blob on a page. 41 00:03:13,030 --> 00:03:16,780 If we're storing an image in a blob, we can render an image. 42 00:03:17,170 --> 00:03:19,150 There is a downside to blobs. 43 00:03:19,300 --> 00:03:20,410 They're immutable. 44 00:03:20,650 --> 00:03:24,370 We can't directly update a blob after it's been created. 45 00:03:24,730 --> 00:03:29,560 It's not going to be a problem, but you should keep this in mind when working with blobs. 46 00:03:32,020 --> 00:03:39,280 Let's begin converting the binary data into a blob after the screenshot file variable create another 47 00:03:39,280 --> 00:03:41,650 variable called screenshot blob. 48 00:03:42,010 --> 00:03:45,790 Its value will be a new instance of the blob class. 49 00:03:48,360 --> 00:03:50,550 This function has two arguments. 50 00:03:50,790 --> 00:03:53,100 The first argument is an array buffer. 51 00:03:53,460 --> 00:03:58,710 We're going to pass in an array with the screenshot file buffer property. 52 00:04:01,200 --> 00:04:07,800 The buffer property contains the actual data of the file, the outer array is a representation of the 53 00:04:07,800 --> 00:04:08,280 data. 54 00:04:08,580 --> 00:04:15,000 The Blob instance wants the raw data, not a representation of the data for the second argument. 55 00:04:15,120 --> 00:04:17,250 We're going to pass in and object. 56 00:04:19,740 --> 00:04:26,520 The object is an additional list of information about the file browsers don't understand the file type 57 00:04:26,520 --> 00:04:27,270 of a blob. 58 00:04:27,540 --> 00:04:31,620 We need to explicitly set that type by adding the type property. 59 00:04:31,980 --> 00:04:36,350 The mime type for a PNG image is image PNG. 60 00:04:39,330 --> 00:04:43,560 Our blob is ready, the last step is to convert it into a URL. 61 00:04:43,800 --> 00:04:47,850 JavaScript has a function for creating URLs from objects. 62 00:04:48,090 --> 00:04:50,880 Technically, the blob type is an object. 63 00:04:51,120 --> 00:04:53,910 Therefore, we can create a URL from it. 64 00:04:54,150 --> 00:04:58,050 Below, create a variable called screenshot URL. 65 00:04:58,380 --> 00:05:00,450 Its value will be the URL. 66 00:05:00,780 --> 00:05:05,490 Create object URL with the screenshot blob variable passed in. 67 00:05:08,170 --> 00:05:12,760 The create object URL function will create a URL to a blob. 68 00:05:13,090 --> 00:05:16,540 This URL can be used to render a file in the browser. 69 00:05:16,840 --> 00:05:20,980 Next, let's push this URL into these screenshots array. 70 00:05:23,550 --> 00:05:24,930 There's one final step. 71 00:05:25,170 --> 00:05:27,720 We're going to return these screenshots array. 72 00:05:30,310 --> 00:05:35,530 Our function is complete, we've successfully generated screenshots from a video. 73 00:05:35,830 --> 00:05:38,440 These screenshots are returned by our function. 74 00:05:38,740 --> 00:05:43,120 Our component needs to be updated to receive the array of URLs. 75 00:05:43,360 --> 00:05:46,150 We'll handle this step in the next lecture.