Live broadcast room scroll rendering method and device, storage medium and computer device

Abstract

The live broadcast room scroll rendering method and device, storage medium and computer device provided by the application, when live broadcasting in a target live broadcast room, first acquire real-time scroll data, and build corresponding scroll objects, and perform fast and efficient filtering, sorting and classification scheduling processing, to ensure low delay and smooth display of the scroll. Then, the built scroll objects are put into corresponding Canvas layer data queues according to categories, each scroll category corresponds to an independent Canvas layer, each layer is set with a hierarchical relationship and is allocated with an independent rendering context, so that the drawing task is effectively distributed and the refresh efficiency is improved. Then, when updating the live broadcast picture frame by frame, the application can extract the scroll objects from each Canvas layer data queue and draw them to the corresponding Canvas layer, and then merge and display them in the target live broadcast room according to the hierarchical relationship and the video frame. Through hierarchical management and frame-by-frame updating, the application ensures real-time and smooth display of the scroll, and improves the overall rendering effect of the live broadcast picture.

Description

Technical Field

[0001] This application relates to the field of bullet screen rendering technology, and in particular to a method, apparatus, storage medium and computer equipment for rendering bullet screens in a live streaming room. Background Technology

[0002] Currently, the primary technology used for rendering real-time bullet comments in live streams is DOM-based. This works by encapsulating the bullet comment text within an HTML DOM element, then embedding this DOM element into the HTML for rendering using JavaScript. Subsequently, the position of the DOM element containing the bullet comment text is continuously calculated and adjusted to create a motion animation.

[0003] However, the DOM-based bullet screen rendering technology has certain drawbacks. Because it requires calculating and changing the position of all DOM elements, when a large number of bullet screens are displayed simultaneously, excessive use of browser DOM nodes can easily lead to excessive CPU computing pressure, resulting in problems such as stuttering, frame drops, bullet screen display delays, and disordered order. Summary of the Invention

[0004] The purpose of this application is to at least solve one of the aforementioned technical defects, particularly the technical defect that the existing technology of using DOM to render real-time bullet comments in a live broadcast room can easily lead to excessive CPU computing pressure, resulting in problems such as stuttering, frame drops, bullet comment display delays, and disordered order.

[0005] This application provides a method for rendering bullet comments in a live streaming room, the method comprising:

[0006] During the live broadcast in the target live room, real-time bullet screen data is acquired, and a bullet screen object corresponding to the real-time bullet screen data is constructed. The bullet screen object is then placed into the data queue of the Canvas layer corresponding to the category of the bullet screen object. Each category corresponds to a Canvas layer, and there is a corresponding hierarchical relationship between the Canvas layers. Each Canvas layer is also assigned an independent rendering context.

[0007] When updating the live screen in the target live room frame by frame, the bullet screen objects in the data queue of each Canvas layer are extracted according to the preset bullet screen refresh strategy. After the extracted bullet screen objects are drawn onto the corresponding Canvas layer, the drawn bullet screen objects are merged with the corresponding video frames and displayed in the target live room according to the hierarchical relationship.

[0008] Optionally, constructing the bullet screen object corresponding to the real-time bullet screen data includes:

[0009] The real-time bullet screen data is preprocessed.

[0010] Standardized bullet screen objects are constructed based on preprocessed real-time bullet screen data.

[0011] Optionally, placing the bullet screen object into the data queue of the Canvas layer corresponding to the category of the bullet screen object includes:

[0012] The category of the bullet screen object is determined based on the bullet screen characteristics of the bullet screen object. The categories of the bullet screen object include static bullet screen, dynamic bullet screen and special effects bullet screen. The Canvas layer corresponding to the static bullet screen is the static bullet screen layer, the Canvas layer corresponding to the dynamic bullet screen is the dynamic bullet screen layer, and the Canvas layer corresponding to the special effects bullet screen is the special effects bullet screen layer.

[0013] If the type of the bullet screen object is static bullet screen, then the bullet screen object is placed in the data queue of the static bullet screen layer;

[0014] If the type of the bullet screen object is dynamic bullet screen, then the bullet screen object is placed in the data queue of the dynamic bullet screen layer;

[0015] If the category of the bullet screen object is special effects bullet screen, then the bullet screen object is placed in the data queue of the special effects bullet screen layer.

[0016] Optionally, drawing the extracted bullet screen objects onto the corresponding Canvas layer includes:

[0017] For each Canvas layer:

[0018] Determine whether there are pre-rendered bullet comments in the extracted bullet comment objects. The pre-rendered bullet comments refer to reusable bullet comment objects that are pre-drawn in the off-screen Canvas. Each Canvas layer corresponds to an off-screen Canvas.

[0019] If it exists, the pre-rendered bullet screen is transferred from the off-screen Canvas corresponding to the Canvas layer to the Canvas layer, and other bullet screen objects other than the pre-rendered bullet screen are drawn in the Canvas layer;

[0020] If it does not exist, the extracted bullet screen object will be drawn directly onto the Canvas layer.

[0021] Optionally, for each Canvas layer, drawing the extracted bullet screen objects onto that Canvas layer includes:

[0022] After comparing the previously drawn bullet screen object of the Canvas layer with the bullet screen object extracted this time, the target area that needs to be updated in the Canvas layer and the target object to be drawn in the extracted bullet screen object are determined.

[0023] Clear the content of the target area in the Canvas layer, and then draw the target object within the cleared target area.

[0024] Optionally, the Canvas layer includes a static bullet screen layer, a dynamic bullet screen layer, and a special effects bullet screen layer;

[0025] When the target live stream is detected to meet the preset accelerated synthesis conditions, the step of drawing the extracted bullet screen objects onto the corresponding Canvas layer includes:

[0026] With browser support, the extracted bullet screen objects of the special effects bullet screen layer are rendered using the WebGL hybrid rendering mode.

[0027] The extracted static bullet screen objects are drawn onto the static bullet screen layer, and the extracted dynamic bullet screen objects are drawn onto the dynamic bullet screen layer.

[0028] Optionally, for each Canvas layer, drawing the extracted bullet screen objects onto that Canvas layer includes:

[0029] Divide the canvas layer into multiple grid units, and each grid unit maintains a list of bullet comments.

[0030] When any bullet screen object is extracted, the target grid cell covered by the bullet screen object is determined, and it is detected whether the bullet screen object overlaps with the bullet screen objects in the target bullet screen list maintained by the target grid cell.

[0031] If they overlap, the preset position of the bullet screen object is adjusted, and then the bullet screen object is drawn onto the Canvas layer according to the adjusted preset position, and the adjusted preset position is registered to the corresponding grid cell.

[0032] If they do not overlap, the bullet screen object is drawn onto the Canvas layer according to its preset position, and the preset position is registered to the target grid cell.

[0033] Optionally, determining the preset position of the bullet screen object includes:

[0034] Real-time collection of the bullet screen density in the target live stream room;

[0035] The movement speed of the bullet object is adjusted according to the bullet density and the speed coefficient corresponding to the category of the bullet object;

[0036] The preset position of the bullet screen object is determined based on the adjusted movement speed.

[0037] Optionally, the step of merging the drawn bullet screen objects with the corresponding video frames according to the hierarchical relationship and displaying them in the target live stream room includes:

[0038] Convert the bullet screen objects drawn in the static bullet screen layer and the dynamic bullet screen layer, as well as the corresponding drawn video frames, into WebGL textures;

[0039] The WebGL texture is mixed with the bullet screen object rendered from the special effects bullet screen layer to form a multi-layer texture;

[0040] The multi-layered textures are synthesized according to preset synthesis rules and displayed in the target live streaming room.

[0041] Optionally, the method further includes:

[0042] The system collects performance metrics in real time and determines the current computational load and current frame rate based on these metrics.

[0043] If the current computing load is higher than a preset load threshold and the current frame rate is lower than a preset frame rate threshold, then the bullet screen refresh strategy is adjusted.

[0044] If the current computing load is not higher than a preset load threshold and the current frame rate is not lower than a preset frame rate threshold, then the target live streaming room is ensured to be in full HD display mode.

[0045] This application also provides a live streaming chat rendering device, including:

[0046] The bullet screen acquisition module is used to acquire real-time bullet screen data during the live broadcast of the target live room, construct a bullet screen object corresponding to the real-time bullet screen data, and put the bullet screen object into the data queue of the Canvas layer corresponding to the category of the bullet screen object. Each category corresponds to a Canvas layer, and there is a corresponding hierarchical relationship between the Canvas layers. Each Canvas layer is allocated an independent rendering context.

[0047] The bullet screen rendering module is used to extract bullet screen objects from the data queue of each Canvas layer according to a preset bullet screen refresh strategy when updating the live screen in the target live room frame by frame. After drawing the extracted bullet screen objects onto the corresponding Canvas layer, the module merges the drawn bullet screen objects with the corresponding video frames and displays them in the target live room according to the hierarchical relationship.

[0048] This application also provides a computer-readable storage medium storing computer-readable instructions, which, when executed by one or more processors, cause the one or more processors to perform the steps of the live-streaming chat rendering method as described in any of the above embodiments.

[0049] This application also provides a computer device, including: one or more processors, and memory;

[0050] The memory stores computer-readable instructions, which, when executed by the one or more processors, perform the steps of the live-streaming chat rendering method as described in any of the above embodiments.

[0051] As can be seen from the above technical solutions, the embodiments of this application have the following advantages:

[0052] The live streaming chat rendering method, apparatus, storage medium, and computer equipment provided in this application, during the live streaming process in the target live streaming room, firstly acquire real-time chat data. After acquiring this real-time chat data, the system can construct chat objects corresponding to this real-time chat data. In this way, the real-time chat data can be filtered, sorted, and categorized and scheduled quickly and efficiently, ensuring that the chat can be displayed smoothly in the target live streaming room with low latency. Next, this application can place these constructed chat objects into the data queue of the corresponding Canvas layer according to their categories. Each chat category corresponds to an independent Canvas layer, and different Canvas layers are set with corresponding hierarchical relationships. Each Canvas layer is assigned an independent rendering context, which can effectively distribute the overall drawing task and thus significantly improve the overall refresh efficiency. When updating the live screen in the target live streaming room frame by frame, this application can extract the corresponding chat objects from the data queue of each Canvas layer according to the preset chat refresh strategy. After extracting these chat objects, this application can draw them onto their respective Canvas layers. After the drawing is completed, the drawn bullet screen objects are merged with the corresponding video frames according to the previously set hierarchical relationship, and finally the merged image is displayed in the target live broadcast room. This application, through this hierarchical management and frame-by-frame update method, not only ensures the smoothness and real-time performance of the bullet screen display, but also greatly improves the overall rendering effect of the live broadcast. Attached Figure Description

[0053] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0054] Figure 1 A flowchart illustrating a method for rendering bullet comments in a live streaming room, provided as an embodiment of this application;

[0055] Figure 2 This is a schematic diagram illustrating the process of drawing using pre-rendered bullet screens, provided in an embodiment of this application.

[0056] Figure 3 A schematic diagram illustrating the process of drawing the extracted bullet screen object onto the Canvas layer using a local update strategy, as provided in this embodiment of the application;

[0057] Figure 4 A schematic diagram illustrating the process of drawing the extracted bullet screen objects onto the Canvas layer using grid partitioning and anti-collision strategies, as provided in this embodiment of the application;

[0058] Figure 5 A schematic diagram of the structure of a live streaming chat rendering device provided in this application embodiment;

[0059] Figure 6 This is a schematic diagram of the internal structure of a computer device provided in an embodiment of this application. Detailed Implementation

[0060] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0061] In one embodiment, such as Figure 1 As shown, Figure 1 This application provides a flowchart illustrating a method for rendering bullet comments in a live streaming room, which may include:

[0062] S110: During the live broadcast in the target live room, real-time bullet screen data is obtained, and after constructing a bullet screen object corresponding to the real-time bullet screen data, the bullet screen object is placed into the data queue of the Canvas layer corresponding to the category of the bullet screen object. Each category corresponds to a Canvas layer, and there is a corresponding hierarchical relationship between the Canvas layers. Each Canvas layer is also assigned an independent rendering context.

[0063] In this step, when rendering the real-time bullet comment data generated during the live stream of the target live room, the real-time bullet comment data of the target live room can be obtained first. Then, the real-time bullet comment data can be parsed and processed to construct a bullet comment object corresponding to the real-time bullet comment data. Next, according to the category of the bullet comment object, the bullet comment objects can be placed into the data queue of the corresponding Canvas layer. When updating the live screen of the target live room frame by frame, the bullet comment objects stored in the data queue of each Canvas layer can be used to update the bullet comments in the live screen.

[0064] This application employs WebSocket technology to receive real-time bullet screen data. This data includes not only basic text content but also rich additional information such as font style, color configuration, motion parameters, and special effects. Upon receiving this data, the application performs preliminary parsing to ensure data integrity and readability. Subsequently, a series of preprocessing algorithms further process the data, including but not limited to data filtering to remove invalid or redundant information, format conversion to unify data representation, and priority sorting to ensure important bullet screens are displayed first. Through these steps, a standardized bullet screen object is ultimately constructed for efficient and accurate display and management in subsequent applications.

[0065] Furthermore, when placing bullet screen objects into the data queue of the Canvas layer corresponding to the category of the bullet screen object, this application can perform detailed classification based on the specific characteristics of the bullet screen object. It is understandable that in actual live streaming scenarios, bullet screens exhibit a rich variety of forms, and different types of bullet screens have their own unique characteristics; therefore, accurate classification is crucial.

[0066] For example, static bullet comments are fixed in position, consisting of simple text comments without any dynamic effects, like fixed text icons in a live stream, remaining static throughout the broadcast. These bullet comments can be categorized into a specific Canvas layer, where they are neatly arranged and do not interfere with each other, ensuring concise and accurate information display. Dynamic bullet comments, on the other hand, change position over time or under specific conditions, potentially exhibiting effects such as movement, jumping, or flashing, adding vibrancy and fun to the live stream and attracting viewers. These bullet comments can be placed in the corresponding Canvas layer, where they are strategically arranged based on parameters such as movement speed and direction to prevent collisions and overlaps, ensuring a smooth viewing experience for the audience. As for special effects bullet comments, these feature unique visual effects or animations used to express strong emotions or participate in special activities, such as lottery-themed bullet comments. After being assigned to the data queue of the corresponding Canvas layer, that Canvas layer can optimize rendering based on its characteristics, thereby providing a stunning visual experience for the live stream audience.

[0067] Furthermore, this application precisely controls the layered relationships of the Canvas objects at each level by employing transparent backgrounds, layered rendering techniques, and appropriate z-index values, thereby achieving effective compositing of multi-layered canvas content. Specifically, this application can set a corresponding number of Canvas canvases based on the number of categories of bullet screen objects. These canvases are all set to the same size to ensure visual consistency and harmony. Next, this application can use the z-index property in CSS to set the layered relationship of these Canvas canvases, so that each canvas layer can be stacked and displayed in a predetermined order. In addition, to ensure that each Canvas layer can be rendered independently and efficiently, this application can assign an independent rendering context to each layer. During the initialization phase, this application can also configure the data buffers of each Canvas layer and bind corresponding event listeners to them, so that various user operations and system events can be responded to in a timely manner during subsequent use, thereby improving overall application performance and user experience.

[0068] S120: When updating the live screen in the target live room frame by frame, extract the bullet screen objects from the data queue of each Canvas layer according to the preset bullet screen refresh strategy, draw the extracted bullet screen objects onto the corresponding Canvas layer, and then merge the drawn bullet screen objects with the corresponding video frames and display them in the target live room according to the hierarchical relationship.

[0069] In this step, after acquiring real-time bullet screen data through S110, constructing bullet screen objects corresponding to the real-time bullet screen data, and placing the bullet screen objects into the data queue of the Canvas layer corresponding to the category of the bullet screen objects, this application can extract the bullet screen objects from the data queue of each Canvas layer according to the preset bullet screen refresh strategy when updating the live screen in the target live room frame by frame. Then, after drawing the extracted bullet screen objects onto the corresponding Canvas layer, the drawn bullet screen objects and the corresponding video frames are merged and displayed in the target live room according to the previously set hierarchical relationship.

[0070] Specifically, when updating the live stream frame by frame in the target live stream room, this application can precisely extract the corresponding bullet screen objects one by one from the data queues of each Canvas layer according to a pre-set bullet screen refresh strategy. This operation, through precise algorithmic control, ensures that the display order and refresh frequency of the bullet screens strictly follow the preset rules, thereby achieving the function of efficiently and accurately filtering the required bullet screen objects from multiple data layers. The bullet screen refresh strategy of this application includes, but is not limited to, the static bullet screen refresh interval, the display detail of special effects bullet screens, and whether to enable a partial redraw strategy. Furthermore, this application can also adjust the bullet screen refresh strategy according to the real-time performance of the system, such as extending the static bullet screen refresh interval, reducing the detail of special effects, or enabling a partial redraw strategy, etc., which can be set according to the actual situation and are not limited here.

[0071] Next, this application can meticulously render the bullet screen objects extracted from the data queues of each Canvas layer onto their respective designated Canvas layers. This rendering process not only requires precision but also ensures that the layout and display effect of each bullet screen object on the Canvas layer meet expectations. After rendering is complete, this application can strictly follow the previously configured hierarchical relationship to perform orderly and efficient fusion processing of all rendered bullet screen objects with the corresponding video frames. This fusion process must not only ensure that the position of each bullet screen object in the video frame is accurate but also that the hierarchical relationship between them is clearly distinguishable. Finally, this application can transmit and display the fused complete image in real time in the target live broadcast room, ensuring that viewers can enjoy a smooth and layered visual experience while watching the live broadcast, thereby enhancing the viewers' viewing experience and the overall watchability of the live broadcast.

[0072] In the above embodiments, during the live broadcast in the target live room, real-time bullet screen data can first be acquired. After acquiring this real-time bullet screen data, the system can construct bullet screen objects corresponding to this real-time bullet screen data. In this way, the real-time bullet screen data can be filtered, sorted, and categorized and scheduled quickly and efficiently, ensuring that the bullet screens can be displayed smoothly in the target live room with low latency. Next, this application can place these constructed bullet screen objects into the data queue of the corresponding Canvas layer according to their categories. Each bullet screen category corresponds to an independent Canvas layer, and different Canvas layers will have corresponding hierarchical relationships. Each Canvas layer will be assigned an independent rendering context, which can effectively distribute the overall drawing task and thus significantly improve the overall refresh efficiency. When updating the live screen in the target live room frame by frame, this application can extract the corresponding bullet screen objects from the data queue of each Canvas layer according to the preset bullet screen refresh strategy. After extracting these bullet screen objects, this application can draw them onto their respective corresponding Canvas layers. After the drawing is completed, the drawn bullet screen objects are merged with the corresponding video frames according to the previously set hierarchical relationship, and finally the merged image is displayed in the target live broadcast room. This application, through this hierarchical management and frame-by-frame update method, not only ensures the smoothness and real-time performance of the bullet screen display, but also greatly improves the overall rendering effect of the live broadcast.

[0073] In one embodiment, constructing the bullet screen object corresponding to the real-time bullet screen data in S110 may include:

[0074] S111: Perform preprocessing operations on the real-time bullet screen data.

[0075] S112: Construct standardized bullet screen objects based on preprocessed real-time bullet screen data.

[0076] In this embodiment, when constructing the bullet screen object corresponding to the real-time bullet screen data, this application can first perform a preprocessing operation. This preprocessing operation encompasses multiple steps. Specifically, it includes not only filtering the data to remove invalid or redundant information, ensuring the purity and efficiency of the dataset; but also format conversion to uniformly convert data from different sources or formats into a standardized expression, facilitating convenient and consistent subsequent processing; furthermore, this preprocessing operation involves prioritizing the data. This application can use a pre-configured sorting algorithm to prioritize the display of bullet screen information with higher importance and delay the display of less important bullet screen information, thereby improving user experience and information delivery efficiency.

[0077] After preprocessing, this application enters the stage of constructing standardized bullet screen objects. In this stage, based on the preprocessed real-time bullet screen data, this application constructs standardized bullet screen objects one by one. These bullet screen objects not only contain the basic text content of the bullet screen, but also include additional information such as font style, color configuration, and dynamic effects, to ensure that the bullet screens displayed in the target live stream accurately convey the audience's information and have good visual effects.

[0078] In one embodiment, placing the bullet screen object into the data queue of the Canvas layer corresponding to the category of the bullet screen object in S110 may include:

[0079] S113: Determine the category of the bullet screen object based on the bullet screen characteristics of the bullet screen object, wherein the category of the bullet screen object includes static bullet screen, dynamic bullet screen and special effects bullet screen, the Canvas layer corresponding to the static bullet screen is the static bullet screen layer, the Canvas layer corresponding to the dynamic bullet screen is the dynamic bullet screen layer, and the Canvas layer corresponding to the special effects bullet screen is the special effects bullet screen layer.

[0080] S114: If the type of the bullet screen object is static bullet screen, then put the bullet screen object into the data queue of the static bullet screen layer.

[0081] S115: If the type of the bullet screen object is dynamic bullet screen, then put the bullet screen object into the data queue of the dynamic bullet screen layer.

[0082] S116: If the category of the bullet screen object is special effects bullet screen, then put the bullet screen object into the data queue of the special effects bullet screen layer.

[0083] In this embodiment, when classifying and placing bullet screen objects into the corresponding Canvas layer's data queue, this application can ensure that bullet screen objects are accurately assigned to their respective categories through feature recognition and classification operations. Specifically, this application can determine the category of a bullet screen object based on its bullet screen characteristics, such as text content, font style, color scheme, dynamic effects, and whether it has special visual effects. These categories include, but are not limited to, static bullet screens, dynamic bullet screens, and special effects bullet screens.

[0084] After determining the category of the bullet comment objects, this application can place the bullet comment objects into the corresponding category's Canvas layer data queue. For example, static bullet comments are usually simple text comments without any dynamic effects, like fixed text icons on the live stream screen. They remain static throughout the entire live stream and do not change position over time or due to other factors. This application can classify these static bullet comments into the static bullet comment layer. In the static bullet comment layer, all static bullet comments are neatly arranged without interfering with each other, allowing viewers to clearly see the content of each static bullet comment, ensuring the simplicity and accuracy of information display.

[0085] Dynamic bullet comments refer to bullet comments whose position changes over time or under specific conditions. These bullet comments may be text with movement effects, such as sliding from one side of the screen to the other, or jumping or flashing according to the interactive rules of the live stream. The existence of dynamic bullet comments adds more vitality and fun to the live stream and can attract the audience's attention. When encountering such dynamic bullet comments, this application can place them in a dynamic bullet comment layer. In the dynamic bullet comment layer, the bullet comments can be reasonably arranged according to parameters such as movement speed and direction to ensure that dynamic bullet comments do not collide or overlap, allowing the audience to watch the display of dynamic bullet comments smoothly.

[0086] As for special effects bullet comments, these bullet comments with special visual effects or animations are assigned to the special effects bullet comment layer. Special effects bullet comments are usually meticulously designed bullet comments, which may feature vibrant colors, exaggerated animation effects, or unique sound effects. They are often sent to express strong emotions from viewers or to encourage participation in special activities during the live stream. For example, bullet comments with lottery effects sent by viewers during a giveaway event are considered special effects bullet comments. Within the special effects bullet comment layer, rendering is specifically optimized for the characteristics of special effects bullet comments to ensure that the effects are perfectly displayed, providing viewers with a stunning visual experience.

[0087] Through such classification and allocation operations, this application not only achieves effective management of bullet screen objects, but also greatly improves the rendering efficiency of bullet screens and the viewing experience of the audience.

[0088] In one embodiment, drawing the extracted bullet screen objects onto the corresponding Canvas layer in step S120 may include:

[0089] S121: For each Canvas layer: Determine whether there are pre-rendered bullet comments in the extracted bullet comment objects. The pre-rendered bullet comments refer to reusable bullet comment objects that are pre-drawn in the off-screen Canvas. Each Canvas layer corresponds to an off-screen Canvas.

[0090] S122: If it exists, the pre-rendered bullet screen is transferred from the off-screen Canvas corresponding to the Canvas layer to the Canvas layer, and other bullet screen objects other than the pre-rendered bullet screen are drawn in the Canvas layer.

[0091] S123: If it does not exist, the extracted bullet screen object will be drawn directly onto the Canvas layer.

[0092] In this embodiment, to improve rendering efficiency and reduce repetitive drawing work when drawing the extracted bullet screen objects onto the corresponding Canvas layer, this application introduces the concept of pre-rendered bullet screens. Pre-rendered bullet screens refer to bullet screen objects that are pre-drawn and reusable in an off-screen Canvas, such as bullet screen objects that do not change frequently or bullet screen objects in fixed positions. An off-screen Canvas is a canvas that is not directly displayed on the screen; it can perform drawing operations in the background and then transfer the drawn content to the foreground Canvas layer for display.

[0093] Indicatively, such as Figure 2 As shown, Figure 2 This is a schematic diagram illustrating the process of drawing using pre-rendered bullet screens, provided in an embodiment of this application. Figure 2 In this application, for each Canvas layer, the first step is to check whether pre-rendered bullet comments exist in the extracted bullet comment objects. If pre-rendered bullet comments exist, the application can transfer these pre-rendered bullet comments from the corresponding off-screen Canvas to this Canvas layer, thus avoiding the need for redrawing and saving drawing time. Meanwhile, for other bullet comment objects in this Canvas layer besides pre-rendered bullet comments, the application can perform normal drawing operations.

[0094] If the extracted bullet screen objects do not contain pre-rendered bullet screens, this application can directly draw these bullet screen objects onto the corresponding Canvas layer. This drawing process can perform fine-grained drawing operations based on the attributes of the bullet screen objects, such as position, size, color, and dynamic effects, to ensure that the display effect of the bullet screen objects on the Canvas layer meets expectations.

[0095] By employing this pre-rendering and drawing strategy, this application not only improves the rendering efficiency of bullet comments but also reduces unnecessary drawing operations, thereby further enhancing the viewing experience. Simultaneously, since pre-rendered bullet comments can be reused across multiple live streams, it also significantly reduces system resource consumption.

[0096] In one embodiment, for each Canvas layer, drawing the extracted bullet screen objects onto that Canvas layer in S120 may include:

[0097] S124: After comparing the bullet screen object drawn in the previous drawing of the Canvas layer with the bullet screen object extracted this time, determine the target area that needs to be updated in the Canvas layer, and the target object to be drawn in the bullet screen object extracted this time.

[0098] S125: Clear the content of the target area in the Canvas layer, and draw the target object in the cleared target area.

[0099] In this embodiment, when drawing the extracted bullet screen objects onto each Canvas layer, in order to improve drawing efficiency and reduce unnecessary full-screen refreshes, this application may also adopt a local update strategy.

[0100] Specifically, such as Figure 3 As shown, Figure 3 A schematic diagram illustrating the process of drawing the extracted bullet screen object onto the Canvas layer using a local update strategy, as provided in this embodiment of the application; Figure 3 In this application, the previously drawn bullet screen objects on the current Canvas layer are compared with the currently extracted bullet screen objects. This comparison process covers multiple aspects such as the position, size, shape, and dynamic effects of the bullet screen objects to ensure accurate identification of the target areas that need to be updated. Through comparison, this application can determine which bullet screen objects have changed, which are newly appearing bullet screen objects, and which bullet screen objects no longer need to be displayed.

[0101] After determining the target area to be updated and the target object to be drawn, this application can clear the content of the target area. This clearing process ensures that the old bullet screen objects in the target area will not interfere with the display of the new bullet screen objects. After clearing, this application can draw the target object to be drawn in the cleared target area. This drawing process can be finely manipulated according to the properties of the bullet screen objects to ensure that the display effect of the bullet screen objects on the Canvas layer is both accurate and smooth.

[0102] By employing the aforementioned partial update strategy, this application not only improves the efficiency of bullet screen rendering but also reduces the number of full-screen refreshes, thereby further enhancing the viewing experience. Simultaneously, because the operation only targets the areas that need updating, it significantly reduces system resource consumption and energy consumption.

[0103] In one embodiment, the Canvas layer may include a static bullet screen layer, a dynamic bullet screen layer, and a special effects bullet screen layer.

[0104] When the target live stream is detected to meet the preset accelerated synthesis conditions, step S120 involves drawing the extracted bullet screen objects onto the corresponding Canvas layer, which may include:

[0105] S126: When supported by the browser, use the WebGL hybrid rendering mode to render the extracted bullet screen objects of the special effects bullet screen layer.

[0106] S127: Draw the extracted static bullet screen object onto the static bullet screen layer, and draw the extracted dynamic bullet screen object onto the dynamic bullet screen layer.

[0107] In this embodiment, when the target live stream meets the preset accelerated compositing conditions, in order to improve the rendering quality and efficiency of the special effects bullet comments, this application can also adopt an accelerated compositing strategy. The preset accelerated compositing conditions include, but are not limited to, high-concurrency bullet comment input, system reaching performance bottlenecks, significant latency or frame drops in the live stream, and the user enabling high-quality mode. It is understood that when the number of bullet comments reaches a certain threshold or the system reaches performance bottlenecks, simply rendering them one by one will lead to significant stuttering. Furthermore, when significant latency or frame drops occur in the live stream, the user experience is significantly degraded. At this time, activating the accelerated compositing strategy can ensure smooth live stream playback and improve the user experience.

[0108] Specifically, if the browser supports WebGL technology, this application can utilize the WebGL hybrid rendering mode to render the bullet screen objects in the special effects bullet screen layer. WebGL is a JavaScript API that implements 3D graphics and rendering in the browser, allowing web pages to utilize underlying graphics hardware acceleration for high-performance graphics rendering. Through the WebGL hybrid rendering mode, this application can fully utilize the hardware acceleration capabilities of the graphics card to perform more complex and refined rendering processing on the special effects bullet screen, thereby allowing viewers to see more dazzling and realistic special effects bullet screen effects in the live broadcast room.

[0109] In addition to special processing of special effects bullet comments, this application will also follow the normal rendering process, drawing bullet comment objects from the static bullet comment layer to the static bullet comment layer, and drawing bullet comment objects from the dynamic bullet comment layer to the dynamic bullet comment layer. This process can combine the aforementioned pre-rendering bullet comment strategy and local update strategy, so that whether it is simple static bullet comments, bullet comments with dynamic effects, or even special effects bullet comments, they can all be rendered efficiently and accurately, allowing viewers to have the best viewing experience in the live broadcast room.

[0110] Through the above rendering strategies and processes, this application not only achieves efficient rendering and processing of live stream comments, but also greatly enhances the viewing experience for viewers.

[0111] In one embodiment, such as Figure 4 As shown, Figure 4This is a schematic diagram illustrating the process of drawing the extracted bullet screen objects onto a Canvas layer using mesh partitioning and anti-collision strategies, as provided in the embodiments of this application. For each Canvas layer, drawing the extracted bullet screen objects onto that Canvas layer in S120 may include:

[0112] S128: Divide the canvas of this Canvas layer into multiple grid units, and each grid unit maintains a list of bullet comments.

[0113] S129: When any bullet screen object is extracted, determine the target grid cell covered by the bullet screen object, and detect whether the bullet screen object overlaps with the bullet screen objects in the target bullet screen list maintained by the target grid cell.

[0114] S1210: If there is overlap, adjust the preset position of the bullet screen object, draw the bullet screen object to the Canvas layer according to the adjusted preset position, and register the adjusted preset position to the corresponding grid cell.

[0115] S1211: If there is no overlap, the bullet screen object is drawn onto the Canvas layer according to the preset position of the bullet screen object, and the preset position is registered to the target grid cell.

[0116] In this embodiment, when drawing the extracted bullet screen objects onto each Canvas layer, to avoid collisions and overlaps between bullet screen objects, this application can also employ grid partitioning and anti-collision strategies. This strategy first logically divides the Canvas layer into multiple grid units. Each grid unit is responsible for maintaining a bullet screen list, used to record all bullet screen objects currently located within that grid unit.

[0117] Specifically, such as Figure 4 As shown, when a new bullet screen object is extracted, this application first determines the position of the bullet screen object on the Canvas layer and calculates the target mesh cell it covers. Then, this application checks whether there are other bullet screen objects in the bullet screen list maintained by the target mesh cell, and whether these bullet screen objects overlap with the new bullet screen object. This detection process can be based on information such as the position, size, and shape of the bullet screen object, and uses a collision detection formula to determine whether there is bullet screen overlap, so as to ensure that potential collisions can be accurately identified.

[0118] If overlap is detected, this application will adjust the position of the new bullet screen object to avoid collisions. This adjustment process can be based on preset anti-collision rules, such as translating the bullet screen object a certain distance in a certain direction, or changing its display position, until a usable position without collision is found. After the adjustment is completed, this application can draw the new bullet screen object onto the Canvas layer according to the adjusted position and register it to the bullet screen list of the corresponding target grid cell.

[0119] If no overlap is detected, this application directly draws the new bullet screen object onto the Canvas layer and registers it in the bullet screen list of the target grid cell. This drawing process can be finely manipulated based on the attributes of the bullet screen object to ensure that its display effect on the Canvas layer meets expectations.

[0120] Through the aforementioned grid division and anti-collision strategy, this application not only effectively avoids collisions and overlaps between bullet screen objects, but also improves the accuracy and smoothness of bullet screen rendering. Simultaneously, since each grid cell is only responsible for maintaining the bullet screen objects within it, the system's resource consumption and complexity are significantly reduced. This allows viewers to enjoy a clearer, cleaner, and more engaging bullet screen interaction experience in the live stream.

[0121] In one embodiment, determining the preset position of the bullet screen object in step S1210 may include:

[0122] S211: Real-time collection of the bullet screen density in the target live stream room.

[0123] S212: Adjust the movement speed of the bullet screen object according to the bullet screen density and the speed coefficient corresponding to the category of the bullet screen object.

[0124] S213: Determine the preset position of the bullet object based on the adjusted movement speed.

[0125] In this embodiment, when determining the preset position of the bullet comment object, this application also considers the important factor of bullet comment density in the live stream. Specifically, this application can collect bullet comment density information of the target live stream in real time. This information can reflect the activity level and distribution of bullet comments in the current live stream. The collected bullet comment density data can be used to assess the congestion level of bullet comments in the live stream, thereby providing a basis for subsequent bullet comment position adjustments.

[0126] After obtaining the bullet comment density, this application can adjust the movement speed of the bullet comment objects based on the density and the speed coefficient corresponding to the bullet comment object category. The speed coefficient here is a pre-set coefficient related to the category of the bullet comment object (such as static bullet comments, dynamic bullet comments, or special effects bullet comments), used to reflect the differences in movement speed among different categories of bullet comments. By combining bullet comment density and speed coefficient, this application can dynamically adjust the movement speed of the bullet comment objects to adapt to the bullet comment display needs of different live streaming environments.

[0127] For example, when calculating the current bullet screen density in a live stream, this application can count the number of currently active bullet screens and adjust the base speed based on that number. For instance, if the number of active bullet screens is below a low-density threshold, the base speed is set to the maximum speed; if the number of active bullet screens is between low and high density thresholds, the base speed is dynamically adjusted based on the number of bullet screens; when the number of active bullet screens reaches or exceeds a high-density threshold, the base speed is set to the minimum speed. Next, for each bullet screen, this application can determine a corresponding speed coefficient based on its category and multiply the base speed by this speed coefficient to calculate the final movement speed of each bullet screen. In each frame, this application can update the bullet screen position in real time based on the calculated movement speed, ensuring that the bullet screens move smoothly at the preset speed.

[0128] Furthermore, when determining the preset position of the bullet comment object based on the adjusted movement speed, this application can comprehensively consider factors such as the starting position, movement speed, movement direction, and spatial layout within the live stream to ensure that the bullet comment object can be displayed in the expected manner and position. Through this position determination strategy, this application not only improves the flexibility and accuracy of bullet comment display but also further enhances the viewer's experience.

[0129] In one embodiment, S120, which merges the drawn bullet screen objects with the corresponding video frames according to the hierarchical relationship and displays them in the target live stream room, may include:

[0130] S1212: Convert the bullet screen objects drawn by the static bullet screen layer and the dynamic bullet screen layer, as well as the corresponding drawn video frames, into WebGL textures.

[0131] S1213: The WebGL texture is mixed with the bullet screen object rendered by the special effects bullet screen layer to form a multi-layer texture.

[0132] S1214: The multi-layered texture is synthesized according to a preset synthesis rule and displayed in the target live broadcast room.

[0133] In this embodiment, when merging the drawn bullet screen objects with the corresponding video frames and displaying them in the target live stream, this application can also employ an efficient compositing strategy. Specifically, this application first converts the bullet screen objects drawn in the static and dynamic bullet screen layers, as well as the corresponding drawn video frames, into WebGL textures. A WebGL texture is an object used to store image data in a WebGL context. By converting the video frames and bullet screen objects into textures, this application can fully utilize the hardware acceleration capabilities of the graphics card to improve compositing efficiency.

[0134] Next, this application can blend WebGL textures with the rendered bullet screen objects after the special effects bullet screen layer to form multi-layered textures. This process ensures that special effects bullet screens, static bullet screens, dynamic bullet screens, and video frames can be superimposed and displayed according to the expected hierarchical relationship.

[0135] Finally, this application can composite multi-layered textures according to preset compositing rules and display the composited result in the target live streaming room. The preset compositing rules include, but are not limited to, transparency compositing, color blending, motion trajectory smoothing, etc., to ensure that bullet screen objects and video frames of different levels can be seamlessly integrated, providing the best viewing experience for the audience.

[0136] Through the above-mentioned synthesis strategy and process, this application not only achieves efficient synthesis and display of live broadcast comments and video frames, but also further enhances the viewing experience for viewers.

[0137] In one embodiment, the method may further include:

[0138] S130: Collect the system's performance metrics in real time, and determine the current computing load and current frame rate based on the performance metrics.

[0139] S140: If the current computing load is higher than a preset load threshold and the current frame rate is lower than a preset frame rate threshold, then the bullet screen refresh strategy is adjusted.

[0140] S150: If the current computing load is not higher than the preset load threshold and the current frame rate is not lower than the preset frame rate threshold, then ensure that the target live room is in full HD display mode.

[0141] In this embodiment,

[0142] To ensure the stability and efficiency of live stream chat rendering, this application can also monitor system performance metrics in real time and dynamically adjust the chat refresh strategy based on these metrics. Specifically, this application can collect real-time performance metrics such as the current system's frame rate, processing latency, and CPU and GPU utilization, which reflect the system's operating status and performance.

[0143] After obtaining performance metrics such as the current system's frame rate, processing latency, and CPU and GPU utilization, this application can determine the system's current computational load and frame rate based on these metrics, and evaluate them to determine whether the system is currently overloaded or experiencing a performance bottleneck. If the current computational load is higher than a preset load threshold and the current frame rate is lower than a preset frame rate threshold, this means the system may be facing performance pressure and unable to maintain smooth bullet screen rendering and video playback. In this case, this application can adjust the bullet screen refresh strategy to reduce the system's computational burden and improve rendering efficiency. The adjustment strategy may include, but is not limited to, reducing the update frequency of static bullet screens, reducing the rendering quality or quantity of special effect bullet screens, and optimizing the rendering process of bullet screen objects.

[0144] Conversely, if the current computational load is not higher than a preset load threshold and the current frame rate is not lower than a preset frame rate threshold, this indicates that the system is currently performing well and can maintain smooth bullet screen rendering and video playback. In this case, this application can ensure that the target live stream is in full HD display mode to provide the best viewing experience. Full HD display mode means that video frames and bullet screen objects will be rendered and displayed at high resolution, thus allowing viewers to obtain a clearer, more detailed, and more realistic viewing experience in the live stream.

[0145] The following describes the live streaming barrage rendering device provided in the embodiments of this application. The live streaming barrage rendering device described below can be referred to in correspondence with the live streaming barrage rendering method described above.

[0146] In one embodiment, such as Figure 5 As shown, Figure 5 This application provides a schematic diagram of the structure of a live streaming chat rendering device according to an embodiment of the present application; the present application also provides a live streaming chat rendering device, which may include a chat acquisition module 210 and a chat rendering module 220:

[0147] The bullet screen acquisition module 210 is used to acquire real-time bullet screen data during the live broadcast of the target live room, construct a bullet screen object corresponding to the real-time bullet screen data, and put the bullet screen object into the data queue of the Canvas layer corresponding to the category of the bullet screen object. Each category corresponds to a Canvas layer, and there is a corresponding hierarchical relationship between the Canvas layers. Each Canvas layer is allocated an independent rendering context.

[0148] The bullet screen rendering module 220 is used to extract bullet screen objects from the data queue of each Canvas layer according to a preset bullet screen refresh strategy when updating the live screen in the target live room frame by frame, and after drawing the extracted bullet screen objects onto the corresponding Canvas layer, merge the drawn bullet screen objects with the corresponding video frames and display them in the target live room according to the hierarchical relationship.

[0149] In the above embodiments, during the live broadcast in the target live room, real-time bullet screen data can first be acquired. After acquiring this real-time bullet screen data, the system can construct bullet screen objects corresponding to this real-time bullet screen data. In this way, the real-time bullet screen data can be filtered, sorted, and categorized and scheduled quickly and efficiently, ensuring that the bullet screens can be displayed smoothly in the target live room with low latency. Next, this application can place these constructed bullet screen objects into the data queue of the corresponding Canvas layer according to their categories. Each bullet screen category corresponds to an independent Canvas layer, and different Canvas layers will have corresponding hierarchical relationships. Each Canvas layer will be assigned an independent rendering context, which can effectively distribute the overall drawing task and thus significantly improve the overall refresh efficiency. When updating the live screen in the target live room frame by frame, this application can extract the corresponding bullet screen objects from the data queue of each Canvas layer according to the preset bullet screen refresh strategy. After extracting these bullet screen objects, this application can draw them onto their respective corresponding Canvas layers. After the drawing is completed, the drawn bullet screen objects are merged with the corresponding video frames according to the previously set hierarchical relationship, and finally the merged image is displayed in the target live broadcast room. This application, through this hierarchical management and frame-by-frame update method, not only ensures the smoothness and real-time performance of the bullet screen display, but also greatly improves the overall rendering effect of the live broadcast.

[0150] In one embodiment, this application also provides a computer-readable storage medium storing computer-readable instructions that, when executed by one or more processors, cause the one or more processors to perform the steps of the live-streaming chat rendering method as described in any of the above embodiments.

[0151] In one embodiment, this application also provides a computer device, including: one or more processors, and memory.

[0152] The memory stores computer-readable instructions, which, when executed by the one or more processors, perform the steps of the live-streaming chat rendering method as described in any of the above embodiments.

[0153] Indicatively, such asFigure 6 As shown, Figure 6 This is a schematic diagram of the internal structure of a computer device 300 provided in an embodiment of this application. The computer device 300 can be provided as a server. (Refer to...) Figure 6 The computer device 300 includes a processing component 302, which further includes one or more processors, and memory resources represented by memory 301 for storing instructions executable by the processing component 302, such as application programs. The application programs stored in memory 301 may include one or more modules, each corresponding to a set of instructions. Furthermore, the processing component 302 is configured to execute instructions to perform the live-streaming chat rendering method of any of the above embodiments.

[0154] The computer device 300 may also include a power supply component 303 configured to perform power management of the computer device 300, a wired or wireless network interface 304 configured to connect the computer device 300 to a network, and an input / output (I / O) interface 305. The computer device 300 may operate on an operating system stored in memory 301, such as Windows Server™, Mac OS X™, Unix™, Linux™, Free BSD™, or similar.

[0155] Those skilled in the art will understand that Figure 6 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0156] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0157] The various embodiments in this specification are described in a progressive manner. Each embodiment focuses on the differences from other embodiments. The various embodiments can be combined as needed, and the same or similar parts can be referred to each other.

[0158] The above description of the disclosed embodiments enables those skilled in the art to make or use this application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this application. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for rendering bullet comments in a live streaming room, characterized in that, The method includes: During the live stream in the target live room, real-time bullet screen data is acquired, and a bullet screen object corresponding to the real-time bullet screen data is constructed. The bullet screen object is then placed into the data queue of the Canvas layer corresponding to the category of the bullet screen object. Each category corresponds to one Canvas layer, and there is a corresponding hierarchical relationship between the various Canvas layers. Each Canvas layer is allocated an independent rendering context. The Canvas layer includes a static bullet screen layer, a dynamic bullet screen layer, and a special effects bullet screen layer. When updating the live screen in the target live room frame by frame, the bullet screen objects in the data queue of each Canvas layer are extracted according to the preset bullet screen refresh strategy. After the extracted bullet screen objects are drawn onto the corresponding Canvas layer, the drawn bullet screen objects are merged with the corresponding video frames and displayed in the target live room according to the hierarchical relationship. When the target live stream is detected to meet the preset accelerated compositing conditions, the step of drawing the extracted bullet screen objects onto the corresponding Canvas layer, and then merging the drawn bullet screen objects with the corresponding video frames and displaying them in the target live stream according to the hierarchical relationship, includes: With browser support, the extracted bullet screen objects of the special effects bullet screen layer are rendered using the WebGL hybrid rendering mode. The extracted static bullet screen object is drawn onto the static bullet screen layer, and the extracted dynamic bullet screen object is drawn onto the dynamic bullet screen layer. Convert the bullet screen objects drawn in the static bullet screen layer and the dynamic bullet screen layer, as well as the corresponding drawn video frames, into WebGL textures; The WebGL texture is mixed with the bullet screen object rendered from the special effects bullet screen layer to form a multi-layer texture; The multi-layered textures are synthesized according to preset synthesis rules and displayed in the target live streaming room.

2. The live stream chat rendering method according to claim 1, characterized in that, The construction of the bullet screen object corresponding to the real-time bullet screen data includes: The real-time bullet screen data is preprocessed. Standardized bullet screen objects are constructed based on preprocessed real-time bullet screen data.

3. The live stream chat rendering method according to claim 1, characterized in that, The step of placing the bullet screen object into the data queue of the Canvas layer corresponding to the category of the bullet screen object includes: The category of the bullet screen object is determined based on the bullet screen characteristics of the bullet screen object. The categories of the bullet screen object include static bullet screen, dynamic bullet screen and special effects bullet screen. The Canvas layer corresponding to the static bullet screen is the static bullet screen layer, the Canvas layer corresponding to the dynamic bullet screen is the dynamic bullet screen layer, and the Canvas layer corresponding to the special effects bullet screen is the special effects bullet screen layer. If the type of the bullet screen object is static bullet screen, then the bullet screen object is placed in the data queue of the static bullet screen layer; If the type of the bullet screen object is dynamic bullet screen, then the bullet screen object is placed in the data queue of the dynamic bullet screen layer; If the category of the bullet screen object is special effects bullet screen, then the bullet screen object is placed in the data queue of the special effects bullet screen layer.

4. The live stream chat rendering method according to claim 1, characterized in that, The step of drawing the extracted bullet screen objects onto the corresponding Canvas layer includes: For each Canvas layer: Determine whether there are pre-rendered bullet comments in the extracted bullet comment objects. The pre-rendered bullet comments refer to reusable bullet comment objects that are pre-drawn in the off-screen Canvas. Each Canvas layer corresponds to an off-screen Canvas. If it exists, the pre-rendered bullet screen is transferred from the off-screen Canvas corresponding to the Canvas layer to the Canvas layer, and other bullet screen objects other than the pre-rendered bullet screen are drawn in the Canvas layer; If it does not exist, the extracted bullet screen object will be drawn directly onto the Canvas layer.

5. The live stream chat rendering method according to claim 1, characterized in that, For each Canvas layer, drawing the extracted bullet screen objects onto that Canvas layer includes: After comparing the previously drawn bullet screen object of the Canvas layer with the bullet screen object extracted this time, the target area that needs to be updated in the Canvas layer and the target object to be drawn in the extracted bullet screen object are determined. Clear the content of the target area in the Canvas layer, and then draw the target object within the cleared target area.

6. The method for rendering live stream chat comments according to any one of claims 1-5, characterized in that, For each Canvas layer, drawing the extracted bullet screen objects onto that Canvas layer includes: Divide the canvas layer into multiple grid units, and each grid unit maintains a list of bullet comments. When any bullet screen object is extracted, the target grid cell covered by the bullet screen object is determined, and it is detected whether the bullet screen object overlaps with the bullet screen objects in the target bullet screen list maintained by the target grid cell. If they overlap, the preset position of the bullet screen object is adjusted, and then the bullet screen object is drawn onto the Canvas layer according to the adjusted preset position, and the adjusted preset position is registered to the corresponding grid cell. If they do not overlap, the bullet screen object is drawn onto the Canvas layer according to its preset position, and the preset position is registered to the target grid cell.

7. The live stream chat rendering method according to claim 6, characterized in that, Determining the preset position of the bullet screen object includes: Real-time collection of the bullet screen density in the target live stream room; The movement speed of the bullet object is adjusted according to the bullet density and the speed coefficient corresponding to the category of the bullet object; The preset position of the bullet screen object is determined based on the adjusted movement speed.

8. The method for rendering live stream chat comments according to any one of claims 1-5 and 7, characterized in that, The method further includes: The system collects performance metrics in real time and determines the current computational load and current frame rate based on these metrics. If the current computing load is higher than a preset load threshold and the current frame rate is lower than a preset frame rate threshold, then the bullet screen refresh strategy is adjusted. If the current computing load is not higher than a preset load threshold and the current frame rate is not lower than a preset frame rate threshold, then the target live streaming room is ensured to be in full HD display mode.

9. A live-streaming chat rendering device, characterized in that, include: The bullet screen acquisition module is used to acquire real-time bullet screen data during the live broadcast of the target live room, construct a bullet screen object corresponding to the real-time bullet screen data, and then put the bullet screen object into the data queue of the Canvas layer corresponding to the category of the bullet screen object. Each category corresponds to a Canvas layer, and there is a corresponding hierarchical relationship between the Canvas layers. Each Canvas layer is allocated an independent rendering context. The Canvas layer includes a static bullet screen layer, a dynamic bullet screen layer, and a special effects bullet screen layer. The bullet screen rendering module is used to extract bullet screen objects from the data queue of each Canvas layer according to the preset bullet screen refresh strategy when updating the live screen in the target live room frame by frame, and draw the extracted bullet screen objects onto the corresponding Canvas layer. Then, according to the hierarchical relationship, the drawn bullet screen objects are merged with the corresponding video frames and displayed in the target live room. When the target live stream is detected to meet the preset accelerated compositing conditions, the bullet screen rendering module draws the extracted bullet screen objects onto the corresponding Canvas layer, and then merges the drawn bullet screen objects with the corresponding video frames according to the hierarchical relationship and displays them in the target live stream, including: With browser support, the extracted bullet screen objects of the special effects bullet screen layer are rendered using the WebGL hybrid rendering mode. The extracted static bullet screen object is drawn onto the static bullet screen layer, and the extracted dynamic bullet screen object is drawn onto the dynamic bullet screen layer. Convert the bullet screen objects drawn in the static bullet screen layer and the dynamic bullet screen layer, as well as the corresponding drawn video frames, into WebGL textures; The WebGL texture is mixed with the bullet screen object rendered from the special effects bullet screen layer to form a multi-layer texture; The multi-layered textures are synthesized according to preset synthesis rules and displayed in the target live streaming room.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-readable instructions that, when executed by one or more processors, cause the one or more processors to perform the steps of the live-streaming chat rendering method as described in any one of claims 1 to 8.

11. A computer device, characterized in that, include: One or more processors, and memory; The memory stores computer-readable instructions, which, when executed by the one or more processors, perform the steps of the live-streaming chat rendering method as described in any one of claims 1 to 8.

Images