@mux/ai

Hey guys, Dave here with Mux and in this video we're

going to talk about how you can generate images

and animated GIFs, GIFs?

Uh from your videos on demand just by making a request to

a URL So let's dive into it.

I'm here on the asset page in the Mux dashboard.

I'm going to go to the build tab and try to find out some

more information about this.

If you scroll down under this build tab, you will

see ways that you can get previews of your video listed

right here on the dashboard.

I'm going to click on create thumbnails and let's take

a look at what we see here.

So it's showing us a URL that we can build using

the playback ID from this particular video.

I just put using that URL as the source for your

image tag in your HTML.

It will allow you to show the preview of the thumbnail.

Uh, at the given time that you are providing,

right, the URL, which is a pretty nifty feature.

So let's take a look here.

We have the protocol, we have image.

Mux.

com, the playback ID is here, and this ID is the same as

used up here, this public playback ID, which is used to

actually play this video back, uh, in your video player.

Uh, but what we're doing here at the end is just

tagging on thumbnail dot.

And, uh, Mux does support some other file formats,

but we're just going to use a png for now.

And then we have these query parameters here

at the end as well.

And these query parameters you can use to specify the

dimensions of the thumbnail.

or the specific time that you are requesting

that a thumbnail be given to you from that video.

Um, so let's just use this as is and take a look at

what that might look like.

I'm over here in code sandbox and I have a url for our

still frame from this video and that url I specified the

Thumbnail as a WebP file, which is a little bit more

performant and maybe it saves us a little bit on bandwidth

but I have specified the width, I specified the height,

and I specified the time.

I set the time to in seconds to 129 which is two

minutes and nine seconds into this this video so if

I were to go back to the dashboard and I can take

a look at two minutes and nine seconds in this video.

We should be able to see the exact same thumbnail 209.

So kind of neat.

We just generated that on demand without having

to do any pre prep.

And if I wanted to take a thumbnail from earlier

in the video, let's say 19 seconds, I can just

change the time to 19.

And it would pull the still frame from that

time of the video.

So really cool, quick way to be able to generate

those stills on demand without having to do

any kind of pre prep.

There's, uh, several different parameters that you can

pass during this generation.

You can specify the file format to be one of.

PNG, JPEG, or a WebP file.

Uh, you can also pass the width, height, rotation,

if you want to change the way that the image is

displaying on your web page.

And then flip it as well, or mirror it.

Uh, there's also fit mode, which will allow you to

specify basically how the image is showing up, uh, if

the image is in a different aspect ratio, but you want it

to fit a different dimension on, in your application.

You can specify and choose which sort of mode

you would like to use to fill out the frame.

So let's say for example, um, for this image that we

pulled before, we have sort of this long or wide aspect

ratio, which might be the look you're looking for.

But if you had to fill a taller box and you wanted

to have the bars brought in, you might use a fit mode.

Let's see, fit mode, pad, maybe, and let's

see what we get here.

Yeah.

So look at that.

The pillar boxes are brought in and now we're filling

in any of the extra space specified in our height

and width aspect ratio with black bars so that there's

some filler and padding that's happening there to

maintain your aspect ratio.

So just another neat way that we can leverage the.

Query parameters to generate the image on demand based on

what our application needs.

Alright, so I'm going to go back here and let's take

a look at how we can then generate the animated GIF.

So we have the same thing here, and all we have to

do is insert the playback ID forward slash animated

dot gif, or you could say webp there at the end.

So let's take a look at that over here.

We have this exact same playback ID here

in a second image.

And animated, I'm using the WebP with a width of 428,

and I'm currently styling this so that it appears

behind the still frame.

And in my CSS, when you hover over the still frame,

the opacity will drop to zero using this transition,

and we'll be able to see The animated, the animated

frames occurring right underneath the still.

So watch the mouse, move the mouse over there and we can

see that animated preview happening right under there.

So this is kind of a common effect that you might want to

be able to show thumbnails.

That show in preview of what's happening under the thumbnail

when you on the, uh, when the user hovers over that, um,

let's talk about how we would show a still frame from a, uh,

asset that is, uh, Requiring a signed or private playback ID.

So this particular asset here in the Mugs dashboard

doesn't actually have a public playback ID.

It only has a signed playback ID.

So unless we sign the request to retrieve this

video or its thumbnails, we won't be able to see it.

We won't have access to it.

So let's understand here by going through

the Mugs dashboard.

this particular request, how we can actually sign the

request for a thumbnail so we can preview this video.

So I'm going to look again under this create

thumbnail section in the dashboard and notice

that we have a little bit different of a request here.

We pass still the playback ID right here in the URL.

We still get the thumbnail dot png, but we have this

query parameter for token.

And the token is a signed JWT that will allow access to view

the video or the thumbnail as long as it's signed

with the Mux signing key.

You can generate a signing key in your Mux account

by visiting the settings and go to signing keys.

And we'll use the signing key to authorize access.

To viewing this thumbnail, so I'm going to go back over to

code sandbox and take a look at this particular page here

Where, if we were to make the same request for this image

without using a signed token.

Let's just do that really quick.

We'll create a new image.

Hit the source as here.

Alt equals my image.

Uh, you can probably guess what's going to happen here.

So, trying to load this PNG right here.

I'm going to hit reload and it's not actually loading.

It doesn't work because we don't have signed, uh, access

to this particular image.

So what I'm going to do in order to sign access is.

Use the Mux node SDK here in my Next.

js app.

And the Mux node SDK will use some environment variables

that are in my, set in my env file here in Next.

js.

We have a Mux sign in key, which was generated

in the dashboard.

And the Mux private key here as well.

Now, Mux node sdk is smart enough to know if you use

these exact environment variable names, Mux signing

key, and this Mux private key here, it will pick up

and load, it will pick up on them and load them right

into the Mux node sdk.

So what we can do now is specify our thumb

parameters, uh, which are the same query parameters

that we used originally in the unsigned request.

So here I can pass time.

I can pass, uh, so I'm passing five seconds is

where I want the thumbnail from, and the width is 400.

And here we're making that signing, uh, creating

that signed token.

So here I pass my, uh, signed playback ID.

And I need to tell it that I'm signing a thumbnail.

So it knows what to expect when making this request, I

pass the params that I set up here, right into the library.

And in return, I will receive this thumb token,

which is just a string for the signed URL.

Um, so now I can go to create this image down here.

I have a source.

We pass the playback ID here, and then the token goes

right to the And notice we are not including the query

parameters here at all.

We just pass the token and it knows already which query

parameters were set while you were assigning the token.

And there it is.

On the right hand side it shows up as expected.

Uh, we have a white border around it just to make sure

that it's looking good.

that I created here in the CSS.

And you can also take a look if we were to change

this to, let's say 15 seconds and just reload, it

will update automatically to be able to show that

new frame at 15 seconds.

That's all we got today to talk about with, uh,

generating thumbnails and animated GITs on demand.

Until next time, see you folks.