WO2018086282A1 - 前端弹幕控制方法及装置 - Google Patents

前端弹幕控制方法及装置 Download PDF

Info

Publication number
WO2018086282A1
WO2018086282A1 PCT/CN2017/075727 CN2017075727W WO2018086282A1 WO 2018086282 A1 WO2018086282 A1 WO 2018086282A1 CN 2017075727 W CN2017075727 W CN 2017075727W WO 2018086282 A1 WO2018086282 A1 WO 2018086282A1
Authority
WO
WIPO (PCT)
Prior art keywords
barrage
hypertext
pool
code
push
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Ceased
Application number
PCT/CN2017/075727
Other languages
English (en)
French (fr)
Inventor
杜伟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Wuhan Douyu Network Technology Co Ltd
Original Assignee
Wuhan Douyu Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Wuhan Douyu Network Technology Co Ltd filed Critical Wuhan Douyu Network Technology Co Ltd
Publication of WO2018086282A1 publication Critical patent/WO2018086282A1/zh
Anticipated expiration legal-status Critical
Ceased legal-status Critical Current

Links

Images

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/475—End-user interface for inputting end-user data, e.g. personal identification number [PIN], preference data
    • H04N21/4756—End-user interface for inputting end-user data, e.g. personal identification number [PIN], preference data for rating content, e.g. scoring a recommended movie
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/435—Processing of additional data, e.g. decrypting of additional data, reconstructing software from modules extracted from the transport stream
    • H04N21/4355—Processing of additional data, e.g. decrypting of additional data, reconstructing software from modules extracted from the transport stream involving reformatting operations of additional data, e.g. HTML pages on a television screen
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/45—Management operations performed by the client for facilitating the reception of or the interaction with the content or administrating data related to the end-user or to the client device itself, e.g. learning user preferences for recommending movies, resolving scheduling conflicts
    • H04N21/462—Content or additional data management e.g. creating a master electronic programme guide from data received from the Internet and a Head-end or controlling the complexity of a video stream by scaling the resolution or bit-rate based on the client capabilities
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/478—Supplemental services, e.g. displaying phone caller identification, shopping application
    • H04N21/4782—Web browsing, e.g. WebTV
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/478—Supplemental services, e.g. displaying phone caller identification, shopping application
    • H04N21/4788—Supplemental services, e.g. displaying phone caller identification, shopping application communicating with other users, e.g. chatting

Definitions

  • the present invention relates to the field of Internet technologies, and in particular, to a front end barrage control method and apparatus.
  • the barrage refers to a comment that appears directly on the video. It can appear on the video in a scroll, pause, or even more action special effect, which is a short comment on the transmission of the watch video.
  • the barrage video is a video with a barrage.
  • Many websites offer the function of sending video screens, such as video and video websites, live websites, and so on.
  • the efficiency of rendering the front-end barrage in the live broadcast room is generally poor, especially during the peak period of the user.
  • the massive barrage makes the user feel that the webpage is particularly stifling when watching the video, which affects the video playback effect. .
  • the present invention has been made in order to provide a front end barrage control method and apparatus that overcomes the above problems or at least partially solves the above problems.
  • a front-end barrage control method includes: a front-end receiving barrage data sent by a server, format converting the barrage data to obtain a hypertext code; and injecting the hypertext code into a preset In the barrage pool; a plurality of hypertext codes are selected from the barrage pool, and the plurality of hypertext codes are inserted into the barrage display area of the front end at one time.
  • the front end receives the barrage data sent by the server, and the method includes: the front end receives the barrage data sent by the server by using a socket; and the format conversion of the barrage data to obtain a hypertext code, including: parsing The barrage data obtains a JSON data object; according to the JSON data object, and combined with the website business type, the html code is converted.
  • the injecting the hypertext code into the preset barrage pool comprises: predefining the barrage pool as a one-dimensional array; storing the hypertext code into the one-dimensional array.
  • the method further includes: setting a push iterator, and inserting the plurality of hypertext codes into the barrage display area of the front end at one time by starting the push iterator.
  • the push iterator when the hypertext code is injected into a preset barrage pool, the push iterator is activated; and/or, the barrage pool is polled, and it is determined whether the barrage pool exists
  • the predetermined number of super a text code if any, initiating the push iterator to insert the preset number of hypertext codes into the barrage display area of the front end, if not, inserting all hypertext code in the barrage pool once Go to the front of the barrage display area and stop polling.
  • a front-end barrage control apparatus includes: a receiving unit configured to receive barrage data sent by a server; and a conversion unit configured to perform format conversion on the barrage data to obtain a hypertext code; a buffer unit, configured to inject the hypertext code into a preset barrage pool; and a control unit, configured to select a plurality of hypertext codes from the barrage pool, and the plurality of hypertext codes are once The barrage display area that is inserted into the front end.
  • the receiving unit is configured to: receive the barrage data sent by the server by using a socket; the converting unit is specifically configured to: parse the barrage data to obtain a JSON data object; and according to the JSON data object And combined with the website business type, converted to get the html code.
  • the buffer unit is specifically configured to: define a bar code pool as a one-dimensional array; and store the hypertext code into the one-dimensional array.
  • the apparatus further comprises: a push iteration unit, configured to set a push iterator, and insert the plurality of hypertext codes into the barrage display area of the front end at one time by starting the push iterator.
  • a push iteration unit configured to set a push iterator, and insert the plurality of hypertext codes into the barrage display area of the front end at one time by starting the push iterator.
  • the buffer unit injects the hypertext code into a preset barrage pool
  • the push iterator is started; and/or, the barrage pool is polled, and the barrage is judged Whether there is a predetermined number of hypertext codes in the pool, and if so, launching the push iterator, thereby inserting the preset number of hypertext codes into the barrage display area of the front end at one time, and if not, the barrage pool All hypertext code in the middle is inserted into the front-end barrage display area once and polling is stopped.
  • the JavaScript on which the barrage data is based is a single-threaded language in the browser, the change of the DOM structure is very costly.
  • the html code is generally inserted one by one into the barrage display. In the area, and complete the view rendering, each time the bar code html code is inserted in the barrage display area will trigger a DOM redraw. At the peak of the number of websites, the front end may receive thousands of bullets in 1 second. Curtain, this single-insertion method can greatly degrade browser performance and even cause browsers to jam and affect video viewing.
  • the barrage data is buffered and a plurality of barrage data are subsequently selected from the barrage pool for one-time display, for example, when the barrage data is of a large magnitude in a unit time Time (for example, there are 1000 barrage data in 200 milliseconds), the front end buffers the barrage data in a custom barrage pool, and then recursively renders the buffered barrage data at regular intervals (for example, 200 milliseconds), thereby You can avoid the browser performance overhead caused by inserting barrage data one by one.
  • a unit time Time for example, there are 1000 barrage data in 200 milliseconds
  • the real-time display of the barrage message class is realized, because the delay of 200 milliseconds is not perceived by the user, which reduces the pressure on the front end to render a large amount of data, and avoids directly rendering the browser's card and view. Frequency card problem.
  • FIG. 1 is a schematic view showing the architecture of a barrage implementation system according to the present invention.
  • FIG. 2 is a flow chart showing a front end barrage control method according to the present invention.
  • FIG. 3 is a schematic view showing an example of a front end barrage control method according to the present invention.
  • FIG. 4 is a schematic structural view of a barrage buffer module in an example of a front end barrage control method according to the present invention
  • Figure 5 is a block diagram showing the structure of a front end barrage control device in accordance with the present invention.
  • the barrage is one of its more important functions.
  • the real-time barrage system mainly includes three functional devices (roles): server: monitor client connection, barrage event, etc. and response; barrage sending front end (client): the user sends the barrage; the barrage receives the front end (customer End): Receive the bullet and display it.
  • server monitor client connection, barrage event, etc. and response
  • barrage sending front end client: the user sends the barrage
  • the barrage receives the front end (customer End): Receive the bullet and display it.
  • the implementation process of the barrage is: the user enters the live video room of the live broadcast website, and the front end establishes a long connection with the web server through the socket or the pipeline in the initialization process; the user inputs the barrage content in the barrage sending box and triggers the barrage sending frame.
  • Send function the barrage sending front end sends the barrage content in the barrage sending box to the website server through the socket or the pipe, the server will sort and group all the reported barrage, and then push the barrage through the socket or the pipe respectively.
  • the barrage receiving front end of each live broadcast room, the barrage receiving front end will passively receive the barrage and render in the barrage area of the webpage.
  • the embodiment of the invention provides a front-end barrage control method, which mainly performs display control of the barrage for the barrage receiving front end (the person skilled in the art understands that the barrage receiving front end and the barrage sending front end all refer to The client, a certain condition is to exchange roles).
  • FIG. 2 is a flowchart of a method for controlling a front end barrage according to the present invention, which mainly includes steps S201-S203.
  • S201 The front end receives the barrage data sent by the server, and performs format conversion on the barrage data to obtain a hypertext code.
  • the front end (ie, the aforementioned: the barrage receiving front end) can receive the barrage data pushed by the server through a socket or a pipe.
  • the two programs on the network exchange data through a two-way communication connection.
  • One end of the connection is called a socket.
  • Socket English original meaning is "hole” or “socket”, also commonly referred to as “socket”, used to describe the IP address and port, is a handle to the communication chain, can be used to implement different virtual machines or different computers Communication between.
  • Pipeline communication that is, the sending process sends a large amount of data into the pipeline in the form of a character stream, and the receiving process can receive data from the pipe, and the two communicate using the pipeline.
  • pipeline has its unique superiority, which is mainly because it does not depend entirely on a certain protocol, but applies to any protocol as long as communication can be realized.
  • the barrage data is generally a JSON string that includes the contents of the barrage text and the type of the barrage.
  • JSON JavaScript Object Notation
  • the front end first parses the barrage data (ie: JSON string) to get the JSON data object.
  • JSON is a general data format of JavaScript
  • the JSON string can be converted to a JSON data object using the JSON.parse function; Data objects, combined with the type of website business, are converted to html code.
  • S202 Inject the hypertext code into the preset barrage pool.
  • a one-dimensional array is pre-defined as a barrage pool, and the converted hypertext code is stored in the one-dimensional array each time the barrage data is received and the data conversion is completed.
  • S203 Select multiple hypertext codes from the barrage pool, and insert multiple hypertext codes into the barrage display area of the front end at one time.
  • a plurality of hypertext codes are inserted into the barrage display area of the front end at one time.
  • the launch conditions of the push iterator include a variety of, for example, triggering initiation of the push iterator when the hypertext code is injected into a preset barrage pool.
  • the number of hypertext codes if any, initiates a push iterator to insert a preset number of hypertext codes into the front-end barrage display area, if not, insert all hypertext code from the barrage pool into the bar at once
  • the front of the barrage displays the area and stops polling.
  • the JavaScript based on the data of the barrage is a single-threaded language in the browser, the change of the DOM (Document Object Model) structure will be very costly.
  • the html is generally adopted.
  • the code is inserted into the barrage display area one by one, and the view rendering is completed.
  • a DOM redraw is triggered.
  • the front end may be 1 Received thousands of barrage in seconds, this single insertion method will greatly consume browser performance, and even cause the browser to jam, affecting video viewing.
  • the barrage data is buffered and a plurality of barrage data are subsequently selected from the barrage pool for one-time display, for example, when the barrage data is of a large magnitude in a unit time Time (for example, there are 1000 barrage data in 200 milliseconds), the front end buffers the barrage data in a custom barrage pool, and then recursively renders the buffered barrage data at regular intervals (for example, 200 milliseconds), thereby You can avoid the browser performance overhead caused by inserting barrage data one by one.
  • a unit time Time for example, there are 1000 barrage data in 200 milliseconds
  • the real-time display of the barrage message class is realized, because the delay of 200 milliseconds is not perceived by the user, which reduces the pressure on the front end to render a large amount of data, and avoids directly rendering the browser's card and video jam. problem.
  • FIG. 3 shows that the web server 1 pushes the barrage data to the front end 3 through the network transmission channel 2 (for example, a socket).
  • the data conversion module 301 receives and completes the data conversion.
  • the front end script may be used as the js.
  • the code implements the data conversion module; the data conversion module 301 provides the converted html code to the barrage buffer module 302; after the push trigger module 302, the bar code buffer module 302 selects a plurality of html codes to be inserted into the barrage display area 303 at one time.
  • the server 1 pushes the barrage data to the front end 3 through the network transmission channel 2.
  • the data conversion module 301 is responsible for receiving and converting the barrographic data into html code.
  • the barrage data is a JSON string, such as:
  • the data conversion module 301 parses the JSON string to become a barrage JSON data object.
  • JSON is a common data format for JavaScript, so you can use the JSON.parse function to convert a JSON string to a JSON data object.
  • the data conversion module 301 in combination with the business type of the website itself, converts the barrage JSON data object into the following html code:
  • the data conversion module 301 provides the converted html code to the barrage buffer module 302.
  • the barrage buffer module 302 selects a plurality of html codes to be inserted into the barrage display module field 303.
  • FIG. 4 there is shown a schematic structural view of a barrage buffer module 302 in an example of a front end barrage control method in accordance with the present invention.
  • the barrage buffer module 302 further includes a barrage pool 3021 and a push iterator 3022. After receiving the html code from the data conversion module 301, it is added to the barrage pool 3021; and a certain number of html codes are selected from the barrage pool 3021 to be inserted into the barrage display area 303 by the push iterator 3022.
  • the working process of the barrage pool 3021 is: for example, when the data conversion module 301 generates a new barrage html code, the injection function (push function) is called, and the html code is added to the pool 3021.
  • Curtain pool 3021 is actually a one-dimensional array in JavaScript.
  • the barrage html code is added to the barrage pool.
  • the data structure can be as follows:
  • the working process of the push iterator 3022 is that each time the push function is called, the bubbling function (pop function) of the push iterator 3022 is triggered, and the following judgment is made:
  • pop will ignore the push of pop on pop
  • pop will execute the internal logic.
  • the pool can continuously add more barrage html code.
  • the present invention also provides a front end barrage control device.
  • a schematic structural view of the front end curtain control device of the present invention is shown.
  • the device includes:
  • the receiving unit 501 is configured to receive the barrage data sent by the server;
  • the converting unit 502 is configured to perform format conversion on the barrage data to obtain a hypertext code
  • a buffer unit 503, configured to inject the hypertext code into a preset barrage pool
  • the control unit 504 is configured to select a plurality of hypertext codes from the barrage pool, and insert the plurality of hypertext codes into the barrage display area of the front end at one time.
  • the receiving unit 501 is specifically configured to: receive the barrage data sent by the server by using a socket; the converting unit 502 is specifically configured to: parse the barrage data to obtain a JSON data object; according to the json Data objects, combined with the type of website business, are converted to html code.
  • the buffer unit 503 is specifically configured to: define a barrage pool as a one-dimensional array; and store the hypertext code into the one-dimensional array.
  • the device further comprises:
  • the push iteration unit 505 is configured to set a push iterator, and insert the plurality of hypertext codes into the barrage display area of the front end at one time by starting the push iterator.
  • the buffer unit 503 injects the hypertext code into a preset barrage pool, the push iterator is activated; and/or,
  • the various component embodiments of the present invention may be implemented in hardware, or in a software module running on one or more processors, or in a combination thereof.
  • a microprocessor or digital signal processor may be used in practice to implement some or all of the functionality of some or all of the components of the user morphing control system in accordance with embodiments of the present invention.
  • the invention can also be implemented as a device or device program (e.g., a computer program and a computer program product) for performing some or all of the methods described herein.
  • a program implementing the invention may be stored on a computer readable medium or may be in the form of one or more signals. Such signals may be downloaded from an Internet website, provided on a carrier signal, or provided in any other form.

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • General Engineering & Computer Science (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明公开了一种前端弹幕控制方法及装置，其中的方法包括：前端接收服务器发送的弹幕数据，对弹幕数据进行格式转换，得到超文本代码；将所述超文本代码注入到预置的弹幕池中；从所述弹幕池中选取多条超文本代码，将所述多条超文本代码一次性插入到前端的弹幕显示区域。本发明可减少前端逐条插入弹幕对浏览器造成的性能压力。

Description

前端弹幕控制方法及装置 技术领域
本发明涉及互联网技术领域，具体涉及一种前端弹幕控制方法及装置。
背景技术
随着网络通信技术的进步和宽带网络的提速，网络视频应用在各个行业得到了越来越广泛的发展。直观而生动的高清视频应用，可以极大拉近用户之间的距离，并达到最好的交流效果。
弹幕时互联网视频的一大特色。弹幕指直接显现在视频上的评论，可以以滚动、停留甚至更多动作特效方式出现在视频上，是观看视频的任发送的简短评论。弹幕视频，顾名思义，即带有弹幕的视频。很多网站提供视频发送弹幕的功能，例如，影视视频网站、直播网站，等等。
以直播网站弹幕为例，在直播间实现前端弹幕渲染的效率一般较差，特别是在用户高峰期，海量的弹幕使用户在观看视频时会感觉网页特别卡顿，影响视频播放效果。
发明内容
鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的前端弹幕控制方法及装置。
依据本发明的一个方面，提供一种前端弹幕控制方法，包括：前端接收服务器发送的弹幕数据，对弹幕数据进行格式转换，得到超文本代码；将所述超文本代码注入到预置的弹幕池中；从所述弹幕池中选取多条超文本代码，将所述多条超文本代码一次性插入到前端的弹幕显示区域。
优选的，所述前端接收服务器发送的弹幕数据，包括：所述前端通过套接字方式接收服务器发送的弹幕数据；所述对弹幕数据进行格式转换，得到超文本代码，包括：解析所述弹幕数据，得到JSON数据对象；根据所述JSON数据对象，并结合网站业务类型，转换得到html代码。
优选的，所述将所述超文本代码注入到预置的弹幕池中，包括：预先定义弹幕池为一维数组；将所述超文本代码存入所述一维数组中。
优选的，还包括：设置推送迭代器，通过启动所述推送迭代器，将所述多条超文本代码一次性插入到前端的弹幕显示区域。
优选的，当将所述超文本代码注入到预置的弹幕池中时，启动所述推送迭代器；和/或，轮询所述弹幕池，并判断所述弹幕池中是否存在预定数目的超 文本代码，如果有，启动所述推送迭代器，从而将所述预设数目的超文本代码一次性插入到前端的弹幕显示区域，如果没有，将弹幕池中所有超文本代码一次性插入到前端的弹幕显示区域，并停止轮询。
根据本发明的另一个方面，提供一种前端弹幕控制装置，包括：接收单元，用于接收服务器发送的弹幕数据；转换单元，用于对弹幕数据进行格式转换，得到超文本代码；缓冲单元，用于将所述超文本代码注入到预置的弹幕池中；控制单元，用于从所述弹幕池中选取多条超文本代码，将所述多条超文本代码一次性插入到前端的弹幕显示区域。
优选的，所述接收单元具体用于：通过套接字方式接收服务器发送的弹幕数据；所述转换单元具体用于：解析所述弹幕数据，得到JSON数据对象；根据所述JSON数据对象，并结合网站业务类型，转换得到html代码。
优选的，所述缓冲单元具体用于：预先定义弹幕池为一维数组；以及，将所述超文本代码存入所述一维数组中。
优选的，该装置还包括：推送迭代单元，用于设置推送迭代器，通过启动所述推送迭代器，将所述多条超文本代码一次性插入到前端的弹幕显示区域。
优选的，当所述缓冲单元将所述超文本代码注入到预置的弹幕池中时，启动所述推送迭代器；和/或，轮询所述弹幕池，并判断所述弹幕池中是否存在预定数目的超文本代码，如果有，启动所述推送迭代器，从而将所述预设数目的超文本代码一次性插入到前端的弹幕显示区域，如果没有，将弹幕池中所有超文本代码一次性插入到前端的弹幕显示区域，并停止轮询。
本发明实施例的有益效果分析如下：
由于在浏览器中，弹幕数据所基于的JavaScript是单线程语言，DOM结构的变化会非常消耗性能，本发明之前的现有方案中，一般是采取将html代码一条一条的插入到弹幕显示区域中，并完成视图渲染，每次弹幕的html代码在弹幕显示区域的插入都会触发一次DOM的重绘，在网站的数量高峰期，前端可能在1秒钟内接收到几千条弹幕，这种单次插入的方式会极大消耗浏览器性能，甚至会导致浏览器卡顿，影响视频观看。
通过本发明提供的前端弹幕控制方法，将弹幕数据进行缓冲并且后续从弹幕池中选取多条弹幕数据进行一次性显示的方式，例如，当弹幕数据单位时间内量级特别大时(比如：200毫秒内有1000条弹幕数据)，前端将弹幕数据缓冲在自定义的弹幕池中，然后每隔一定时间(例如200毫秒)去递归渲染缓冲的弹幕数据，从而可以避免逐条插入弹幕数据带来的浏览器性能消耗。本发明采用缓冲之后，实现了弹幕消息类实时展示，因为200毫秒的延时对于用户来说无感知，降低了前端渲染大量数据的压力，避免直接渲染浏览器的卡顿和视 频卡顿的问题。
上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
图1示出了根据本发明的弹幕实现系统架构示意图；
图2示出了根据本发明的前端弹幕控制方法流程图；
图3示出了根据本发明的前端弹幕控制方法实例示意图；
图4示出了根据本发明的前端弹幕控制方法实例中弹幕缓冲模块结构示意图；
图5示出了根据本发明的前端弹幕控制装置结构示意图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
以互联网直播网络为例，弹幕是其一个比较重要的功能。如图1所示，为弹幕实现系统架构示意图。实时弹幕系统主要包括三个功能装置(角色)：服务端：监听客户端连接、弹幕事件等并响应；弹幕发送前端(客户端)：由用户发送弹幕；弹幕接收前端(客户端)：接收弹幕并显示。
弹幕实现过程是：用户进入直播网站的视频直播间，前端在初始化过程中，通过socket或管道方式与网站服务器建立长连接；用户在弹幕发送框输入弹幕内容并触发弹幕发送框的发送功能，弹幕发送前端将弹幕发送框中的弹幕内容通过socket或管道发送给网站服务器，服务器会对所有上报的弹幕进行整理和分组，再分别将弹幕通过socket或管道推送给弹幕接收前端的各个直播间，弹幕接收前端会被动接收弹幕并在网页的弹幕区域进行渲染。
本发明实施例提供一种前端弹幕控制方法，主要是针对弹幕接收前端进行弹幕的显示控制(本领域技术人员理解，弹幕接收前端和弹幕发送前端都是指 客户端，一定条件是互换角色的)。
参见图2，为本发明提供的一种前端弹幕控制方法流程图，主要包括步骤S201-S203。
S201：前端接收服务器发送的弹幕数据，对弹幕数据进行格式转换，得到超文本代码。
前端(即前述的：弹幕接收前端)可通过socket或管道接收服务器推送的弹幕数据。
网络上的两个程序通过一个双向的通信连接实现数据的交换，这个连接的一端称为一个socket。Socket的英文原义是“孔”或“插座”，通常也称作″套接字″，用于描述IP地址和端口，是一个通信链的句柄，可以用来实现不同虚拟机或不同计算机之间的通信。
除了socket之外，还可以采取管道通信(Communication Pipeline)实现弹幕数据接收。管道通信，即发送进程以字符流形式将大量数据送入管道，接收进程可从管道接收数据，二者利用管道进行通信。管道作为一种通信方法，有其独特的优越性，这主要表现在它不完全依赖于某一种协议，而是适用于任何协议，只要能够实现通信即可。
前端接收到弹幕数据之后，需要转换为超文本代码，才能在弹幕区域进行渲染。弹幕数据一般是一个JSON字符串，该JSON字符串包括弹幕文本内容以及弹幕类型。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，它基于ECMAScript的一个子集，JSON采用完全独立于语言的文本格式。前端首先解析弹幕数据(即：JSON字符串)，得到JSON数据对象，具体的，由于JSON是JavaScript的通用数据格式，可以采用JSON.parse函数将JSON字符串转换为JSON数据对象；然后基于JSON数据对象，并结合网站业务类型，转换得到html代码。
S202：将超文本代码注入到预置的弹幕池中。
预先定义一维数组作为弹幕池，每当接收到弹幕数据并完成数据转换后，将转换的超文本代码存入到该一维数组中。
S203：从弹幕池中选取多条超文本代码，将多条超文本代码一次性插入到前端的弹幕显示区域。
优选的，通过设置一个推送迭代器，通过启动该推送迭代器，实现将多条超文本代码一次性插入到前端的弹幕显示区域。推送迭代器的启动条件包括多种，例如，当将所述超文本代码注入到预置的弹幕池中时，触发启动所述推送迭代器。另外，还可以对弹幕池进行定期轮询，并通过判断弹幕池中超文本代码的数量，来进行推送。具体的，轮询弹幕池，并判断弹幕池中是否存在预定 数目的超文本代码，如果有，启动推送迭代器，从而将预设数目的超文本代码一次性插入到前端的弹幕显示区域，如果没有，将弹幕池中所有超文本代码一次性插入到前端的弹幕显示区域，并停止轮询。
本发明实施例的有益效果分析如下：
由于在浏览器中，弹幕数据所基于的JavaScript是单线程语言，DOM(Document Object Model，文档对象模型)结构的变化会非常消耗性能，本发明之前的现有方案中，一般是采取将html代码一条一条的插入到弹幕显示区域中，并完成视图渲染，每次弹幕的html代码在弹幕显示区域的插入都会触发一次DOM的重绘，在网站的数量高峰期，前端可能在1秒钟内接收到几千条弹幕，这种单次插入的方式会极大消耗浏览器性能，甚至会导致浏览器卡顿，影响视频观看。
通过本发明提供的前端弹幕控制方法，将弹幕数据进行缓冲并且后续从弹幕池中选取多条弹幕数据进行一次性显示的方式，例如，当弹幕数据单位时间内量级特别大时(比如：200毫秒内有1000条弹幕数据)，前端将弹幕数据缓冲在自定义的弹幕池中，然后每隔一定时间(例如200毫秒)去递归渲染缓冲的弹幕数据，从而可以避免逐条插入弹幕数据带来的浏览器性能消耗。本发明采用缓冲之后，实现了弹幕消息类实时展示，因为200毫秒的延时对于用户来说无感知，降低了前端渲染大量数据的压力，避免直接渲染浏览器的卡顿和视频卡顿的问题。
下面通过直播网站为应用背景，对本发明一个具体实施例进行介绍。
参见图3，示出了根据本发明的前端弹幕控制方法实例示意图。图3中示出了网站服务器1将弹幕数据通过网络传输通道2(例如socket)推送给前端3，其中，数据转换模块301用户接收并完成数据转换，具体实现中，可以采用前端脚本即js代码实现数据转换模块；数据转换模块301将转换后的html代码提供给弹幕缓冲模块302；弹幕缓冲模块302在推送触发后，选取多条html代码一次性插入到弹幕显示区域303中。
下面对各个细节进行详细描述。
1、服务器1通过网络传输通道2将弹幕数据推送给前端3。
2、数据转换模块301负责接收并将弹幕数据转换为html代码。
一般的，弹幕数据是一个JSON字符串，比如：
Figure PCTCN2017075727-appb-000001
数据转换模块301解析JSON字符串，成为一个弹幕JSON数据对象。JSON是JavaScript的通用数据格式，因此可以使用JSON.parse函数将JSON字符串转换为JSON数据对象。
数据转换模块301再结合网站自身的业务类型，将弹幕JSON数据对象转换为如下的html代码：
html代码1：
<divclass＝”barrage1”>弹幕1</div>
html代码2：
<div class＝”barrage2”>弹幕2</div>
通过不同的html代码就可以生成多种样式的代码视图。
3、数据转换模块301将转换后的html代码提供给弹幕缓冲模块302。
4、弹幕缓冲模块302选取多条html代码插入到弹幕显示模块域303。
参见图4，示出了根据本发明的前端弹幕控制方法实例中弹幕缓冲模块302结构示意图。弹幕缓冲模块302进一步包括弹幕池3021和推送迭代器3022。从数据转换模块301接收到html代码后，添加到弹幕池3021中；并通过推送迭代器3022控制从弹幕池3021中选取一定数量的html代码插入到弹幕显示区域303。
弹幕池3021的工作过程是：例如，当数据转换模块301生成一条新的弹幕html代码后，会调用注入函数(push函数)，将html代码加入到弹幕池(pool)3021中，弹幕池3021在JavaScript中实际是一个一维数组，弹幕html代码被添加到弹幕池中，数据结构可如下所示：
Figure PCTCN2017075727-appb-000002
推送迭代器3022的工作过程是：每次push函数被调用会触发推送迭代器(iterator)3022的冒泡函数(pop函数)，并进行如下判断：
如果pop正在执行中，pop将忽略push对pop的触发；
如果pop没有在执行，pop会执行内部逻辑。
pop执行的内部逻辑是：
轮询执行并每次提取pool中的预定数目(例如：前50条)弹幕html代码，并将这50条弹幕html代码一次插入到弹幕显示区域中，浏览器自身完成渲染；
如果pop在某一次提取pool中的前50条弹幕html代码的数量小于50条，那么就认定是最后一次提取，pop在执行完这次后便停止轮询；
在轮询期间，pool可以不断的添加更多的弹幕html代码。
与上述方法实施例相对应，本发明还提供一种前端弹幕控制装置。参见图5，示出了本发明前端弹幕控制装置结构示意图。
该装置包括：
接收单元501，用于接收服务器发送的弹幕数据；
转换单元502，用于对弹幕数据进行格式转换，得到超文本代码；
缓冲单元503，用于将所述超文本代码注入到预置的弹幕池中；
控制单元504，用于从所述弹幕池中选取多条超文本代码，将所述多条超文本代码一次性插入到前端的弹幕显示区域。
优选的，所述接收单元501具体用于：通过套接字方式接收服务器发送的弹幕数据；所述转换单元502具体用于：解析所述弹幕数据，得到JSON数据对象；根据所述json数据对象，并结合网站业务类型，转换得到html代码。
优选的，所述缓冲单元503具体用于：预先定义弹幕池为一维数组；以及，将所述超文本代码存入所述一维数组中。
优选的，该装置还包括：
推送迭代单元505，用于设置推送迭代器，通过启动所述推送迭代器，将所述多条超文本代码一次性插入到前端的弹幕显示区域。
优选的，
当所述缓冲单元503将所述超文本代码注入到预置的弹幕池中时，启动所述推送迭代器；和/或，
轮询所述弹幕池，并判断所述弹幕池中是否存在预定数目的超文本代码，如果有，启动所述推送迭代器，从而将所述预设数目的超文本代码一次性插入到前端的弹幕显示区域，如果没有，将弹幕池中所有超文本代码一次性插入到前端的弹幕显示区域，并停止轮询。
在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。
本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的用户变身控制的系统中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。
应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (10)

  1. 一种前端弹幕控制方法，其特征在于，包括：
    前端接收服务器发送的弹幕数据，对弹幕数据进行格式转换，得到超文本代码；
    将所述超文本代码注入到预置的弹幕池中；
    从所述弹幕池中选取多条超文本代码，将所述多条超文本代码一次性插入到前端的弹幕显示区域。
  2. 如权利要求1所述的方法，其特征在于，
    所述前端接收服务器发送的弹幕数据，包括：所述前端通过套接字方式接收服务器发送的弹幕数据；
    所述对弹幕数据进行格式转换，得到超文本代码，包括：解析所述弹幕数据，得到JSON数据对象；根据所述JSON数据对象，并结合网站业务类型，转换得到html代码。
  3. 如权利要求1所述的方法，其特征在于，所述将所述超文本代码注入到预置的弹幕池中，包括：
    预先定义弹幕池为一维数组；
    将所述超文本代码存入所述一维数组中。
  4. 如权利要求1所述的方法，其特征在于，还包括：
    设置推送迭代器，通过启动所述推送迭代器，将所述多条超文本代码一次性插入到前端的弹幕显示区域。
  5. 如权利要求4所述的方法，其特征在于，
    当将所述超文本代码注入到预置的弹幕池中时，启动所述推送迭代器；和/或，
    轮询所述弹幕池，并判断所述弹幕池中是否存在预定数目的超文本代码，如果有，启动所述推送迭代器，从而将所述预设数目的超文本代码一次性插入到前端的弹幕显示区域，如果没有，将弹幕池中所有超文本代码一次性插入到前端的弹幕显示区域，并停止轮询。
  6. 一种前端弹幕控制装置，其特征在于，包括：
    接收单元，用于接收服务器发送的弹幕数据；
    转换单元，用于对弹幕数据进行格式转换，得到超文本代码；
    缓冲单元，用于将所述超文本代码注入到预置的弹幕池中；
    控制单元，用于从所述弹幕池中选取多条超文本代码，将所述多条超文本代码一次性插入到前端的弹幕显示区域。
  7. 如权利要求6所述的装置，其特征在于，
    所述接收单元具体用于：通过套接字方式接收服务器发送的弹幕数据；
    所述转换单元具体用于：解析所述弹幕数据，得到JSON数据对象；根据所述JSON数据对象，并结合网站业务类型，转换得到html代码。
  8. 如权利要求6所述的装置，其特征在于，所述缓冲单元具体用于：预先定义弹幕池为一维数组；以及，将所述超文本代码存入所述一维数组中。
  9. 如权利要求6所述的装置，其特征在于，还包括：
    推送迭代单元，用于设置推送迭代器，通过启动所述推送迭代器，将所述多条超文本代码一次性插入到前端的弹幕显示区域。
  10. 如权利要求9所述的装置，其特征在于，
    当所述缓冲单元将所述超文本代码注入到预置的弹幕池中时，启动所述推送迭代器；和/或，
    轮询所述弹幕池，并判断所述弹幕池中是否存在预定数目的超文本代码，如果有，启动所述推送迭代器，从而将所述预设数目的超文本代码一次性插入到前端的弹幕显示区域，如果没有，将弹幕池中所有超文本代码一次性插入到前端的弹幕显示区域，并停止轮询。
PCT/CN2017/075727 2016-11-09 2017-03-06 前端弹幕控制方法及装置 Ceased WO2018086282A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201611002580.3 2016-11-09
CN201611002580.3A CN106792225A (zh) 2016-11-09 2016-11-09 前端弹幕控制方法及装置

Publications (1)

Publication Number Publication Date
WO2018086282A1 true WO2018086282A1 (zh) 2018-05-17

Family

ID=58968286

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2017/075727 Ceased WO2018086282A1 (zh) 2016-11-09 2017-03-06 前端弹幕控制方法及装置

Country Status (2)

Country Link
CN (1) CN106792225A (zh)
WO (1) WO2018086282A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116301901A (zh) * 2023-03-24 2023-06-23 重庆长安汽车股份有限公司 一种json节点的解析方法及解析装置

Families Citing this family (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107750007A (zh) * 2017-12-06 2018-03-02 北京搜狐新动力信息技术有限公司 一种视频弹幕的处理方法及装置
CN111614977A (zh) * 2017-12-28 2020-09-01 贵州白山云科技股份有限公司 网络系统中文本内容传输优化方法和系统
CN110611839B (zh) * 2018-06-15 2021-10-29 阿里巴巴（中国）有限公司 互动内容处理方法、装置及存储介质
CN108932128A (zh) * 2018-07-03 2018-12-04 武汉斗鱼网络科技有限公司 一种消息格式的转换方法、装置、存储介质及安卓终端
CN109275014B (zh) * 2018-09-13 2021-09-07 武汉斗鱼网络科技有限公司 一种链接弹幕的方法及移动终端
CN109640154B (zh) * 2018-12-14 2019-09-10 苏州好玩友网络科技有限公司 网页弹幕显示方法、装置、设备及存储介质
CN109788334A (zh) * 2019-01-31 2019-05-21 北京字节跳动网络技术有限公司 弹幕处理方法、装置、电子设备及计算机可读存储介质
WO2020156035A1 (zh) * 2019-01-31 2020-08-06 北京字节跳动网络技术有限公司 弹幕处理方法、装置、电子设备及计算机可读存储介质、以及图像处理方法、装置、电子设备及计算机可读存储介质
CN111031400B (zh) * 2019-11-25 2021-04-27 上海哔哩哔哩科技有限公司 弹幕呈现方法和系统

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130004138A1 (en) * 2011-06-30 2013-01-03 Hulu Llc Commenting Correlated To Temporal Point Of Video Data
CN103533442A (zh) * 2013-09-27 2014-01-22 北京奇虎科技有限公司 视频弹幕的加载方法及装置
US20140047335A1 (en) * 2012-08-10 2014-02-13 Gabriel A. LEWIS Systems and methods for providing and updating live-streaming online content in an interactive web platform
CN105187891A (zh) * 2015-09-09 2015-12-23 上海微令信息科技有限公司 基于透明浏览器的弹幕屏幕显示系统和方法及包括该系统的设备
CN105578209A (zh) * 2015-12-16 2016-05-11 广州酷狗计算机科技有限公司 弹幕显示方法及装置
CN106060674A (zh) * 2016-06-27 2016-10-26 武汉斗鱼网络科技有限公司 一种在前端实现智能视频直播的系统及方法

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104754396B (zh) * 2015-03-12 2018-02-23 腾讯科技（北京）有限公司 弹幕数据的显示方法及装置
CN105939493B (zh) * 2016-03-30 2019-02-22 广州华多网络科技有限公司 一种视频弹幕的显示方法及显示装置
CN105979285A (zh) * 2016-06-27 2016-09-28 乐视控股（北京）有限公司 广告弹幕显示方法、装置及终端

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130004138A1 (en) * 2011-06-30 2013-01-03 Hulu Llc Commenting Correlated To Temporal Point Of Video Data
US20140047335A1 (en) * 2012-08-10 2014-02-13 Gabriel A. LEWIS Systems and methods for providing and updating live-streaming online content in an interactive web platform
CN103533442A (zh) * 2013-09-27 2014-01-22 北京奇虎科技有限公司 视频弹幕的加载方法及装置
CN105187891A (zh) * 2015-09-09 2015-12-23 上海微令信息科技有限公司 基于透明浏览器的弹幕屏幕显示系统和方法及包括该系统的设备
CN105578209A (zh) * 2015-12-16 2016-05-11 广州酷狗计算机科技有限公司 弹幕显示方法及装置
CN106060674A (zh) * 2016-06-27 2016-10-26 武汉斗鱼网络科技有限公司 一种在前端实现智能视频直播的系统及方法

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116301901A (zh) * 2023-03-24 2023-06-23 重庆长安汽车股份有限公司 一种json节点的解析方法及解析装置

Also Published As

Publication number Publication date
CN106792225A (zh) 2017-05-31

Similar Documents

Publication Publication Date Title
CN106792225A (zh) 前端弹幕控制方法及装置
US10430514B2 (en) Method and terminal for extracting webpage content, and non-transitory storage medium
CN102591954B (zh) 一种浏览器用数据加载方法及装置
US10930288B2 (en) Mobile device for speech input and text delivery
CN108833950A (zh) 一种弹幕消息下发方法、服务器、系统和存储介质
CN104767775A (zh) 网页应用消息推送方法及系统
CN102662737B (zh) 扩展程序的调用方法及装置
US20140245124A1 (en) System and method thereof for browser agnostic extension models
US20090198828A1 (en) Web page data streaming
CN104063401A (zh) 一种网页样式地址合并的方法和装置
US20170026721A1 (en) System and Methods Thereof for Auto-Playing Video Content on Mobile Devices
WO2016173185A1 (zh) 信息推送方法和装置
WO2017130035A1 (en) A system and methods thereof for auto-playing video content on mobile devices
EP3533228A1 (en) Distribution of network traffic for streaming content
US20120197971A1 (en) Enhanced web-browsing system and method
CN103258058A (zh) 页面展现方法、系统及浏览器
CN102368250B (zh) 一种ie内核浏览器的页面下载控制方法和系统
CN104573040B (zh) 抓取网页数据的方法及系统
WO2017096812A1 (zh) 网页展示方法、移动终端、智能终端、计算机程序和存储介质
CN103942230B (zh) 一种用于进行语音网页导航的方法、装置和系统
CN106598829A (zh) 一种网页自动化测试方法及装置
CN102314468A (zh) 一种同步浏览的方法
CN108989404A (zh) 一种弹幕消息下发方法、服务器、系统和存储介质
CN111683278A (zh) 智能家电设备远程协助方法、装置和移动终端
CN116192985B (zh) 一种数据传输方法、装置及系统

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 17869931

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 17869931

Country of ref document: EP

Kind code of ref document: A1