Page display method, device and storage medium

Abstract

The application relates to a page display method and device and a storage medium, and belongs to the technical field of computers. The method comprises the following steps: starting a digital person window in response to a starting instruction of a target program; loading an H5 page of a business window in response to a display instruction of the business window in the target program; obtaining image data of a digital person image from a memory data block corresponding to the digital person window; feeding back the image data to the H5 page for rendering; displaying the rendered H5 page; and the rendered H5 page comprises the business window and the digital person image. The method can solve the problem that, when a digital person window is overlaid on a business window, a blank area needs to be left on a display page to display the digital person window, thereby limiting the design mode of the display page. Since the image data of the digital person window is rendered as an element of a page where the business window is located, whether the digital person window is overlaid with page elements of the business window is no longer limited, and therefore, the flexibility of page design can be improved.

Description

[Technical Field]

[0001] This application relates to a page display method, device, and storage medium, belonging to the field of computer technology. [Background Technology]

[0002] Currently, some applications often use virtual avatars to guide or introduce business, in order to enhance the product's features and appeal.

[0003] Traditional methods of introducing virtual avatars into applications include: displaying a digital avatar on top of the business processing page when a user enters the page; controlling the digital avatar to guide the user to speak the business information required for the current process; recognizing the user's voice, extracting the business information from the voice, and filling the business information into a preset location on the business processing page.

[0004] However, when displaying a digital human on top of the business processing page, no page elements can be placed above the digital human, otherwise it will affect the normal use of the business processing page. In this case, the application's page design is limited and not flexible enough. [Summary of the Invention]

[0005] This application provides a page display method, device, and storage medium, which can solve the problem that when a digital human window is overlaid on a business window, a certain blank area needs to be left on the display page to display the digital human window, which limits the design of the display page. This application provides the following technical solution:

[0006] Firstly, a page display method is provided, the method comprising:

[0007] In response to the target program's startup command, a digital human window is launched; the digital human window is hosted under the main process and is not displayed on the target program's display page; the digital human window is used to generate a digital human image;

[0008] In response to a display instruction for a business window in the target program, load the H5 page of the business window;

[0009] The image data of the digital human image is obtained from the memory data block corresponding to the digital human window;

[0010] The image data is fed back to the H5 page for rendering, and the rendered H5 page is displayed. The rendered H5 page includes the business window and the digital human image.

[0011] Optionally, obtaining the image data of the digital human image from the memory data block corresponding to the digital human window includes:

[0012] Read pixel data of at least one frame of digital human image from the memory data block;

[0013] The pixel data is converted into image data in the portable web graphics PNG format.

[0014] Optionally, reading pixel data of at least one frame of a digital human image from the memory data block includes:

[0015] A scraping program written in C++ scrapes at least one frame of pixel data from the memory data block.

[0016] Optionally, obtaining the image data of the digital human image from the memory data block corresponding to the digital human window includes:

[0017] Use the window capture tool to capture the image data stream from the memory data block;

[0018] The image data stream is converted into a streaming media format using a pre-built Real-Time Messaging Protocol (RTMP) server to obtain the image data.

[0019] Optionally, the method further includes:

[0020] Determine whether the business scenario of the business window is a real-time feedback scenario;

[0021] In the case of a real-time feedback scenario, the steps of reading pixel data of at least one frame of digital human image from the memory data block and converting the pixel data into image data in portable network graphics PNG format are triggered.

[0022] In cases where the business scenario is not a real-time feedback scenario, the following steps are triggered: using a window capture tool to capture image data streams from the memory data block; and using a pre-built Real-Time Messaging Protocol (RTMP) server to convert the image data streams into a streaming media format to obtain the image data.

[0023] Optionally, the step of feeding back the image data to the H5 page for rendering includes:

[0024] The image data is rendered using the img tag in the H5 page;

[0025] or,

[0026] The image data is rendered as a background element of the H5 page;

[0027] or,

[0028] The image data is added to a custom canvas for rendering.

[0029] Optionally, the step of feeding back the image data to the H5 page for rendering includes:

[0030] Obtain the digital human display requirements for the business window;

[0031] The display position and size of the digital human image are determined based on the digital human display requirements;

[0032] The image data is rendered on the H5 page according to the specified display position and display size.

[0033] Optionally, in response to a display instruction for a business window in the target program, the method further includes:

[0034] Obtain the business information of the business window;

[0035] Generate the character image and / or digital human display effect corresponding to the business information in the digital human window;

[0036] Generate broadcast information corresponding to the aforementioned business information;

[0037] The broadcast message is played, and the broadcast message is synchronized with the mouth shape of the digital human in the rendered H5 page.

[0038] In a second aspect, an electronic device is provided, the device including a processor and a memory; the memory stores a program, the program being loaded and executed by the processor to implement the page display method provided in the first aspect.

[0039] Thirdly, a computer-readable storage medium is provided, wherein a program is stored in the storage medium, and the program, when executed by a processor, is used to implement the page display method provided in the first aspect.

[0040] The beneficial effects of this application include at least the following: launching a digital human window in response to a startup command from the target program; loading an H5 page of the business window in response to a display command from the business window in the target program; obtaining image data of the digital human image from the memory data block corresponding to the digital human window; feeding the image data back to the H5 page for rendering; and displaying the rendered H5 page, which includes the business window and the digital human image. This solves the problem that when a digital human window is overlaid on a business window, a certain blank area needs to be left on the display page to display the digital human window, thus limiting the design of the display page. Since the image data of the digital human window is rendered as an element of the page containing the business window, whether or not the page elements of the business window are overlaid on the digital human window is no longer restricted, thus improving the flexibility of page design.

[0041] Furthermore, existing H5 pages typically render digital human images using WebGL technology, which is costly. Therefore, rendering H5 pages using image capture or streaming methods can reduce the cost of rendering digital humans compared to existing methods.

[0042] Furthermore, traditional image capture methods typically involve acquiring bitmap images and then compressing them into JPG format. However, bitmap image data is resource-intensive. Therefore, by directly acquiring pixel data from memory blocks and converting it into PNG format image data during each image capture operation, we can reduce the amount of data to be captured by focusing only on pixel data, rather than capturing the entire window. Additionally, we can eliminate the need to encapsulate the data into a bitmap structure, further improving data capture efficiency.

[0043] In addition, by determining the method of acquiring image data based on the business scenario, the flexibility of acquiring image data can be improved.

[0044] In addition, by determining the display position and size of the digital human image based on the display requirements of the digital human, and rendering the image data in the H5 page according to the display position and size, the display position and size of the digital human can better meet the user's expectations and improve the display effect of the digital human.

[0045] In addition, displaying the image of a person and / or the display effect of a digital human through business information can make the content displayed by the digital human match the business window, thereby further improving the display effect of the digital human.

[0046] The above description is only an overview of the technical solution of this application. In order to better understand the technical means of this application and to implement it in accordance with the contents of the specification, the preferred embodiments of this application are described in detail below with reference to the accompanying drawings. [Attached Image Description]

[0047] Figure 1 This is a schematic diagram showing a digital human displayed on a business window according to one embodiment of this application;

[0048] Figure 2 This is a flowchart of a page display method provided in one embodiment of this application;

[0049] Figure 3 This is a schematic diagram illustrating the rendering of a digital human in an H5 page according to an embodiment of this application;

[0050] Figure 4 This is a schematic diagram of a page display process provided in one embodiment of this application;

[0051] Figure 5 This is a block diagram of a page display device provided in one embodiment of this application;

[0052] Figure 6 This is a block diagram of an electronic device provided in one embodiment of this application.

Detailed Implementation Methods

[0053] The specific embodiments of this application will be described in further detail below with reference to the accompanying drawings and examples. The following examples are used to illustrate this application, but are not intended to limit the scope of this application.

[0054] Optionally, this application uses the page display methods provided in various embodiments in an electronic device as an example for description. The electronic device is equipped with a display or connected to a display to display various display pages (or user interface (UI)) of the target program. The electronic device includes, but is not limited to, mobile phones, computers, tablets, mobile robots, self-service terminals, or video conferencing terminals, etc. This embodiment does not limit the type of electronic device.

[0055] In this application, the electronic device has at least one Open Graphics Library (OpenGL) installed locally, which is a cross-language, cross-platform application programming interface for rendering 2D and 3D vector graphics.

[0056] The target program is used to provide services to users and includes at least one business window for users to conduct business.

[0057] To improve the service provided to users, digital humans can now be displayed above the business window of the target program. Traditional methods of displaying digital humans include: displaying a digital human window on top of the business window, and displaying a digital human image within that window.

[0058] However, the above method requires the digital human window to be placed on top, but the page elements of the business window cannot be set on the top layer of the digital human window. Otherwise, the white pixels of the page element will turn black after rendering. In this case, the page design method of the application is not flexible enough.

[0059] For example: Reference Figure 1 The target program's business window 11 needs to cover the digital human window 12, since the business window 11 needs to interact with the user. Therefore, in order to avoid the digital human window 12 affecting the rendering effect of the business window 11, the target program's display page needs to leave a certain blank area to display the digital human window 12. At this time, the design of the display page is limited.

[0060] Based on the aforementioned technical issues, in this embodiment, the image data of the digital human window is rendered as an element of the page where the business window is located. In this case, whether the digital human window covers the page elements of the business window is no longer restricted, which can improve the flexibility of page design.

[0061] The page display method provided in this application will be described in detail below.

[0062] Figure 2 This is a flowchart of a page display method provided in one embodiment of this application, which includes at least the following steps:

[0063] Step 201: In response to the startup command of the target program, the digital human window is launched; the digital human window is hosted under the main process and is not displayed in the display page of the target program; the digital human window is used to generate digital human images.

[0064] The target program is used to provide services to users. The launch command of the target program is used to invoke the target program to work on the front end of the electronic device. That is, to display the target program's display page on the front end of the electronic device. In this embodiment, the target program's display page is a Hypertext Markup Language (HTML 5) page, so that the display page can be displayed on different clients.

[0065] Optionally, the startup command may be generated when the electronic device receives a trigger operation that acts on the display icon of the target program, or it may be generated when the electronic device starts up, or it may be generated when other applications call it. This embodiment does not limit the generation method of the startup command.

[0066] Optionally, in response to a startup command from the target program, the digital human window is launched, including: launching the digital human window immediately in response to the startup command; or, launching the digital human window in response to a startup command and upon receiving a digital human wake-up command.

[0067] The digital human wake-up command can be generated based on wake-up voice or based on the trigger operation of the wake-up control in the target program. This embodiment does not limit the implementation method of the digital human wake-up command.

[0068] In this embodiment, after the electronic device starts the digital human window, the main process renders the digital human window in real time, but does not display the digital human window, or in other words, hides the digital human window.

[0069] The digital human image in the digital human window can use a default static image, and / or be generated based on business information from the business window in the target program. For example, a static image can be used for initialization, and then the digital human image can be generated using business information when the business window is started. The relevant description of generating the digital human image using business information is provided below and will not be repeated here.

[0070] Optionally, the digital human image can be a two-dimensional image or a three-dimensional image. This embodiment does not limit the implementation method of the digital human image.

[0071] Step 202: In response to the display instruction of the business window in the target program, load the H5 page of the business window.

[0072] The target program includes at least one display page, and some or all of the display pages include business windows. A business window is a window that provides services to the user; users typically need to interact with electronic devices through business windows.

[0073] When the page displayed when the target program starts includes a business window, the display instruction can be the target program's startup instruction. Alternatively, when the target program jumps from another display page to a display page that includes a business window, the display instruction can be a page jump instruction.

[0074] Among them, loading the H5 page of the business window includes: loading the H5 page through the Chromium Embedded Framework (CEF).

[0075] Optionally, step 202 can be executed before, after, or simultaneously with "starting the digital human window". This embodiment does not limit the execution order between step 202 and starting the digital human window.

[0076] Step 203: Obtain the image data of the digital human image from the memory data block corresponding to the digital human window.

[0077] Traditionally, rendering digital human images in HTML5 pages is done using Web Graphics Library (WebGL) technology. However, WebGL technology has high requirements for graphics processing units (GPUs), resulting in significant costs when rendering HTML5 pages using WebGL.

[0078] Based on this, in this embodiment, by feeding back the image data in the memory data block to the H5 page and hiding the digital human window, the digital human image rendered by OpenGL can be rendered onto the Web page. At the same time, since the digital human window is hosted in the backend program (main process), it can be easily integrated with voice dialogue technology in the future.

[0079] When the main process renders the digital human window, the image data corresponding to the digital human window is stored in memory, thus obtaining the memory data block corresponding to the digital human window.

[0080] Optionally, image data of the digital human image can be obtained from the memory data block corresponding to the digital human window, including but not limited to the following methods:

[0081] The first method is image capture. That is, read the pixel data of at least one frame of digital human image from the memory data block; and convert the pixel data into image data in Portable Network Graphics (PNG) format.

[0082] Currently, image capture methods typically achieve animation effects by capturing image data from the digital human window frame by frame and feeding it back to H5 rendering in real time. Shorter frame intervals result in smoother visuals, but also place higher demands on the CPU and GPU. Traditional window image capture solutions include: using the Windows API to obtain bitmap (BMP) images; and then compressing the bitmap images into JPG format. However, capturing images as bitmaps is resource-intensive, especially in C language. Therefore, as the number of digital human images to be captured increases—for example, dozens of captures per second—bitmap images require significant storage resources and can also reduce visual smoothness.

[0083] Based on this, in the first method provided in this embodiment, pixel data in the memory data block is directly obtained and converted into PNG format image data each time an image capture operation is performed. On the one hand, it is not necessary to capture the entire window image, but only the pixel data is captured, which can reduce the amount of data to be captured; on the other hand, it can also save the process of encapsulating it into bitmap structure data, further improving the data capture efficiency.

[0084] Optionally, the image data in PNG format is Base64 data, which is binary data represented by 64 printable characters.

[0085] Optionally, at least one frame of pixel data of the digital human image is read from the memory data block, including: using a grabbing program written in C++ to grab at least one frame of pixel data from the memory data block. Since C++ is more efficient, using a C++ program for grabbing can improve the efficiency of pixel data grabbing.

[0086] In one example, the digital human image generated by the digital human window is a dynamic image. To improve the display effect of the dynamic digital human image on the H5 page, the electronic device captures pixel data of multiple frames of the digital human image at a preset frame rate. The preset frame rate is greater than or equal to the maximum frame rate that the human eye can perceive. For example, if the preset frame rate is 50 milliseconds per frame, then the digital human image can be displayed smoothly, and the latency can be so low that it is practically imperceptible to the human eye.

[0087] The second method is the push streaming method. A window-based stream capture tool is used to capture the image data stream from memory data blocks; a pre-built Real Time Messaging Protocol (RTMP) server is used to convert the image data stream into a streaming media (FlashVideo, FLV) format to obtain the image data.

[0088] Among them, the window capture tool is a third-party tool such as an open-source tool library for processing audio and video (FastForward Mpeg, FFmpeg).

[0089] The above-mentioned streaming methods involve steps such as capturing, pushing, pulling, and converting the stream for playback, which leads to a significant delay in the feedback of image data to the H5 page. Therefore, electronic devices can determine whether to use the first or second method of image data acquisition based on the business scenario of the business window.

[0090] Specifically, the electronic device determines whether the business scenario of the business window is a real-time feedback scenario; if the business scenario is a real-time feedback scenario, it triggers the execution of the steps of reading at least one frame of pixel data of a digital human image from a memory data block and converting the pixel data into image data in the portable network graphics PNG format (i.e., the first method mentioned above); if the business scenario is not a real-time feedback scenario, it triggers the execution of the steps of using a window stream capture tool to capture an image data stream from a memory data block and using a pre-built real-time messaging protocol RTMP server to convert the image data stream into a streaming media format to obtain image data (i.e., the second method mentioned above).

[0091] Optionally, determining whether the business scenario of the business window is a real-time feedback scenario includes: obtaining business scenario information input by the user, which is used to indicate whether the business scenario of the business window is a real-time feedback scenario. Alternatively, obtaining business information of the business window; if the business keywords in the business information match the template keywords corresponding to the real-time feedback scenario, the business scenario is determined to be a real-time feedback scenario; if the business keywords in the business information do not match the template keywords corresponding to the real-time feedback scenario, the business scenario is determined not to be a real-time feedback scenario. In other embodiments, the method for determining whether a business scenario is a real-time feedback scenario can also be other, which will not be listed here.

[0092] Step 204: Feed the image data back to the H5 page for rendering and display the rendered H5 page, which includes a business window and a digital human image.

[0093] Optionally, the image data can be fed back to the H5 page for rendering in ways including but not limited to: rendering the image data in the H5 page using the img tag; or rendering the image data as a background element of the H5 page; or adding the image data to a custom canvas for rendering.

[0094] The custom canvas can be a Canvas, which is a tag provided by H5 for displaying drawing effects and dynamically drawing using JavaScript commands.

[0095] In one example, the position and / or size of the digital human on the H5 page can be adjusted according to user needs. In this case, the image data is fed back to the H5 page for rendering, including: obtaining the digital human display requirements of the business window; determining the display position and size of the digital human image based on the display requirements; and rendering the image data on the H5 page according to the display position and size.

[0096] Optionally, the digital human display requirements for different business windows may be the same or different. Obtaining the digital human display requirements for a business window can be achieved through methods including, but not limited to, the following:

[0097] The first approach is to identify the blank areas on the display page, excluding business information. If the size of the blank area is larger than the preset size, the digital human display requirement is determined to be based on the location and size of the blank area.

[0098] At this point, the display position and display size of the digital human image are determined based on the display requirements of the digital human, including: determining the region position as the display position and the region size as the display size.

[0099] If the size of the blank area is less than or equal to the preset size, the digital human display requirement is determined to be to display the digital human as the background of the display page.

[0100] At this point, the display position and display size of the digital human image are determined based on the display requirements of the digital human, including: using the display page as the display position and using the page size of the display page as the display size.

[0101] refer to Figure 3 The blank areas on the display page, excluding business information, are relatively small, making the display of the digital human in these areas unsatisfactory. Therefore, the digital human can be displayed as the background of the display page. In this case, the layout of the business window does not need to be changed, and even if the business window is covered by the digital human, the white pixels will not change after the display page is rendered, thus improving the design flexibility of the display page.

[0102] In addition, when the blank area is relatively large, displaying a digital human in the blank area can present the digital human as an introduction to the business window, thus improving the display effect of the business window.

[0103] It should be noted that the display position and size of the digital human in the above example are only for illustrative purposes. In actual implementation, the display position and size of the digital human can also be set in other ways. This embodiment does not limit the implementation method of the display position and size.

[0104] The second method involves displaying a digital human settings page, which includes settings controls for digital human display requirements; receiving settings operations applied to the settings controls to obtain the digital human display requirements.

[0105] For example, the settings controls for the digital human display page include various display position selection controls and display size adjustment controls. Display positions include: global coverage (indicating coverage of the entire display page); window coverage (indicating coverage of the business window); left side of the page (indicating display on the left side of the display page); and right side of the page (indicating display on the right side of the display page), etc. The display size adjustment controls include: height adjustment and width adjustment for the digital human, with the upper limit of height and width adjustment determined based on the page size. In actual implementation, the settings controls can also be implemented in other ways, which will not be listed in detail in this embodiment.

[0106] In one example, a digital human can provide voice services on an H5 page, and the digital human's appearance and / or display effect can adaptively adjust based on the dialogue context. In response to display instructions from the business window in the target program, the electronic device can also acquire business information from the business window; generate the corresponding appearance and / or display effect of the digital human in the digital human window; generate broadcast information corresponding to the business information; and play the broadcast information, which is synchronized with the lip movements of the digital human on the rendered H5 page.

[0107] The business information in the business window is semantic information obtained by the electronic device through semantic recognition of the text information in the business window.

[0108] Accordingly, the broadcast information corresponding to the business information is generated, including: using Natural Language Generation (NLG) technology to generate the natural language of the semantic information to obtain the broadcast information.

[0109] Generate the character image and / or digital human display effect corresponding to the business information in the digital human window, including: generating the character image and / or digital human display effect in the digital human window based on the correlation between the broadcast information and the character image and / or digital human display effect, so as to ensure that the broadcast information is synchronized with the lip movements of the digital human.

[0110] Character appearance includes, but is not limited to: character clothing, facial expressions, makeup, and lip movements. Digital human display effects include, but are not limited to: digital human background and lighting effects.

[0111] For example, when broadcasting information related to business processing, the digital human's clothing is work attire; the lighting effects and background of the digital human are in a serious style.

[0112] Optionally, after feeding back the image data to the H5 page for rendering and displaying the rendered H5 page, the electronic device can also interact with the user via voice service. Specifically, upon receiving audio data, the electronic device parses the audio data to obtain its semantic information; if the semantic information indicates an operation on the business window, the electronic device operates the business window according to the semantic information.

[0113] The operation of the business window according to semantic information includes, but is not limited to: entering the content indicated by the semantic information at the position indicated by the semantic information in the business window; jumping from the business window to other display pages indicated by the semantic information; or exiting the target program, etc. This embodiment does not limit the way of operating the business window.

[0114] In other embodiments, after obtaining the semantic information of the audio data, the electronic device can also obtain the broadcast information corresponding to the voice information and trigger the execution of the playback of the broadcast information. The broadcast information is synchronized with the lip movements of the digital human in the rendered H5 page, so as to conduct voice interaction with the user through the digital human.

[0115] At this point, users can engage in voice interaction with the digital human for business-related matters, or simply chat with it. The digital human's appearance and display effects can also be linked to the information being broadcast.

[0116] For example, when users are chatting with the digital human (i.e., the semantic information is unrelated to business transactions), the background of the digital human can be switched to a relaxed and casual style, and the clothing of the digital human can be switched to casual clothes.

[0117] Optionally, in other embodiments, for some business windows, the electronic device can also overlay and display a digital human window on top of the business window. This digital human window is transparent and has a click-through function. For example, for some business windows with a large blank area, this can be achieved by displaying the digital human window on top; while for some business serial ports with a small blank area, this can be achieved by retrieving image data of the digital human image from the memory data block and feeding it back to the H5 page for rendering.

[0118] To better understand the page display method provided in this application, an example is given below for illustration. Figure 4 After the target program starts, it connects to the voice service 41, starts the business window 42, and starts the digital human window 43. The digital human window is hidden and hosted in the main process; the business window is displayed on the front-end H5 page and provides business services to the user. The electronic device retrieves image data from the memory data block corresponding to the digital human window and feeds it back to the front-end H5 page for rendering and display. The voice service is used to extract business information from the business window and feed it back to the digital human window, allowing the digital human window to associate the digital human's image and / or display effect based on the business information. The voice service can also be used to recognize user-inputted voice information and feed it back to the business window for corresponding operations.

[0119] In summary, the page display method provided in this embodiment starts a digital human window in response to a startup command from the target program; loads the H5 page of the business window in response to a display command from the business window in the target program; obtains image data of the digital human image from the memory data block corresponding to the digital human window; feeds the image data back to the H5 page for rendering; and displays the rendered H5 page, which includes the business window and the digital human image. This method solves the problem that when a digital human window is overlaid on the business window, a certain blank area needs to be left on the display page to display the digital human window, which limits the design of the display page. Since the image data of the digital human window is rendered as an element of the page where the business window is located, it is no longer limited whether the page elements of the business window are overlaid on the digital human window, thus improving the flexibility of page design.

[0120] Furthermore, existing H5 pages typically render digital human images using WebGL technology, which is costly. Therefore, rendering H5 pages using image capture or streaming methods can reduce the cost of rendering digital humans compared to existing methods.

[0121] Furthermore, traditional image capture methods typically involve acquiring bitmap images and then compressing them into JPG format. However, bitmap image data is resource-intensive. Therefore, by directly acquiring pixel data from memory blocks and converting it into PNG format image data during each image capture operation, we can reduce the amount of data to be captured by focusing only on pixel data, rather than capturing the entire window. Additionally, we can eliminate the need to encapsulate the data into a bitmap structure, further improving data capture efficiency.

[0122] In addition, by capturing pixel data of multiple frames of digital human images at a preset frame rate, which is greater than or equal to the maximum frame rate that the human eye can recognize, it is possible to achieve smooth digital human images and extremely low latency that is barely perceptible to the human eye.

[0123] In addition, by determining the method of acquiring image data based on the business scenario, the flexibility of acquiring image data can be improved.

[0124] In addition, by determining the display position and size of the digital human image based on the display requirements of the digital human, and rendering the image data in the H5 page according to the display position and size, the display position and size of the digital human can better meet the user's expectations and improve the display effect of the digital human.

[0125] In addition, displaying the image of a person and / or the display effect of a digital human through business information can make the content displayed by the digital human match the business window, thereby further improving the display effect of the digital human.

[0126] Figure 5 This is a block diagram of a page display device provided in one embodiment of this application. The device includes at least the following modules: a digital human startup module 510, a page loading module 520, a data capture module 530, and a page display module 540.

[0127] The digital human startup module 510 is used to launch a digital human window in response to a startup command from the target program; the digital human window is hosted under the main process and is not displayed on the display page of the target program; the digital human window is used to generate a digital human image.

[0128] The page loading module 520 is used to load the H5 page of the business window in response to the display instruction of the business window in the target program;

[0129] The data capture module 530 is used to obtain image data of the digital human image from the memory data block corresponding to the digital human window;

[0130] The page display module 540 is used to feed back the image data to the H5 page for rendering and display the rendered H5 page, which includes the business window and the digital human image.

[0131] For relevant details, please refer to the above method implementation examples.

[0132] It should be noted that the page display device provided in the above embodiments is only illustrated by the division of the above functional modules. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the page display device can be divided into different functional modules to complete all or part of the functions described above. In addition, the page display device and the page display method embodiments provided in the above embodiments belong to the same concept, and the specific implementation process can be found in the method embodiments, which will not be repeated here.

[0133] Figure 6 This is a block diagram of an electronic device provided in one embodiment of this application. The device includes at least a processor 601 and a memory 602.

[0134] Processor 601 may include one or more processing cores, such as a quad-core processor or an octa-core processor. Processor 601 may be implemented using at least one hardware form selected from DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array). Processor 601 may also include a main processor and a coprocessor. The main processor, also known as a CPU (Central Processing Unit), is used to process data in the wake-up state; the coprocessor is a low-power processor used to process data in the standby state. In some embodiments, processor 601 may integrate a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the screen. In some embodiments, processor 601 may also include an AI (Artificial Intelligence) processor, which is used to handle computational operations related to machine learning.

[0135] The memory 602 may include one or more computer-readable storage media, which may be non-transitory. The memory 602 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices or flash memory devices. In some embodiments, the non-transitory computer-readable storage media in the memory 602 are used to store at least one instruction, which is executed by the processor 601 to implement the page display method provided in the method embodiments of this application.

[0136] In some embodiments, the electronic device may also optionally include a peripheral device interface and at least one peripheral device. The processor 601, memory 602, and peripheral device interface can be connected via a bus or signal line. Each peripheral device can be connected to the peripheral device interface via a bus, signal line, or circuit board. Indicatively, peripheral devices include, but are not limited to, radio frequency circuits, touch displays, audio circuits, and power supplies.

[0137] Of course, electronic devices may also include fewer or more components, and this embodiment does not limit this.

[0138] Optionally, this application also provides a computer-readable storage medium storing a program that is loaded and executed by a processor to implement the page display method of the above method embodiments.

[0139] Optionally, this application also provides a computer product including a computer-readable storage medium storing a program that is loaded and executed by a processor to implement the page display method of the above method embodiments.

[0140] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0141] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are relatively specific and detailed, they should not be construed as limiting the scope of the invention patent. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this patent application should be determined by the appended claims.

Claims

1. A page display method, characterized in that, The method includes: In response to the target program's startup command, a digital human window is launched; the digital human window is hosted under the main process and is not displayed on the target program's display page; the digital human window is used to generate a digital human image; In response to a display instruction for a business window in the target program, load the H5 page of the business window; The image data of the digital human image is obtained from the memory data block corresponding to the digital human window; The image data is fed back to the H5 page for rendering, and the rendered H5 page is displayed. The rendered H5 page includes the business window and the digital human image. The step of obtaining image data of the digital human image from the memory data block corresponding to the digital human window includes: Read pixel data of at least one frame of digital human image from the memory data block; The pixel data is converted into image data in the portable web graphics PNG format.

2. The method according to claim 1, characterized in that, The step of reading pixel data from at least one frame of a digital human image from the memory data block includes: A scraping program written in C++ scrapes at least one frame of pixel data from the memory data block.

3. The method according to claim 1, characterized in that, The step of obtaining image data of the digital human image from the memory data block corresponding to the digital human window includes: Use the window capture tool to capture the image data stream from the memory data block; The image data stream is converted into a streaming media format using a pre-built Real-Time Messaging Protocol (RTMP) server to obtain the image data.

4. The method according to any one of claims 2 to 3, characterized in that, The method further includes: Determine whether the business scenario of the business window is a real-time feedback scenario; In the case of a real-time feedback scenario, the steps of reading pixel data of at least one frame of digital human image from the memory data block and converting the pixel data into image data in portable network graphics PNG format are triggered. In cases where the business scenario is not a real-time feedback scenario, the following steps are triggered: using a window capture tool to capture image data streams from the memory data block; and using a pre-built Real-Time Messaging Protocol (RTMP) server to convert the image data streams into a streaming media format to obtain the image data.

5. The method according to claim 1, characterized in that, The step of feeding the image data back to the H5 page for rendering includes: The image data is rendered using the img tag in the H5 page; or, The image data is rendered as a background element of the H5 page; or, The image data is added to a custom canvas for rendering.

6. The method according to claim 1, characterized in that, The step of feeding the image data back to the H5 page for rendering includes: Obtain the digital human display requirements for the business window; The display position and size of the digital human image are determined based on the digital human display requirements; The image data is rendered on the H5 page according to the specified display position and display size.

7. The method according to claim 1, characterized in that, In response to a display instruction for a business window in the target program, the method further includes: Obtain the business information of the business window; Generate the character image and / or digital human display effect corresponding to the business information in the digital human window; Generate broadcast information corresponding to the aforementioned business information; The broadcast message is played, and the broadcast message is synchronized with the mouth shape of the digital human in the rendered H5 page.

8. An electronic device, characterized in that, The device includes a processor and a memory; the memory stores a program that is loaded and executed by the processor to implement the page display method as described in any one of claims 1 to 7.

9. A computer-readable storage medium, characterized in that, The storage medium stores a program that, when executed by a processor, is used to implement the page display method as described in any one of claims 1 to 7.

Images