In this lecture, we are going to create URLs from our screenshots, our screenshots are being stored
as binary data.
Unfortunately, browsers do not allow us to display an image with binary data.
We must set an image tags source attribute to a URL.
Therefore, we need to convert a screenshot from a binary array to a stream.
It's completely possible, but it's going to take some work.
Let's begin.
Open the FFmpeg service in your editor.
We're going to continue working on the get screenshots function.
We're not going to directly return the screenshots in their binary form.
Instead, we're going to return you URLs to the images component shouldn't have to worry about working
with binary data.
Data should be ready to go at the end of the function.
We're going to create an empty array called screenshots.
The items in the array will be annotated with the string type.
We're going to push the URLs into this array.
Next, we're going to create the same loop on the seconds array.
As we discussed before, a screenshot is generated for each item in this array, we can loop through
the array to get the same number of you are L's.
Inside the callback function, create a variable called screenshot file.
The screenshot file is stored inside the isolated file system.
We need to grab the file before we can create a new URL.
We can call the F MPEG dot fs function to grab files from the file system.
For the first argument, will pass in a value of Reid file.
Previously, we were writing to the file system, the Reid File Command will grab a file from the same
system.
The second argument to the function is the name of the file we'd like to grab.
The file name must correspond to the file name in the output.
If we look at the first loop, the name of the file is the word output.
The element from the current iteration is appended at the end of the name.
Let's copy this name.
Next, we can paste it as the second argument to the first function.
We can hover our mouse over the variable to view the type of data returned by the first function.
It's going to give us an array of binary data.
The next step is to begin converting the binary data into a URL.
There's a feature called Blobs for creating new URLs.
I'm not kidding when I say it's called a blob blob is short for a binary large object.
It's an alternative data type to storing binary data.
The biggest difference between a blob and array is what we can do with a blob.
Browsers can render the contents of the blob on a page.
If we're storing an image in a blob, we can render an image.
There is a downside to blobs.
They're immutable.
We can't directly update a blob after it's been created.
It's not going to be a problem, but you should keep this in mind when working with blobs.
Let's begin converting the binary data into a blob after the screenshot file variable create another
variable called screenshot blob.
Its value will be a new instance of the blob class.
This function has two arguments.
The first argument is an array buffer.
We're going to pass in an array with the screenshot file buffer property.
The buffer property contains the actual data of the file, the outer array is a representation of the
data.
The Blob instance wants the raw data, not a representation of the data for the second argument.
We're going to pass in and object.
The object is an additional list of information about the file browsers don't understand the file type
of a blob.
We need to explicitly set that type by adding the type property.
The mime type for a PNG image is image PNG.
Our blob is ready, the last step is to convert it into a URL.
JavaScript has a function for creating URLs from objects.
Technically, the blob type is an object.
Therefore, we can create a URL from it.
Below, create a variable called screenshot URL.
Its value will be the URL.
Create object URL with the screenshot blob variable passed in.
The create object URL function will create a URL to a blob.
This URL can be used to render a file in the browser.
Next, let's push this URL into these screenshots array.
There's one final step.
We're going to return these screenshots array.
Our function is complete, we've successfully generated screenshots from a video.
These screenshots are returned by our function.
Our component needs to be updated to receive the array of URLs.
We'll handle this step in the next lecture.