Window Thumbnails

1 Introduction

The Sharing Selected Screen and Sharing Selected Window functions obtain the screen and window list by using the enumScreenList and enumWindowList interfaces respectively, and then select a certain screen or window in the form of code As a collection target. This process of selecting the collection target through the code is not intuitive, the window thumbnail is just an auxiliary function tailored for this selection process. By obtaining the thumbnail of the screen or window, the developer displays it on the html.img tag, and selects the tag to select a screen or window as the collection target.

2 Thumbnail Call Process

2.1 Get Thumbnail

Call the enumScreenThumbnail and enumWindowThumbnail interfaces to obtain the thumbnail array information of the screen and window respectively.

// Get a list of screen thumbnails
let screenThumbnailList = await zgScreenCapture.enumScreenThumbnail();
// Get a list of window thumbnails
let windowThumbnailList = await zgScreenCapture.enumWindowThumbnail();

The prototype of each member in the screen thumbnail array and window thumbnail array is as follows.

// Thumbnail item for a single screen
interface IZegoExpressPluginScreenCaptureScreenThumbnailItem {
    /**
     * identification for the screen
     */
    screenID: any,

    /**
     * screen thumbnail
     */
    imageThumbnail: IZegoExpressPluginScreenCaptureThumbnailBitmap
}

// Thumbnail item of a single window
interface IZegoExpressPluginScreenCaptureWindowThumbnailItem {

    /**
     * identification for the window
     */
    handle: any,

    /**
     * window thumbnail
     * could be null if sdk cannot get the imageThumnail from the system.
     */
    imageThumbnail: IZegoExpressPluginScreenCaptureThumbnailBitmap

    /**
     * window icon thumbnail
     */
    iconThumbnail: IZegoExpressPluginScreenCaptureThumbnailBitmap
}

// Specific thumbnail data
interface IZegoExpressPluginScreenCaptureThumbnailBitmap {
    /**
     * with
     */
    width: number,

    /**
     * height
     */
    height: number,

    /**
     * the base64 data of the image
     * example: h5.img.setAttribute('src', "data:image/png;base64," + png)
     */
    png: any,
}

2.2 Bind to "img" Tag

Bind img tags to all screens and window thumbnails, and select the tags to select the corresponding screen or window as the collection target.

// Show all screen thumbnails
for everyScreenItem in screenThumbnailList
{
    // Get an img tag
    let theScreenImg = document.getElementById("screenThumbnail")
    // Set the source of the img tag to the screen thumbnail
    let screenImgSrc = everyScreenItem.imageThumbnail.png
    theScreenImg.setAttribute('src', "data:image/png;base64," + screenImgSrc)

    // Listen to the selected event on the label, select this screen as the collection target
    theScreenImg.onClick = ()=>{
       zegoScreenCapture.setTargetScreen(everyScreenItem.screenID);
    }
}

// Show all window thumbnails
for everyWindowItem in windowThumbnailList
{
    // Get an img tag
    let theWindowImg = document.getElementById("windowThumbnail")

    // Check whether the imageThumbnail is empty (maybe because the window is minimized, etc., obtaining the thumbnail of the window will fail)
    let windowImageThumbnailValid = everyWindowItem.imageThumbnail != null;

    // When imageThumbnail is invalid, use iconThumbnail, which is the icon of the window’s process, to display to the img tag
    let windowImgSrc = windowImageThumbnailValid? everyWindowItem.imageThumbnail.png: everyWindowItem.iconThumbnail.png
    theWindowImg.setAttribute('src', "data:image/png;base64," + windowImgSrc)

    // Listen to the selected event of the label, select this window as the collection target
    theScreenImg.onClick = ()=>{
       zegoScreenCapture.setTargetWindow(everyWindowItem.handle);
    }
}

3 Thumbnail Renderings

The thumbnail display effect of the screen and window is shown in the figure below. Developers can directly select a thumbnail of a screen or window as the collection target.