How to fetch the Preview Image of a Stream

Hi is there any way to fetch the icon as it was generated in ?

We have made a demo app in UE4 where the icons of the Streams would be useful for selecting the Stream

We will release a video soon. The app is dynamic, i.e. it fetched all the Streams of a certain bearer.

Is the link stored in Apollo server or in Nginx ?



Hey @Dimitrios.Ververidis!

Wow this is cool! I’m not the most knowledgeable person to answer this (@cristi or @dimitrie, please correct me if I’m wrong) but here it goes:

The preview service is run as a separate module from the server. You can get the preview image for any stream like this one using the /preview/STREAM_ID url:

I’m fairly certain the route structure is the same as for the stream url. So just replacing streams for preview should do the trick to get the image. See a specific branch preview:

As for how this actually works, as far as I’m aware it is configured through Nginx, which sends all /preview request to the server.

Then the server interacts with the preview module to return your image:

And that’s as far as my knowledge can take you :sweat_smile: Looking forward to a demo of that cool app!

1 Like

Hi Alan,
also @dimitrie

How the system understands by the URL that I have access to this stream icon ? The security mechanism seems confusing to me. Below I have managed also to do also a listing widget for the streams inside unreal.

Hey @Dimitrios.Ververidis,

If the stream is public, the url will just work. If you need to access private streams, then you’d need to fetch the image while passing your auth token. If no token is found, it will default to the “This stream is private” image of the Red speckle cube.

In our frontend, you’ll find a component called PreviewImage.vue that has the functionality you are looking for :point_down:

Basically, we fetch the image, create a temporary url for it and assign it to the <img/> src tag.

Notice that if a token exists on that session, we pass it into the headers. If no token exists we try anyway, but request may end up with the red speckle logo :smiley:

Hope that helps! @dimitrie, feel free to correct me if anything I said was not acurate :sweat_smile:

1 Like

Sounds correct from my end. I think possibly the trick lies into how those images are requested within the unreal ui. The blob url dance won’t be applicable there. The blue brick though makes me think that the preview for those stream is not ready yet (@cristi?), though i see some that should definitively have a preview ready (ie, fashion centre)… We’d need to inspect those requests somehow to figure out why the blue brick is always there :confused:

Yes, I have noticed that the urls are estimated on the fly by the web portal but they are not the ones with the preview suffix. If it helps, the code I have used in ue4 is the “Asynch Download Image” blueprint

1 Like

Hum. I’ll ping @Jedd, the only one from us who knows of this weird grasshopper!


Do you have a branch called info for all of these streams?
If not, try changing the url to \branches\main

I’ve tested it with this script and I managed to get the preview into an image widget.


just to further expand on the url scheme for preview images, you can take any url (stream, commit, branch, or object) and replace the word stream with preview

stream preview:<YOUR-STREAM-ID>

commit preview:<YOUR-STREAM-ID>/commits/<YOUR-COMMIT-ID>

branch preview:<YOUR-STREAM-ID>/branches/<YOUR-BRANCH-NAME>

object preview:<YOUR-STREAM-ID>/objects/<YOUR-OBJECT-ID>

EDIT: added this to the guide for future reference hehe


Hi thank you all,

I confirm that<YOUR-STREAM-ID>/main
do the same, they get the Stream image.

gets the commit image, and<YOUR-STREAM-ID>/objects/<YOUR-OBJECT-ID>
gets the object succesfully. I haven’t tested the branch, but I guess it should be working.
Also the red cube “Stream is private” is also functioning well for the private streams.

I confirm that adding the headers like this, we can get the private streams in ue4 ! Thanks!

HttpRequest->OnProcessRequestComplete().BindUObject(this, &UAsyncTaskDownloadImageWithHeader::HandleImageRequest);
	HttpRequest->SetHeader("Authorization", "Bearer " + Bearer);