const thumbnails = call.state.thumbnails;
const imageUrl = thumbnails.image_url;
console.log(imageUrl);
// or
const subscription = call.state.thumbnails$.subscribe((thumbnails) => {
const imageUrl = thumbnails.image_url;
console.log(imageUrl);
});
// and don't forget to unsubscribe
subscription.unsubscribe();
Call Preview and Thumbnail
Depending on your call type settings, our system can occasionally generate a preview image (thumbnail) for your call. You can use this image to show a preview of the call in your app, typically in a lobby, waiting room, etc.
Get the preview thumbnail
Show the preview thumbnail
Our SDK provides a helper method that takes care of the image loading and error handling for you.
All we need is a reference to an <img>
element that has the correct dimensions.
We will take the dimensions in consideration, when loading the image, and our CDN will generate the correct image size for you.
// render image element in your view layer
<img
id="my-call-preview-img"
class="my-call-preview-class"
alt="Call Preview Thumbnail"
/>;
// in your code
const myCallPreviewImg = document.getElementById("my-call-preview-img");
const cleanup = call.bindCallThumbnailElement(myCallPreviewImg);
// and don't forget to clean up
cleanup();
On this page: