How to fetch the Preview Image of a Stream

Dimitrios.Ververidis · 3 September 2021 09:02

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

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 ?

D.

AlanRynne · 3 September 2021 09:11

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 https://speckle.xyz/streams/81d2f2c135 using the /preview/STREAM_ID url:

https://speckle.xyz/preview/81d2f2c135

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:

https://speckle.xyz/preview/81d2f2c135/branches/info

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.

github.com

specklesystems/speckle-server/blob/eeadf103cbf9e4243cd4491de571d2cc420b2726/packages/frontend/nginx/nginx.conf#L35-L46

    
      
          location ~* ^/(graphql|explorer|(auth/.*)|(objects/.*)|(preview/.*)|(api/.*)) {
            resolver 127.0.0.11 valid=30s;
            set $upstream_speckle_server speckle-server;
            client_max_body_size 100m;
            proxy_pass http://$upstream_speckle_server:3000;
          
          
  proxy_buffering off;
            proxy_request_buffering off;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
          }

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

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

Dimitrios.Ververidis · 15 September 2021 10:01

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.

AlanRynne · 15 September 2021 10:21

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

github.com

specklesystems/speckle-server/blob/2851b162edb56d28a98239000152bc349b398128/packages/frontend/src/components/PreviewImage.vue#L35-L43

    
      
          async getPreviewImage() {
            const res = await fetch(this.url, {
              headers: localStorage.getItem('AuthToken')
                ? { Authorization: `Bearer ${localStorage.getItem('AuthToken')}` }
                : {}
            })
            const blob = await res.blob()
            this.currentPreviewImg = URL.createObjectURL(blob)
          }

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

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

dimitrie · 15 September 2021 11:52

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

Dimitrios.Ververidis · 15 September 2021 13:00

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

dimitrie · 15 September 2021 13:46

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

Jedd · 15 September 2021 15:05

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.

izzylys · 15 September 2021 15:15

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:

https://speckle.xyz/preview/<YOUR-STREAM-ID>

commit preview:

https://speckle.xyz/preview/<YOUR-STREAM-ID>/commits/<YOUR-COMMIT-ID>

branch preview:

https://speckle.xyz/preview/<YOUR-STREAM-ID>/branches/<YOUR-BRANCH-NAME>

object preview:

https://speckle.xyz/preview/<YOUR-STREAM-ID>/objects/<YOUR-OBJECT-ID>

EDIT: added this to the guide for future reference hehe
https://speckle.guide/dev/server-stream-previews.html

Dimitrios.Ververidis · 17 September 2021 04:34

Hi thank you all,

I confirm that
https://speckle.xyz/preview/<YOUR-STREAM-ID>/main
and
https://speckle.xyz/preview/<YOUR-STREAM-ID>/
do the same, they get the Stream image.

Also,
https://speckle.xyz/preview/<YOUR-STREAM-ID>/commits/<YOUR-COMMIT-ID>
gets the commit image, and
https://speckle.xyz/preview/<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->SetURL(URL);
	HttpRequest->SetHeader("Authorization", "Bearer " + Bearer);
	HttpRequest->SetVerb(TEXT("GET"));
	HttpRequest->ProcessRequest();