Live broadcasting room bullet screen rendering method and device, storage medium and computer equipment

Abstract

According to the live broadcast room bullet screen rendering method and device, the storage medium and the computer equipment provided by the invention, when live broadcast is carried out in the target live broadcast room, the real-time bullet screen data is firstly obtained, the corresponding bullet screen object is constructed, and rapid and efficient filtering, sorting and classified scheduling processing is carried out on the bullet screen object, so that low-delay and smooth display of the bullet screen is ensured. And then, the constructed bullet screen objects are put into corresponding Canvas layer data queues according to categories, each bullet screen category corresponds to an independent Canvas layer, a hierarchical relationship is set for each layer, and independent rendering contexts are allocated, so that the drawing tasks are effectively shared, and the refreshing efficiency is improved. Then, when the live broadcast picture is updated frame by frame, the bullet screen objects can be extracted from the Canvas layer data queues and drawn to the corresponding Canvas layers, and then the bullet screen objects and the video frames are combined according to the hierarchical relation and displayed in the target live broadcast room. Through hierarchical management and frame-by-frame updating, it is ensured that bullet screen display is smooth and real-time, and the overall rendering effect of the live broadcast picture is improved.

Description

Technical Field

[0001] The present application relates to the field of bullet screen rendering technology, and in particular to a method, device, storage medium and computer equipment for rendering bullet screen in a live broadcast room. Background Art

[0002] Currently, livestreaming studios primarily use DOM-based bullet-screen rendering technology to render real-time bullet screen content. This technology encapsulates the bullet screen text within an HTML DOM element, then uses JavaScript to embed the DOM element containing the bullet screen text into HTML for rendering. Subsequently, the position of the DOM element containing the bullet screen text is continuously calculated and adjusted, creating a moving animation.

[0003] However, using DOM to render bullet comments has certain drawbacks. Because the positions of all DOM elements must be calculated and changed, excessive use of browser DOM nodes when displaying a large number of bullet comments simultaneously can easily lead to excessive CPU computing pressure, causing issues such as lag, frame drops, delayed bullet comment display, and disordered order. Summary of the Invention

[0004] The purpose of this application is to solve at least one of the above-mentioned technical defects, especially the technical defects in which the existing technology uses DOM barrage rendering technology to render real-time barrage in the live broadcast room, which easily leads to excessive CPU computing pressure, thereby causing problems such as freezes, frame drops, barrage display delays and disordered order.

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

[0006] During the live broadcast of the target live broadcast room, real-time bullet chat data is obtained, and a bullet chat object corresponding to the real-time bullet chat data is constructed. The bullet chat object is then placed in the data queue of the Canvas layer corresponding to the category of the bullet chat object. Each category corresponds to a Canvas layer, and a corresponding hierarchical relationship is set between each Canvas layer, and each Canvas layer is allocated an independent rendering context;

[0007] When the live broadcast screen in the target live broadcast room is updated frame by frame, the barrage objects in the data queue of each Canvas layer are extracted respectively according to the preset barrage refresh strategy, and the extracted barrage objects are drawn to the corresponding Canvas layer. Then, the drawn barrage objects are merged with the corresponding video frames according to the hierarchical relationship and displayed in the target live broadcast room.

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

[0009] Performing preprocessing operations on the real-time barrage data;

[0010] Build a standardized barrage object based on the preprocessed real-time barrage data.

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

[0012] Determining the category of the barrage object according to the barrage features of the barrage object, wherein the categories of the barrage object include static barrage, dynamic barrage, and special effect barrage. The Canvas layer corresponding to the static barrage is the static barrage layer, the Canvas layer corresponding to the dynamic barrage is the dynamic barrage layer, and the Canvas layer corresponding to the special effect barrage is the special effect barrage layer;

[0013] If the category of the barrage object is static barrage, the barrage object is placed in the data queue of the static barrage layer;

[0014] If the category of the barrage object is dynamic barrage, the barrage object is placed in the data queue of the dynamic barrage layer;

[0015] If the category of the barrage object is special effect barrage, the barrage object is placed in the data queue of the special effect barrage layer.

[0016] Optionally, drawing the extracted bullet chat object to a corresponding Canvas layer includes:

[0017] For each Canvas layer:

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

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

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

[0021] Optionally, for each Canvas layer, drawing the extracted bullet chat object to the Canvas layer includes:

[0022] After comparing the last drawn bullet chat object of the Canvas layer with the currently extracted bullet chat object, determine the target area that needs to be updated in the Canvas layer and the target object to be drawn in the currently extracted bullet chat object;

[0023] The content of the target area in the Canvas layer is cleared, and the target object is drawn in the cleared target area.

[0024] Optionally, the Canvas layer includes a static barrage layer, a dynamic barrage layer and a special effect barrage layer;

[0025] When it is detected that the target live broadcast room meets the preset accelerated synthesis condition, the extracted bullet screen object is drawn to the corresponding Canvas layer, including:

[0026] If supported by the browser, use the WebGL hybrid rendering mode to render the extracted bullet screen objects of the special effect bullet screen layer;

[0027] The extracted bullet chat objects of the static bullet chat layer are drawn to the static bullet chat layer, and the extracted bullet chat objects of the dynamic bullet chat layer are drawn to the dynamic bullet chat layer.

[0028] Optionally, for each Canvas layer, drawing the extracted bullet chat object to the Canvas layer includes:

[0029] The canvas of the Canvas layer is divided into multiple grid units, and each grid unit maintains a bullet comment list;

[0030] When any bullet chat object is extracted, the target grid unit covered by the bullet chat object is determined, and whether the bullet chat object overlaps with the bullet chat objects in the target bullet chat list maintained by the target grid unit is detected;

[0031] If there is overlap, adjust the preset position of the bullet chat object, draw the bullet chat object to the Canvas layer according to the adjusted preset position, and register the adjusted preset position to the corresponding grid unit;

[0032] If there is no overlap, the bullet screen object is drawn to the Canvas layer according to the preset position of the bullet screen object, and the preset position is registered to the target grid unit.

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

[0034] Collect the barrage density of the target live broadcast room in real time;

[0035] Adjusting the moving speed of the barrage object according to the barrage density and a speed coefficient corresponding to the category of the barrage object;

[0036] The preset position of the bullet screen object is determined according to the adjusted moving speed.

[0037] Optionally, merging the drawn bullet screen object with the corresponding video frame according to the hierarchical relationship and displaying them in the target live broadcast room includes:

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

[0039] Mixing the WebGL texture with the bullet screen object rendered by the special effect bullet screen layer to form a multi-layer texture;

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

[0041] Optionally, the method further includes:

[0042] Collecting performance indicators of the system in real time, and determining the current computing load and current frame rate based on the performance indicators;

[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, adjusting the bullet screen refresh strategy;

[0044] 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, ensure that the target live broadcast room is in full HD display mode.

[0045] This application also provides a live broadcast room bullet screen rendering device, including:

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

[0047] The barrage rendering module is used to extract the barrage objects in the data queue of each Canvas layer according to the preset barrage refresh strategy when updating the live screen in the target live broadcast room frame by frame, and after drawing the extracted barrage objects to the corresponding Canvas layer, the drawn barrage objects are merged with the corresponding video frames according to the hierarchical relationship and displayed in the target live broadcast room.

[0048] The present application also provides a computer-readable storage medium, which stores computer-readable instructions. When the computer-readable instructions are executed by one or more processors, the one or more processors execute the steps of the live broadcast room barrage rendering method as described in any of the above embodiments.

[0049] The present application also provides a computer device, comprising: one or more processors, and a memory;

[0050] The memory stores computer-readable instructions, and when the computer-readable instructions are executed by the one or more processors, the steps of the live broadcast room bullet screen rendering method as described in any one of the above embodiments are performed.

[0051] It can be seen from the above technical solutions that the embodiments of the present application have the following advantages:

[0052] The live broadcast room barrage rendering method, device, storage medium and computer equipment provided by the present application can first obtain real-time barrage data during the live broadcast of the target live broadcast room. After obtaining these real-time barrage data, the system can construct barrage objects corresponding to these real-time barrage data. In this way, the real-time barrage data can be quickly and efficiently filtered, sorted and classified and scheduled to ensure that the barrage can be displayed in the target live broadcast room in a smooth manner with low latency. Next, the present application can put these constructed barrage objects into the data queue of the corresponding Canvas layer according to their category, wherein each barrage category corresponds to an independent Canvas layer, and corresponding hierarchical relationships are set between different Canvas layers, and each Canvas layer will be assigned an independent rendering context, which can effectively share the overall drawing task, thereby significantly improving the overall refresh efficiency. When updating the live broadcast screen in the target live broadcast room frame by frame, the present application can extract the corresponding barrage objects from the data queue of each Canvas layer according to the preset barrage refresh strategy. After extracting these barrage objects, the present application can draw them onto their respective corresponding Canvas layers. After the drawing is completed, the drawn barrage object is merged with the corresponding video frame according to the previously set hierarchical relationship, and the merged image is finally displayed in the target live broadcast room. Through this hierarchical management and frame-by-frame update method, this application not only ensures the smoothness and real-time performance of the barrage display, but also greatly improves the overall rendering effect of the live broadcast screen. BRIEF DESCRIPTION OF THE DRAWINGS

[0053] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0054] Figure 1 A flowchart of a method for rendering bullet screen in a live broadcast room provided in an embodiment of the present application;

[0055] Figure 2 A schematic diagram of the process of drawing using pre-rendered bullet screens provided in an embodiment of the present application;

[0056] Figure 3 A schematic diagram of the process of drawing the extracted bullet chat object to the Canvas layer using a local update strategy provided in an embodiment of the present application;

[0057] Figure 4 A schematic diagram of the process of drawing the extracted bullet chat objects onto the Canvas layer using grid division and anti-collision strategies provided in an embodiment of the present application;

[0058] Figure 5 A schematic diagram of the structure of a live broadcast room bullet screen rendering device provided in an embodiment of the present application;

[0059] Figure 6 A schematic diagram of the internal structure of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0060] The following will be combined with the drawings in the embodiments of this application to clearly and completely describe the technical solutions in the embodiments of this application. Obviously, the embodiments described are only part of the embodiments of this application, not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0061] In one embodiment, Figure 1 As shown, Figure 1 A flowchart of a method for rendering bullet screen in a live broadcast room provided in an embodiment of the present application; the present application provides a method for rendering bullet screen in a live broadcast room, which may include:

[0062] S110: During the live broadcast of the target live broadcast room, real-time barrage data is obtained, and after constructing a barrage object corresponding to the real-time barrage data, the barrage object is placed in the data queue of the Canvas layer corresponding to the category of the barrage object, wherein each category corresponds to a Canvas layer, and there is a corresponding hierarchical relationship between each Canvas layer, and each Canvas layer is allocated an independent rendering context.

[0063] In this step, when rendering the real-time barrage data generated during the live broadcast of the target live broadcast room, the real-time barrage data of the target live broadcast room can be obtained first, and then the real-time barrage data can be parsed and processed to construct a barrage object corresponding to the real-time barrage data. Then, the application can place the barrage objects into the data queue of the corresponding Canvas layer according to their categories, and when updating the live broadcast screen of the target live broadcast room frame by frame, the barrage objects stored in the data queue of each Canvas layer can be used to update the barrage in the live broadcast screen.

[0064] Among them, this application can use WebSocket technology to receive real-time barrage data, which not only contains basic text content, but also covers a wealth of additional information, such as font style, color configuration, motion parameters, and special effects information. After receiving this data, this application can perform preliminary parsing processing on it to ensure the integrity and readability of the data. Subsequently, the data is further processed through a series of preprocessing algorithms, including but not limited to data filtering to remove invalid or redundant information, format conversion to unify data expression, and priority sorting to ensure that important barrages can be displayed first. Through these steps, a standardized barrage object is finally constructed for efficient and accurate display and management in the subsequent application.

[0065] In addition, when placing the barrage objects into the data queue of the Canvas layer corresponding to the category of the barrage objects, the application can perform detailed classification based on the specific characteristics of the barrage objects. It is understandable that in actual live broadcast scenes, the expression of barrages is rich and diverse, and different types of barrages have their own unique characteristics, so accurate classification is very important.

[0066] For example, static barrages are fixed-position, simple text comments with no dynamic effects, like a fixed text logo in a livestream, remaining static throughout the broadcast. These barrages can be assigned to a specific Canvas layer, where they are neatly arranged and avoid interfering with each other, ensuring concise and accurate information presentation. Dynamic barrages, on the other hand, change position over time or under specific conditions, and may feature effects such as movement, dancing, and flashing, adding vitality and interest to the livestream and engaging viewers. These barrages can be placed in the corresponding Canvas layer, where they are strategically arranged based on parameters like movement speed and direction, ensuring smooth viewing without collision or overlap. Special effect barrages feature special visual effects or animations, expressing strong emotions or engaging viewers with special events, such as raffle-style barrages. Once assigned to the data queue of the corresponding Canvas layer, the layer can optimize rendering based on their specific characteristics, delivering a stunning visual experience for viewers.

[0067] Furthermore, the Canvas objects at each level involved in this application accurately control their front and back hierarchical relationships by adopting transparent background design, layered drawing techniques and reasonable z-index values, thereby realizing the effective synthesis of multi-level canvas content. Specifically, this application can set a corresponding number of Canvas canvases according to the number of categories of barrage objects, and these canvases are all set to the same size specifications to ensure visual consistency and coordination. Then, this application can use the z-index attribute in CSS to set the hierarchical relationship of these Canvas canvases, so that each canvas layer can be stacked and displayed in a predetermined order. In addition, in order to ensure that each Canvas layer can be rendered independently and efficiently, this application can allocate an independent rendering context for each layer. During the initialization stage, this application can also configure the data buffer of each Canvas layer and bind corresponding event listeners to it, so that it can respond to various user operations and system events in a timely manner during subsequent use, thereby improving the overall application performance and user experience.

[0068] S120: When updating the live screen in the target live broadcast room frame by frame, the barrage objects in the data queue of each Canvas layer are extracted respectively according to the preset barrage refresh strategy, and the extracted barrage objects are drawn to the corresponding Canvas layer. Then, the drawn barrage objects are merged with the corresponding video frames according to the hierarchical relationship and displayed in the target live broadcast room.

[0069] In this step, real-time barrage data is obtained through S110, and a barrage object corresponding to the real-time barrage data is constructed, and the barrage object is placed in the data queue of the Canvas layer corresponding to the category of the barrage object. Then, when updating the live screen in the target live broadcast room frame by frame, the present application can extract the barrage objects in the data queue of each Canvas layer according to the preset barrage refresh strategy, and then draw the extracted barrage objects to the corresponding Canvas layer, and then merge the drawn barrage objects with the corresponding video frames according to the previously set hierarchical relationship and display them in the target live broadcast room.

[0070] Specifically, when the live screen in the target live broadcast room is updated frame by frame, the present application can accurately extract the corresponding barrage objects one by one from the data queue of each Canvas layer according to the pre-set barrage refresh strategy. This operation is controlled by a sophisticated algorithm to ensure that the display order and refresh frequency of the barrage strictly follow the preset rules, thereby realizing the function of efficiently and accurately screening out the required barrage objects from multiple data layers. Among them, the barrage refresh strategy of the present application includes but is not limited to the static barrage refresh interval, the display fineness of the special effect barrage, and whether to enable the local redrawing strategy. In addition, the present application can also adjust the barrage refresh strategy according to the real-time performance of the system, such as extending the static barrage refresh interval, reducing the special effect fineness or enabling the local redrawing strategy, etc. The specific settings can be made according to the actual situation and are not limited here.

[0071] Then, this application can also render the barrage objects extracted from the data queue of each Canvas layer one by one carefully onto their respective designated Canvas layers. This rendering process requires not only precision, but also ensures that the layout and display effect of each barrage object on the Canvas layer meet expectations. After the rendering work is completed, this application can strictly follow the previously configured hierarchical relationship to perform orderly and efficient fusion processing of all rendered barrage objects with the corresponding video frames. This fusion process must not only ensure that the position of each barrage object in the video frame is accurate, but also ensure that the hierarchical relationship between them is clear and discernible. Finally, this application can transmit the fused complete picture in real time and display it in the target live broadcast room, ensuring that the audience can enjoy a smooth and layered visual experience when watching the live broadcast, thereby enhancing the audience's viewing experience and the overall viewing experience of the live broadcast.

[0072] In the above embodiment, during the live broadcast of the target live broadcast room, real-time barrage data can be obtained first. After obtaining these real-time barrage data, the system can construct barrage objects corresponding to these real-time barrage data. In this way, the real-time barrage data can be quickly and efficiently filtered, sorted, and classified and scheduled to ensure that the barrage can be displayed in the target live broadcast room in a smooth manner with low latency. Next, the present application can put these constructed barrage objects into the data queue of the corresponding Canvas layer according to their categories, wherein each barrage category corresponds to an independent Canvas layer, and corresponding hierarchical relationships are set between different Canvas layers, and each Canvas layer is assigned an independent rendering context, which can effectively share the overall drawing task, thereby significantly improving the overall refresh efficiency. When updating the live broadcast screen in the target live broadcast room frame by frame, the present application can extract the corresponding barrage objects from the data queue of each Canvas layer according to the preset barrage refresh strategy. After extracting these barrage objects, the present application can draw them onto their respective corresponding Canvas layers. After the drawing is completed, the drawn barrage object is merged with the corresponding video frame according to the previously set hierarchical relationship, and the merged image is finally displayed in the target live broadcast room. Through this hierarchical management and frame-by-frame update method, this application not only ensures the smoothness and real-time performance of the barrage display, but also greatly improves the overall rendering effect of the live broadcast screen.

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

[0074] S111: Preprocessing the real-time bullet screen data.

[0075] S112: Constructing a standardized barrage object based on the preprocessed real-time barrage data.

[0076] In this embodiment, when constructing a barrage object corresponding to real-time barrage data, the present application can first perform a preprocessing operation. The preprocessing operation covers multiple processing steps. Specifically, the preprocessing operation not only includes filtering the data to eliminate invalid or redundant information, thereby ensuring the purity and efficiency of the data set; it also includes format conversion operations on the data, the purpose of which is to uniformly convert data from different sources or formats into standardized expressions for the convenience and consistency of subsequent processing; in addition, the preprocessing operation also involves a processing link for prioritizing data. The present application can use a pre-configured sorting algorithm to give priority to displaying barrage information with higher importance in the barrage data, and delay the display of barrage information with lower importance, thereby improving user experience and information transmission efficiency.

[0077] After preprocessing, the application enters the stage of constructing standardized barrage objects. At this stage, the application can construct standardized barrage objects one by one based on the preprocessed real-time barrage data. These barrage objects not only contain the basic text content of the barrage, but also cover additional information such as font style, color configuration, dynamic effects, etc., to ensure that the barrage displayed in the target live broadcast room not only accurately conveys the audience's information, but also has a good visual effect.

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

[0079] S113: Determine a category of the barrage object according to barrage features of the barrage object, wherein the categories of the barrage object include static barrage, dynamic barrage, and special effect barrage. The canvas layer corresponding to the static barrage is the static barrage layer, the canvas layer corresponding to the dynamic barrage is the dynamic barrage layer, and the canvas layer corresponding to the special effect barrage is the special effect barrage layer.

[0080] S114: If the category of the barrage object is static barrage, the barrage object is placed in the data queue of the static barrage layer.

[0081] S115: If the category of the barrage object is dynamic barrage, the barrage object is placed in the data queue of the dynamic barrage layer.

[0082] S116: If the category of the barrage object is special effect barrage, the barrage object is placed in the data queue of the special effect barrage layer.

[0083] In the embodiment itself, when classifying the barrage objects into the data queue of the corresponding Canvas layer, the present application can ensure that the barrage objects can be accurately assigned to the category to which they belong through feature recognition and classification operations. Specifically, the present application can determine the category of the barrage object based on the barrage features of the barrage object, such as text content, font style, color configuration, dynamic effects, and whether it has special visual effects. These categories include but are not limited to static barrage, dynamic barrage, and special effect barrage.

[0084] After determining the category of the barrage object, this application can put the barrage object into the Canvas layer data queue of the corresponding category. For example, static barrages are usually some simple text comments without any dynamic effects, just like fixed text logos on the live broadcast screen. They remain stationary throughout the live broadcast process and do not change position with time or other factors. For this type of static barrage, this application can classify it into the static barrage layer. In the static barrage layer, all static barrages are neatly arranged and do not interfere with each other, allowing the audience to clearly see the content of each static barrage, ensuring the simplicity and accuracy of information display.

[0085] Dynamic barrage refers to those barrages whose position changes over time or under specific conditions. This type of barrage may be text with moving effects, such as sliding from one side of the screen to the other, or jumping, flashing, etc. according to the interactive rules of the live broadcast room. The existence of dynamic barrage adds more vitality and fun to the live broadcast room, which can attract the attention of the audience. When encountering this type of dynamic barrage, this application can put it into the dynamic barrage layer. In the dynamic barrage layer, a reasonable layout can be made according to the parameters such as the moving speed and direction of the barrage to ensure that there is no collision or overlap between the dynamic barrages, so that the audience can watch the display of the dynamic barrage smoothly.

[0086] Special effects barrages, which feature special visual effects or animations, are assigned to the special effects barrage layer. These are typically carefully designed barrages, perhaps featuring vibrant colors, exaggerated animations, or unique sound effects. They are often sent to express strong emotions or to encourage viewers to participate in special events within the livestream. For example, during a livestreamer's lucky draw, barrages with special effects from viewers would qualify as special effects barrages. Within the special effects barrage layer, rendering is optimized specifically for these special effects, ensuring they are perfectly displayed and delivering a stunning visual experience.

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

[0088] In one embodiment, drawing the extracted bullet chat object to the corresponding Canvas layer in S120 may include:

[0089] S121: For each Canvas layer: determine whether there is a pre-rendered barrage in the extracted barrage object, where the pre-rendered barrage refers to a reusable barrage object drawn in advance in an off-screen Canvas. Each Canvas layer corresponds to an off-screen Canvas.

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

[0091] S123: If it does not exist, directly draw the extracted bullet chat object to the Canvas layer.

[0092] In this embodiment, when drawing the extracted barrage objects to the corresponding Canvas layer, in order to improve rendering efficiency and reduce repeated drawing work, this application introduces the concept of pre-rendered barrage. Pre-rendered barrage refers to reusable barrage objects that are drawn in advance in an off-screen Canvas, such as barrage objects that do not change frequently, or barrage objects in fixed positions. The 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] Schematically, as Figure 2 As shown, Figure 2 A schematic diagram of the process of drawing using pre-rendered bullet screens provided in an embodiment of the present application; Figure 2 In the example above, for each Canvas layer, the application can first check whether there are pre-rendered bullet comments in the extracted bullet comment object. If there are pre-rendered bullet comments, the application can transfer these pre-rendered bullet comments from the corresponding off-screen Canvas to the Canvas layer, so that there is no need to perform the drawing operation again, thus saving drawing time. At the same time, for other bullet comment objects in the Canvas layer except the pre-rendered bullet comments, the application can perform normal drawing operations.

[0094] If there are no pre-rendered bullet comments in the extracted bullet comments, the application can directly draw these bullet comments into the corresponding Canvas layer. This drawing process can be based on the properties of the bullet comments, such as position, size, color, dynamic effects, etc., to perform detailed drawing operations to ensure that the bullet comments on the Canvas layer display the expected effect.

[0095] Through 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 audience's viewing experience. At the same time, since pre-rendered bullet comments can be reused in multiple live broadcast rooms, it also greatly reduces system resource consumption.

[0096] In one embodiment, for each Canvas layer, drawing the extracted bullet chat object to the Canvas layer in S120 may include:

[0097] S124: After comparing the bullet chat object drawn last time on the Canvas layer with the bullet chat 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 chat 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 to 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, if Figure 3 As shown, Figure 3 A schematic diagram of the process of drawing the extracted bullet chat object to the Canvas layer using a local update strategy provided in an embodiment of the present application; Figure 3 In the process, the application can first compare the barrage object drawn last time on the current Canvas layer with the barrage object extracted this time. This comparison process covers multiple aspects such as the position, size, shape, and dynamic effects of the barrage object to ensure that the target area that needs to be updated can be accurately identified. Through comparison, the application can determine which barrage objects have changed, which are newly appeared barrage objects, and which barrage objects no longer need to be displayed.

[0101] After determining the target area that needs 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 barrage objects in the target area will not interfere with the display of the new barrage objects. After the clearing is completed, this application can draw the target object to be drawn in the cleared target area. The drawing process can perform fine operations based on the properties of the barrage object to ensure that the display effect of the barrage object on the Canvas layer is both accurate and smooth.

[0102] By using the above-mentioned local update strategy, this application not only improves the efficiency of bullet screen drawing, but also reduces the number of full-screen refreshes, thereby further improving the audience's viewing experience. At the same time, since only the areas that need to be updated are operated, the system's resource consumption and energy consumption are greatly reduced.

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

[0104] When it is detected that the target live broadcast room meets the preset accelerated synthesis conditions, drawing the extracted bullet chat object to the corresponding Canvas layer in S120 may include:

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

[0106] S127: Drawing the extracted bullet chat objects of the static bullet chat layer to the static bullet chat layer, and drawing the extracted bullet chat objects of the dynamic bullet chat layer to the dynamic bullet chat layer.

[0107] In this embodiment, when the target live broadcast room meets the preset accelerated synthesis conditions, in order to improve the rendering quality and efficiency of the special effect barrage, the present application can also adopt an accelerated synthesis strategy. Among them, the accelerated synthesis conditions preset by this application include but are not limited to high-concurrency barrage input, the system reaches a performance bottleneck, the live broadcast screen has obvious delays or frame drops, and the user turns on high-quality mode. It is understandable that when the number of barrages reaches a certain threshold or the system reaches a performance bottleneck, simply rendering one by one will cause obvious jams, and when the live broadcast screen has obvious delays or frame drops, the user experience is significantly reduced. At this time, the present application starts the accelerated synthesis strategy to ensure the smoothness of the live broadcast screen and improve the user experience.

[0108] Specifically, if the browser supports WebGL technology, this application can use the WebGL hybrid rendering mode to render the bullet screen objects of the special effects bullet screen layer. WebGL is a JavaScript API that implements three-dimensional graphics and rendering in the browser. It allows web pages to use the underlying graphics hardware acceleration to perform 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 sophisticated rendering processing on the special effects bullet screen, allowing viewers to see more gorgeous and realistic special effects bullet screen effects in the live broadcast room.

[0109] In addition to special processing for special-effect bullet screens, this application also draws bullet screen objects from the static bullet screen layer to the static bullet screen layer, and from the dynamic bullet screen layer to the dynamic bullet screen layer, according to the normal rendering process. This process can be combined with the above-mentioned pre-rendering bullet screen strategy and local update strategy. In this way, whether it is a simple static bullet screen, a bullet screen with dynamic effects, or even a special-effect bullet screen, it can be rendered efficiently and accurately, allowing viewers to get 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 broadcast room barrages, but also greatly improves the audience's viewing experience.

[0111] In one embodiment, Figure 4 As shown, Figure 4A schematic diagram of a process for drawing extracted bullet chat objects onto a Canvas layer using grid division and anti-collision strategies provided in an embodiment of the present application; for each Canvas layer, drawing the extracted bullet chat objects onto the Canvas layer in S120 may include:

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

[0113] S129: When any bullet chat object is extracted, the target grid unit covered by the bullet chat object is determined, and it is detected whether the bullet chat object overlaps with the bullet chat objects in the target bullet chat list maintained by the target grid unit.

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

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

[0116] In this embodiment, when drawing the extracted bullet chat objects to each Canvas layer, in order to avoid collisions and overlaps between bullet chat objects, the present application can also adopt a grid division and anti-collision strategy. This strategy first logically divides the canvas of the Canvas layer into multiple grid units, and each grid unit is responsible for maintaining a bullet chat list for recording all the bullet chat objects currently located in the grid unit.

[0117] Specifically, if Figure 4 As shown, when a new barrage object is extracted, the application can first determine the position of the barrage object on the Canvas layer and calculate the target grid unit it covers. Then, the application can check whether there are other barrage objects in the barrage list maintained by the target grid unit, and whether these barrage objects overlap with the new barrage object. This detection process can be based on information such as the position, size, and shape of the barrage object, and use the collision detection formula to determine whether there is barrage overlap to ensure that potential collisions can be accurately identified.

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

[0119] If no overlap is detected, the application directly draws the new bullet chat object onto the Canvas layer and registers it in the bullet chat list of the target grid unit. This drawing process can be fine-tuned based on the properties of the bullet chat object to ensure that its display effect on the Canvas layer meets the expected results.

[0120] Through the above-mentioned 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 drawing. At the same time, since each grid unit is only responsible for maintaining the bullet screen objects within it, it also greatly reduces the resource consumption and complexity of the system. This allows viewers to enjoy a clearer, neater and more interesting bullet screen interactive experience in the live broadcast room.

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

[0122] S211: Collect the barrage density of the target live broadcast room in real time.

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

[0124] S213: Determine the preset position of the bullet screen object according to the adjusted moving speed.

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

[0126] After obtaining the barrage density, this application can adjust the moving speed of the barrage object according to the density and the speed coefficient corresponding to the barrage object category. The speed coefficient here is a pre-set coefficient related to the category of the barrage object (such as static barrage, dynamic barrage or special effect barrage), which is used to reflect the difference in moving speed of different categories of barrage. By combining the barrage density and speed coefficient, this application can dynamically adjust the moving speed of the barrage object to adapt to the barrage display requirements in different live broadcast room environments.

[0127] For example, when calculating the density of the barrage in the current live broadcast room, this application can count the number of currently active barrages and adjust the basic speed according to the number of barrages. For example, if the number of active barrages is lower than the low-density threshold, the basic speed is set to the maximum speed; if the number of active barrages is between the low-density and high-density thresholds, the basic speed is dynamically adjusted according to the number of barrages; when the number of active barrages reaches or exceeds the high-density threshold, the basic speed will be set to the minimum speed. Then, for each barrage, this application can determine the corresponding speed coefficient based on its category, and multiply the basic speed by the speed coefficient to calculate the final moving speed of each barrage. In each frame, this application can update the barrage position in real time according to the calculated moving speed to ensure that the barrage can move smoothly at the preset speed.

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

[0129] In one embodiment, in S120, merging the drawn bullet screen object with the corresponding video frame according to the hierarchical relationship and displaying it in the target live broadcast room may include:

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

[0131] S1213: Mixing the WebGL texture with the bullet screen object rendered by the special effect bullet screen layer to form a multi-layer texture.

[0132] S1214: Synthesize the multiple layers of texture according to a preset synthesis rule and display them in the target live broadcast room.

[0133] In this embodiment, when the drawn barrage object is merged with the corresponding video frame and displayed in the target live broadcast room, the present application can also adopt an efficient synthesis strategy. Specifically, the present application can first convert the barrage objects drawn by the static barrage layer and the dynamic barrage layer, as well as the drawn corresponding video frames into WebGL textures. WebGL texture is an object used to store image data in the WebGL context. By converting video frames and barrage objects into textures, the present application can make full use of the hardware acceleration capabilities of the graphics card and improve synthesis efficiency.

[0134] Next, the application can mix the WebGL texture with the bullet screen object rendered by the special effects bullet screen layer to form a multi-layer texture. This process ensures that the special effects bullet screen, static bullet screen, dynamic bullet screen, and video frames can be superimposed and displayed according to the expected hierarchical relationship.

[0135] Finally, this application can synthesize multiple layers of textures according to preset synthesis rules and display the synthesized results in the target live broadcast room. The preset synthesis rules include but are not limited to transparency synthesis, color mixing, motion trajectory smoothing, etc., to ensure that the different levels of bullet screen objects and video frames can be seamlessly integrated to provide 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 room barrage and video frames, but also further enhances the audience's viewing experience.

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

[0138] S130: collecting performance indicators of the system in real time, and determining the current computing load and the current frame rate according to the performance indicators.

[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, 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, ensure that the target live broadcast room is in full HD display mode.

[0141] In this embodiment,

[0142] To ensure the stability and efficiency of bullet screen rendering in the live broadcast room, this application can also monitor the system's performance indicators in real time and dynamically adjust the bullet screen refresh strategy based on these indicators. Specifically, this application can collect performance indicators such as the current system's frame rate, processing delay, CPU and GPU usage in real time. These indicators can reflect the system's operating status and performance.

[0143] After obtaining the current system's performance indicators such as frame rate, processing delay, CPU and GPU usage, this application can determine the system's current computing load and current frame rate based on these performance indicators, and evaluate them to determine whether the system is currently in an overloaded or performance bottleneck state. If the current computing load is higher than the preset load threshold, and the current frame rate is lower than the preset frame rate threshold, this means that the system may be facing performance pressure and cannot maintain smooth barrage rendering and video playback. At this time, this application can adjust the barrage refresh strategy to reduce the system's computing burden and improve rendering efficiency. The adjustment strategy may include but is not limited to reducing the update frequency of static barrages, reducing the rendering quality or quantity of special effect barrages, and optimizing the rendering process of barrage objects.

[0144] On the contrary, 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, 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 broadcast room is in full HD display mode to provide the best viewing experience. Full HD display mode means that both video frames and bullet screen objects will be rendered and displayed in high resolution, allowing viewers to have a clearer, more detailed and realistic viewing experience in the live broadcast room.

[0145] The live broadcast room barrage rendering device provided in an embodiment of the present application is described below. The live broadcast room barrage rendering device described below and the live broadcast room barrage rendering method described above can be referenced to each other.

[0146] In one embodiment, Figure 5 As shown, Figure 5 This is a structural diagram of a live broadcast room bullet screen rendering device provided by an embodiment of the present application; the present application also provides a live broadcast room bullet screen rendering device, which may include a bullet screen acquisition module 210 and a bullet screen rendering module 220:

[0147] The barrage acquisition module 210 is used to obtain real-time barrage data during the live broadcast of the target live broadcast room, and after constructing a barrage object corresponding to the real-time barrage data, put the barrage object into the data queue of the Canvas layer corresponding to the category of the barrage object, wherein each category corresponds to a Canvas layer, and there is a corresponding hierarchical relationship between each Canvas layer, and each Canvas layer is allocated an independent rendering context.

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

[0149] In the above embodiment, during the live broadcast of the target live broadcast room, real-time barrage data can be obtained first. After obtaining these real-time barrage data, the system can construct barrage objects corresponding to these real-time barrage data. In this way, the real-time barrage data can be quickly and efficiently filtered, sorted, and classified and scheduled to ensure that the barrage can be displayed in the target live broadcast room in a smooth manner with low latency. Next, the present application can put these constructed barrage objects into the data queue of the corresponding Canvas layer according to their categories, wherein each barrage category corresponds to an independent Canvas layer, and corresponding hierarchical relationships are set between different Canvas layers, and each Canvas layer is assigned an independent rendering context, which can effectively share the overall drawing task, thereby significantly improving the overall refresh efficiency. When updating the live broadcast screen in the target live broadcast room frame by frame, the present application can extract the corresponding barrage objects from the data queue of each Canvas layer according to the preset barrage refresh strategy. After extracting these barrage objects, the present application can draw them onto their respective corresponding Canvas layers. After the drawing is completed, the drawn barrage object is merged with the corresponding video frame according to the previously set hierarchical relationship, and the merged image is finally displayed in the target live broadcast room. Through this hierarchical management and frame-by-frame update method, this application not only ensures the smoothness and real-time performance of the barrage display, but also greatly improves the overall rendering effect of the live broadcast screen.

[0150] In one embodiment, the present application also provides a computer-readable storage medium, which stores computer-readable instructions. When the computer-readable instructions are executed by one or more processors, the one or more processors execute the steps of the live broadcast room barrage rendering method as described in any of the above embodiments.

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

[0152] The memory stores computer-readable instructions, and when the computer-readable instructions are executed by the one or more processors, the steps of the live broadcast room bullet screen rendering method as described in any one of the above embodiments are performed.

[0153] Schematically, as Figure 6 As shown, Figure 6 This is a schematic diagram of the internal structure of a computer device provided in an embodiment of the present application. The computer device 300 can be provided as a server. Figure 6 Computer device 300 includes a processing component 302, which further includes one or more processors, and a memory resource represented by memory 301 for storing instructions executable by processing component 302, such as an application. The application stored in memory 301 may include one or more modules, each corresponding to a set of instructions. In addition, processing component 302 is configured to execute instructions to perform the live broadcast room bullet screen rendering method of any of the above-mentioned embodiments.

[0154] The computer device 300 may further 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 based on an operating system stored in the memory 301, such as Windows Server™, Mac OS X™, Unix™, Linux™, Free BSD™, or the like.

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

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

[0157] The various embodiments in this specification are described in a progressive manner, and 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 referenced to each other.

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

Claims

1. A method for rendering bullet screen in a live broadcast room, characterized in that: The method comprises: During the live broadcast of the target live broadcast room, real-time bullet chat data is obtained, and a bullet chat object corresponding to the real-time bullet chat data is constructed. The bullet chat object is then placed in the data queue of the Canvas layer corresponding to the category of the bullet chat object. Each category corresponds to a Canvas layer, and a corresponding hierarchical relationship is set between each Canvas layer, and each Canvas layer is allocated an independent rendering context; When the live broadcast screen in the target live broadcast room is updated frame by frame, the barrage objects in the data queue of each Canvas layer are extracted respectively according to the preset barrage refresh strategy, and the extracted barrage objects are drawn to the corresponding Canvas layer. Then, the drawn barrage objects are merged with the corresponding video frames according to the hierarchical relationship and displayed in the target live broadcast room.

2. The live broadcast room bullet screen rendering method according to claim 1, characterized in that: The constructing of a bullet screen object corresponding to the real-time bullet screen data includes: Performing preprocessing operations on the real-time barrage data; Build a standardized barrage object based on the preprocessed real-time barrage data.

3. The live broadcast room bullet screen rendering method according to claim 1, characterized in that: The step of placing the bullet screen object into a data queue of a Canvas layer corresponding to the category of the bullet screen object comprises: Determining the category of the barrage object according to the barrage features of the barrage object, wherein the categories of the barrage object include static barrage, dynamic barrage, and special effect barrage. The Canvas layer corresponding to the static barrage is the static barrage layer, the Canvas layer corresponding to the dynamic barrage is the dynamic barrage layer, and the Canvas layer corresponding to the special effect barrage is the special effect barrage layer; If the category of the barrage object is static barrage, the barrage object is placed in the data queue of the static barrage layer; If the category of the barrage object is dynamic barrage, the barrage object is placed in the data queue of the dynamic barrage layer; If the category of the barrage object is special effect barrage, the barrage object is placed in the data queue of the special effect barrage layer.

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

5. The live broadcast room bullet screen rendering method according to claim 1, characterized in that: For each Canvas layer, drawing the extracted bullet chat object to the Canvas layer includes: After comparing the last drawn bullet chat object of the Canvas layer with the currently extracted bullet chat object, determine the target area that needs to be updated in the Canvas layer and the target object to be drawn in the currently extracted bullet chat object; The content of the target area in the Canvas layer is cleared, and the target object is drawn in the cleared target area.

6. The live broadcast room bullet screen rendering method according to claim 1, characterized in that: The Canvas layer includes a static bullet screen layer, a dynamic bullet screen layer and a special effect bullet screen layer; When it is detected that the target live broadcast room meets the preset accelerated synthesis condition, the extracted bullet screen object is drawn to the corresponding Canvas layer, including: If supported by the browser, use the WebGL hybrid rendering mode to render the extracted bullet screen objects of the special effect bullet screen layer; The extracted bullet chat objects of the static bullet chat layer are drawn to the static bullet chat layer, and the extracted bullet chat objects of the dynamic bullet chat layer are drawn to the dynamic bullet chat layer.

7. The live broadcast room bullet screen rendering method according to any one of claims 1 to 6, characterized in that: For each Canvas layer, drawing the extracted bullet chat object to the Canvas layer includes: The canvas of the Canvas layer is divided into multiple grid units, and each grid unit maintains a bullet comment list; When any bullet chat object is extracted, the target grid unit covered by the bullet chat object is determined, and whether the bullet chat object overlaps with the bullet chat objects in the target bullet chat list maintained by the target grid unit is detected; If there is overlap, adjust the preset position of the bullet chat object, draw the bullet chat object to the Canvas layer according to the adjusted preset position, and register the adjusted preset position to the corresponding grid unit; If there is no overlap, the bullet screen object is drawn to the Canvas layer according to the preset position of the bullet screen object, and the preset position is registered to the target grid unit.

8. The live broadcast room bullet screen rendering method according to claim 7, characterized in that: Determining the preset position of the barrage object includes: Collect the barrage density of the target live broadcast room in real time; Adjusting the moving speed of the barrage object according to the barrage density and a speed coefficient corresponding to the category of the barrage object; The preset position of the bullet screen object is determined according to the adjusted moving speed.

9. The method for rendering bullet screen in a live broadcast room according to claim 6, characterized in that: The step of merging the drawn bullet screen object with the corresponding video frame according to the hierarchical relationship and displaying the result in the target live broadcast room includes: Convert the bullet screen objects drawn in the static bullet screen layer and the dynamic bullet screen layer, and the corresponding drawn video frames into WebGL textures; Mixing the WebGL texture with the bullet screen object rendered by the special effect bullet screen layer to form a multi-layer texture; The multi-layer textures are synthesized according to preset synthesis rules and displayed in the target live broadcast room.

10. The live broadcast room bullet screen rendering method according to any one of claims 1-6, 8-9, characterized in that: The method further comprises: Collecting performance indicators of the system in real time, and determining the current computing load and current frame rate based on the performance indicators; 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, adjusting the bullet screen refresh strategy; 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, ensure that the target live broadcast room is in full HD display mode.

11. A live broadcast room bullet screen rendering device, characterized in that: include: The barrage acquisition module is used to obtain real-time barrage data during the live broadcast of the target live broadcast room, construct a barrage object corresponding to the real-time barrage data, and then place the barrage object into the data queue of the Canvas layer corresponding to the category of the barrage object. Each category corresponds to a Canvas layer, and there is a corresponding hierarchical relationship between the various Canvas layers, and each Canvas layer is allocated an independent rendering context; The barrage rendering module is used to extract the barrage objects in the data queue of each Canvas layer according to the preset barrage refresh strategy when updating the live screen in the target live broadcast room frame by frame, and after drawing the extracted barrage objects to the corresponding Canvas layer, the drawn barrage objects are merged with the corresponding video frames according to the hierarchical relationship and displayed in the target live broadcast room.

12. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by one or more processors, the one or more processors execute the steps of the live broadcast room barrage rendering method as described in any one of claims 1 to 10.

13. A computer device, characterized in that: include: one or more processors, and memory; The memory stores computer-readable instructions, and when the computer-readable instructions are executed by the one or more processors, the steps of the live broadcast room bullet screen rendering method as described in any one of claims 1 to 10 are performed.

Images