CN111405303A - Method for quickly establishing live broadcast based on webpage - Google Patents

Abstract

The present application relates to a method for quickly establishing a live broadcast based on a web page, the method comprising: reading in a target web page for live broadcast communication; introducing a first live broadcast control program including a web page operation information collection function into the target web page and storing it as a first link; introducing a second live broadcast control program including a function of parsing and executing web page operation instructions into the target web page and storing it as a second link; and creating a communication relationship between the first link and the second link in a live broadcast communication service unit. The first live broadcast control program collects the user's operation data on the target web page and sends it to the live broadcast communication service unit, which receives and sends it to other users, and the second live broadcast control program of the other users parses the received data and restores it to web page operation instructions for execution. The present application facilitates the host and the audience to conduct synchronous operation and communication on web page content, while reducing resource consumption and improving user experience.

Description

A method of quickly establishing a live broadcast based on a web page

technical field

The present invention relates to the field of communications, in particular to a method for quickly establishing a live broadcast based on a webpage.

Background technique

With the development of the Internet today, live broadcasting has become a common form of communication. Generally, live broadcasting platforms mainly adopt the form of video live broadcasting. The anchor and audience install client software or plug-ins. After the anchor creates an account, the live broadcast is started, and the audience on the same platform enters the live broadcast room to watch the live broadcast. , interaction through likes, messages, gifts, etc. is one of the efficient means of communication. For example, it has played a huge role in the inconvenience of face-to-face communication in the face of the sudden coronavirus pneumonia epidemic recently. However, there are many deficiencies in production, mainly including the following points: anchors and even viewers need to install live broadcast software or plug-ins, have an account and be familiar with software operations; live broadcast content is limited to character video live broadcast, which is inconvenient to explain other content; The interaction between the content and the audience is poor; the live broadcast process is mainly video transmission, which consumes a lot of network resources; it is impossible to quickly establish a live broadcast directly for the content to be explained.

SUMMARY OF THE INVENTION

In view of the above-mentioned existing situation, the present application provides, in the first aspect, a method for quickly establishing a live broadcast based on a webpage, the method comprising:

Read in the landing page for live communication;

Introduce a first live broadcast control program including a webpage operation information collection function into the target webpage, and store and generate the target webpage including the first live broadcast control program as a first link; The second live control program of the instruction function stores and generates the target web page containing the second live control program as a second link; the first link and the second link can be generated according to predetermined rules or distributed according to the live communication service unit ;

Alternatively, the target webpage is sent to the live webpage calculation and generation service unit for registration, and is generated according to predetermined rules or distributed according to the live communication service unit to generate the first link and the second link; when the live webpage calculation and generation service unit receives the When the first link access request is made, the webpage content including the target webpage and the first live broadcast control program is returned, and the first live broadcast control program includes a webpage operation information collection function; when the live webpage calculation and generation service unit is receiving When the second link access request is reached, the webpage content including the target webpage and the second live broadcast control program is returned, and the second live broadcast control program includes the function of parsing and executing webpage operation instructions;

creating a communication relationship between the first link and the second link in the live communication service unit, where the live communication service unit provides a live communication service for the first link and the second link;

The first live broadcast control program collects the user's operation data on the target web page, and sends the operation data to the live broadcast communication service unit, and the live broadcast communication service unit receives and sends it to other users, and is controlled by the second live broadcast of other users. The program parses the received data and restores it to the execution of web page operation instructions to achieve the effect of synchronizing with the original user's web page screen.

In a second aspect, the present application also provides another method for quickly establishing a live broadcast based on a webpage, the method comprising:

Read in the landing page URL for live communication;

Read in a first frame web page including an iframe tag and a first live control program, the first live control program includes a web page operation information collection function, add the target web address into the iframe tag, and add the first live control program to the iframe tag. The frame web page is stored and generated as the first link; the second frame web page containing the iframe tag and the second live control program is read in, and the second live control program includes the function of parsing and executing web page operation instructions, and adding the target web address into the the iframe tag, and store and generate the second frame web page as a second link;

Or, send the target webpage URL to the live webpage calculation and generation service unit for registration, and generate the first link and the second link according to the predetermined rule or according to the distribution of the live communication service unit; the live webpage calculation and generation service unit receives the When the first link access request is made, the first frame web page containing the iframe tag and the first live control program is read in, and the first live control program includes the function of collecting web page operation information, and the target web address is added to all the web pages. Describe the iframe tag and return; When the said live web page calculation and generation service unit receives the said second link access request, reads in the second frame web page that includes the iframe tag and the second live broadcast control program, the second live broadcast control program Including the function of parsing and executing webpage operation instructions, and adding the target webpage URL into the iframe tag and returning it;

creating a communication relationship between the first link and the second link in the live communication service unit, where the live communication service unit provides a live communication service for the first link and the second link;

The first live broadcast control program contained in the first link collects user operation data on the first frame web page, and sends the operation data to the live broadcast communication service unit; The second live control program parses the received data, and restores it to the execution of web page operation instructions, so as to achieve the effect of synchronizing with the original user's web page screen.

In the method for quickly establishing a live broadcast based on a webpage provided by this application, the host and the audience can access the first link and the second link respectively to start the live broadcast exchange, and other operations such as registration and download are not required, which simplifies the live broadcast process, and the webpage operation screen remains during the live broadcast process. Synchronization improves the communication efficiency between the anchor and the audience, helps the anchor explain and interacts with the audience, and improves the user experience.

Description of drawings

1 is a schematic flowchart of a method for quickly establishing a live broadcast based on a webpage according to an embodiment of the present application;

2 is a schematic flowchart of generating a target web page based on source content according to an embodiment of the present application;

3 is a schematic flowchart of generating a target web page based on a live web page template provided by an embodiment of the present application;

4 is a schematic flowchart of a reconstruction method for a target webpage provided by an embodiment of the present application;

5 is a schematic flowchart of another method for quickly establishing a live broadcast based on a webpage provided by an embodiment of the present application;

6 is a schematic diagram of the internal structure of the first frame webpage provided by the embodiment of the present application;

7 is a schematic diagram of the internal structure of a second frame webpage provided by an embodiment of the present application;

8 is a schematic flowchart of configuring live communication according to live configuration requirements provided by an embodiment of the present application;

9 is a schematic diagram of an interface for creating and configuring a live broadcast provided by an embodiment of the present application;

10 is a schematic interface diagram of uploading source content in the process of creating a live broadcast provided by an embodiment of the present application;

11 is a schematic diagram of an interface after a link is generated in the process of creating a live broadcast provided by an embodiment of the present application;

12 is a schematic diagram of the interface of the host (first link) provided by the embodiment of the present application;

FIG. 13 is a schematic diagram of a viewer terminal (second link) interface provided by an embodiment of the present application;

Detailed ways

Hereinafter, one embodiment of the present invention will be described in detail with reference to the accompanying drawings.

As shown in Figure 1, the present application provides a method for quickly establishing a live broadcast based on a webpage, the method comprising:

Step S101, read in the target webpage for live communication;

Step S1021: Introduce a first live broadcast control program including a webpage operation information collection function into the target webpage, store and generate the target webpage including the first live broadcast control program as a first link; The second live broadcast control program executing the function of the webpage operation instruction stores and generates the target webpage containing the second live broadcast control program as a second link. Or in step S1022, the target webpage is sent to the live webpage calculation and generation service unit to register and generate a first link and a second link, and the live webpage calculation and generation service unit returns an access request including the target link according to the first link and the second link. the webpage and the webpage content of the first live broadcast control program, and return the webpage content including the target webpage and the second live broadcast control program;

Step S103, creating a communication relationship between the first link and the second link in the live communication service unit.

Wherein, in step S101, the target webpage is a webpage file containing live broadcast communication content, and is generated by processing and converting the source content uploaded by the live broadcast creator.

Introducing the control program and generating two links in the target webpage, including step S1021 and step S1022 two ways:

Step S1021, insert a script tag in the target web page, the script tag contains the program file address of the first live broadcast control program for executing the webpage operation information collection function or the first live broadcast for executing the webpage operation information collection function. Control program content, and then store and deploy the target web page containing the first live control program to generate a first link, where the first link can be generated through predetermined rules (such as generating a file name according to creator information and time information; such as the first link , the second link adopts a different file name or the same file name+parameter), or is distributed according to the live broadcast communication service unit (such as the live broadcast communication service unit is preconfigured with the access address of the live broadcast room, and the target that includes the first live broadcast control program is deployed in the deployment The access URL is used for the webpage); similarly, according to the above steps, a second live broadcast control program for performing the function of parsing and executing webpage operation instructions is introduced into the target webpage, stored and deployed, and a second link is generated. In this way, a static target webpage into which the live broadcast control program is introduced is generated, and when the first link and the second link are accessed, the target webpage file containing the live broadcast control program is returned.

Step S1022, dynamically generate a target webpage containing the live broadcast control program, and the target webpage containing the live broadcast control program is calculated and generated in real time by the live broadcast webpage calculation and generation service unit. Specifically, in the live broadcast creation process, the target webpage is sent to the live broadcast webpage. The calculation and generation service unit is registered, the live web page calculation and generation service unit saves the target web page information, and generates according to predetermined rules or distributes according to the live communication service unit, firstly generates and provides the first link and the second link, and simultaneously establishes the The corresponding relationship between the first link, the second link and the target web page data, after the live broadcast is started, when the web page calculation and generation service unit receives the first link and the second link request, it finds the The data content of the target web page is read in, and the corresponding live control program (ie, the live control API) is inserted into the data content of the target web page and returned. The data obtained by the first link request includes the target webpage data and the first live broadcast control program; the data obtained by the second link request includes the target webpage and the second live broadcast control program. In this way, the live web page is run on the server to calculate and generate a service unit (such as a service program such as Servlet), and the target web page content including the live control program is dynamically generated.

In step S103, the live broadcast communication service unit is generally a communication server used for live broadcast, and provides communication and control services for the host and the audience during the live broadcast. Therefore, creating a live broadcast needs to be registered in the live broadcast communication service unit. Specifically, the live broadcast communication service record is created according to the configuration requirements of the first link used for the anchor access, the second link used for the audience access, and the live broadcast creation. and store the correspondence between the first link, the second link and the live broadcast communication record. When receiving the first link access request, look up the live broadcast communication record according to the corresponding relationship according to the access request, start the live broadcast service based on the communication record, and establish a connection between the host and the live broadcast communication service unit. A communication connection (such as a Socket communication connection), when receiving a second link access request, according to the second link access request to search for a live communication record according to the corresponding relationship, and communicate with the live broadcast at the found communication record host end In the state that the communication connection of the service unit has been established, a communication connection (such as a Socket communication connection) between the viewer and the live communication service unit is established. The live communication service unit receives, processes and sends data according to the corresponding relationship between the first link and the second link, and provides live communication and control services.

According to step S103, after the live broadcast communication relationship is established, the first live broadcast control program included in the first link collects the user's operation data on the target webpage, and sends the operation data to the live broadcast communication service unit; The second live broadcast control program included in the second link parses the received data, and restores it to the execution of web page operation instructions, so as to achieve the effect of synchronizing with the original user's web page screen.

In this embodiment, the first live broadcast control program corresponding to the host terminal includes a webpage operation information collection function, wherein the webpage operation includes common operations for webpages and other operations for assisting live broadcast. Common operations on web pages such as: page sliding, clicking, input, zooming, dragging, jumping, etc.; other operations used to assist live broadcasts, such as graffiti operations, text input operations, audio operations, video operations, etc. Other operations to assist the live broadcast are provided by the first live broadcast control program. When the host performs a live broadcast operation, the first live broadcast control program will collect and generate corresponding operation type data for different operation types. For example, when using the graffiti operation, a Canvas canvas will be created on the target webpage through the first live broadcast control program, When the host performs graffiti operations on the Canvas canvas, relevant graffiti operation data such as graffiti trajectories, graffiti pen types, and graffiti pen thicknesses will be collected. After data collection is performed, the operation data is sent to the live broadcast communication service unit, and the live broadcast communication service unit then broadcasts and forwards it to other audiences. The second live broadcast control program corresponding to the audience end parses the live broadcast operation data and restores the corresponding live broadcast according to the operation type. Operation, for example, when the webpage operation data received by the second live control program includes webpage body sliding data, based on the position data before the webpage sliding, the position data after sliding, the start time and the end time of the sliding in the webpage operation data , the second live control program calls the webpage body setting method to set the scrollTop property, sets the scrollTop value to the position data after sliding, and generates a sliding animation according to the sliding time, so as to realize the sliding effect of restoring the operation of the host.

In some embodiments of the present application, the first live broadcast control program and the second live broadcast control program are a set of programs integrating multiple functional functions. The viewer side introduces the second live control program, but is not limited to that the first live control program and the second live control program are substantially the same program or part of the same content, the first live control program, the second live control program The program can include web page operation information collection, parsing and executing web page operation instructions, graffiti operation data collection, parsing graffiti data, audio operation data collection, audio operation data analysis, video operation data collection, video operation data analysis, text operation data collection, analysis One or more of the text manipulation data functions. For example: if the second live broadcast control program includes the functions of web page operation information collection, audio operation data collection, Tuya operation data collection, and video operation data collection functions, the viewer can also perform the live broadcast operation after obtaining the live broadcast permission in the conference mode. The live communication service unit forwards the data to other users, and other viewers parse the execution data through the second live control program, and the first live control program corresponding to the host can also perform operation data analysis and other data analysis functions, and restore the corresponding Live action.

In this embodiment, the first live broadcast control program introduced in the target webpage is also used to monitor the user's live broadcast control instruction, and to control the live broadcast process. The live broadcast control instructions include start/stop live broadcast, open/close speaking, live broadcast/conference mode switching, content switching, content replacement, processing speech requests, audience management, live broadcast right handover, video switch, audio switch, graffiti setting, message processing One or more of the following details:

When receiving the start/stop live broadcast control instruction, the first live broadcast control program will send a corresponding request to the live broadcast communication service unit, and the live broadcast communication service unit will establish the host terminal and the live broadcast communication service unit after receiving the start/stop live broadcast control command After receiving the stop live control command, the live broadcast will be stopped and all connections related to the live broadcast will be disconnected;

After receiving the open/close speaking control instruction, the control instruction is forwarded to the second live control program of the audience through the live communication service unit, and the open/close function of speaking is controlled for the audience to speak;

When receiving the live mode switching control command, the control command is sent to the live broadcast communication service unit, and the live broadcast communication service unit switches the current service mode to the live broadcast mode, sets the data transmission and reception processing mode in the live broadcast mode, and sends the Commands are sent to the audience and the host to perform mode switching processing, such as turning off the speech function of the audience, and enabling the web page operation, speech, video, graffiti and other functions of the host; when receiving the conference mode switching control command, the control command is sent to The live communication service unit, which switches the current service mode to the conference mode, sets the data transmission and reception processing mode in the conference mode, and sends an instruction to the audience and the host to perform mode switching processing, such as opening the web page of the audience Operation, speech, graffiti functions, etc. The main difference between the live broadcast mode and the conference mode is that in the live broadcast mode, only the host is allowed to perform live broadcast explanation operations, and in the conference mode, all or part of the audience is allowed to obtain the live broadcast explanation operation right;

When receiving the content switching control instruction, the list interface of switchable content will be called up, the host selects the content record to be switched, and sends the switch target content record identifier to the live communication service unit, and the live communication service unit sends the switch The instruction and the target content record identifier of the switch are sent to the viewer or the host to perform the switching operation, and a refresh instruction is sent to trigger the webpage refresh function of the host and the viewer. The content switching function is used to provide the creator of multiple explanation contents (multiple URLs, webpages, multiple webpages arranged according to materials, etc.) to switch the content during the live explanation process;

When receiving the content replacement control instruction, it will call up the website or source content collection interface for generating a new target webpage, and send the collected information directly or indirectly to the live broadcast generation unit. After the new target webpage is generated, a content update request will be sent. to the live broadcast communication service unit, and finally the live broadcast communication service unit sends an update instruction to the host and the viewer, triggering the host and the client to update the live content. The content replacement function is used to change or add new live content as a whole during the live broadcast;

When receiving the control instruction for processing the speaking request, the processing result of processing the speaking request is sent to the live broadcast generation unit, and the live communication service unit processes and sends the instruction to the audience according to the processing result of the speaking request, and the second The live control program executes the client opening or closing the speech operation;

When receiving the audience management control instruction, the information of the current online audience will be obtained from the live communication service unit, and the audience information list interface will be called up. The anchor can view the audience information, or click the mute and kick buttons on the information list interface. Perform a corresponding operation on a certain audience, for example, when clicking mute, send the mute command to the live communication service unit, and the live communication service unit processes and sends the command to the corresponding viewer, and the second The live control program executes the closing operation of the client-side related functions;

When receiving the live broadcast right handover control command, the control command is sent to the live broadcast communication service unit, which is processed by the live broadcast communication service unit and sends the right handover command to the relevant host and viewer. Client-side processing of the handover of the execution authority of the live control program and the second live control program;

When receiving the video switch control instruction, the first live control program will start to perform the video operation data acquisition function, and send the collected video data to the live communication service unit; when receiving the video close instruction, stop the video operation data collection;

When receiving the audio turn-on instruction, the first live control program will start to perform the audio operation data collection function, and send the collected audio data to the live communication service unit; when receiving the audio turn-off instruction, stop the audio operation data collection ;

When receiving the Tuya setting control command, it will call up the Tuya related setting buttons and perform Tuya operations on the target web page, start to collect the Tuya operation data of the host, and send the collected Tuya data to the live communication service unit. When the host responds to Tuya When setting, the first live broadcast control program adjusts the graffiti properties according to the corresponding setting parameters;

The message processing instruction executes related message processing operations, such as: receiving the message data of the live communication service unit and updating the message list.

Correspondingly, the second live broadcast control program introduced in the target web page can also monitor the live broadcast control instructions of the audience, and the live broadcast control instructions include entering/exiting the live broadcast, request to speak, live broadcast right reception, live broadcast right handover, video switch, audio switch. , one or more of doodle settings, and message handling. Among them, entering/exiting the live broadcast establishes/disconnects the connection with the live broadcast communication service unit; the speaking request control instruction is used to send a speech request to the live broadcast communication service unit to apply for the right to speak in the live broadcast; executing the live broadcast right receiving instruction means agreeing to receive the live broadcast The request for handover of the right of live broadcast is sent to the live broadcast communication service unit, and the live broadcast communication service unit performs the recovery processing of the live broadcast right.

In an optional implementation manner, before the target webpage for live communication is read in corresponding step S101, it also includes processing and generating the target webpage. There are two specific implementation methods. For the first method, refer to FIG. 2 . shown, the steps include:

Step S201, receiving source content and identifying the source content type;

Step S202: Receive one or more of webpage material processing requirements, content structure requirements, content arrangement requirements, and display style requirements from the live broadcast creator, and/or combine the built-in webpage material specifications, content structure specifications, and content arrangement requirements of the system One or more of the rules, label specifications process the source content;

Step S203, converting the source content into a target web page.

In step S201, the source content is uploaded by the creator of the live broadcast, and the source content type includes one or more of web pages, URLs, files that can be converted into web pages, and material files supported by the web pages, and each type of source content. One or more contents can be uploaded. When uploading multiple webpages, URLs, and files that can be converted into webpages, the creator of the live broadcast can specify to arrange them in a certain order. switch.

In step S202, the web page material processing requirements refer to the processing requirements put forward by the creator of the live broadcast for the web page material content, including picture display size, picture display quality, audio sound quality, text size, text font, etc. The details are as follows:

If the content structure is required, the source content can be processed according to the provided content structure to generate the target web page. For example, if a certain tree structure is provided as the content structure requirement, the source content is processed according to the structure, a corresponding tree section is generated, and the relevant source content is inserted.

The content arrangement requirements are mainly the requirements put forward by the creator according to the order and priority of the content explanation during the live broadcast. Based on this requirement, the display order of the source content is arranged. For example, when the uploaded source content contains multiple pictures, it can be arranged according to the content arrangement requirements. Set the display order of images.

Display style requirements, you can specify the display style of the source content after processing, process the source content according to the display style requirements, and modify the display styles such as size, color, position, shadow, border, blur, CSS animation effect, etc.

The built-in web page material specification of the system refers to the specification that the web page material specified by the system must conform to, such as the specification that the image file size, image size, file type, and video file size must conform to.

The built-in content structure specification of the system, that is, the system's restrictive requirements for the content structure, such as the limit on the number of layers of the content structure. At the same time, the system provides default structure processing specifications for sorting source content, and can include multiple default specifications, which are selected from the default structure processing specifications according to the type, quantity, upload order, etc. of the source content.

The system's built-in content arrangement rules, that is, the system's default arrangement rules for source content, such as arrangement rules according to the time sequence of upload, arrangement rules according to source content types, etc.

The system's built-in tag processing specification, that is, the system's restrictive requirements for source content tags, such as restricting the use of HTML5 deprecated tags and tag attributes (such as font tags, tt tags, frame tags, align attributes, etc.).

According to step S202, the system processes the source content in combination with the requirements of the creator of the live broadcast and the requirements specified by the system. When the creator does not provide relevant requirements, the corresponding default requirements of the system are adopted. When the requirements provided by the creator do not meet the system requirements, generally System requirements are prioritized. For example, if the creator user provides a web page material picture, its size is 2M, the picture size is 2000*1000 pixels, it is required to be displayed with a width of 1000 pixels, and the system requires a picture file size of 500K, the processing method is: According to the user's request Image processing requirements, zoom the image size to 1000*500. At this time, the user requirements have been met, but the original image file size does not meet the system requirements. System Requirements.

Wherein, in step S203, different conversion steps are performed according to different types of source content, and the details are as follows:

When judging that the source content type is a webpage, obtain the source webpage content and generate it as a target webpage;

When judging that the source content type is a website, obtain the corresponding webpage file content through the website to generate a target webpage;

When judging that the source content type is a file that can be converted into a web page, first perform the conversion to web page operation, and then read the converted web page content to generate a target web page, such as files in PDF, Word, PPT and other formats;

When judging that the source content type is a material file supported by a web page, first create a new web page, create an HTML tag corresponding to the material file type in the new web page, set the tag attribute and the content to place the material file to generate For example, if the creator provides a set of JPG images and several paragraphs of text, a new web page is first created, the img tag is added to the new web page and the attributes are set to place the image, and the p tag is added to place the text content to generate the final destination web page.

The second way, referring to Figure 3, the steps include:

S301 receives the source content and reads the live web page template;

S302 processes the source content according to the requirements for the live content in the live web page template, and replaces the corresponding item in the template with the processed source content to generate the target web page.

In this manner, the live web page template is preset by the system for the creator of the live broadcast to choose. The live web page template already contains the live content processing requirements, such as web material processing requirements, content structure requirements, content arrangement requirements, display style requirements, etc. The live creator only needs to select the corresponding live web page template based on the content to be communicated, and Upload the source content according to the template content requirements, step S302 performs material processing according to the template's processing requirements for the webpage material, such as scaling the picture to the size required by the template, compressing the processed picture to meet the file size required by the template, etc., and then reading in the corresponding live webpage template. The template file replaces the corresponding items according to the processed material to generate the target web page. Usually, applying a live web page template can save time for the creator. The structure of the web page live template is similar to a PPT template. The template includes detailed interactive functions and animation effects. The creator only needs to provide materials to quickly generate excellent live works. .

In an optional implementation manner, referring to FIG. 4 , after introducing the first live broadcast control program and the second live broadcast control program in the target webpage, step S401 further includes:

S402: Perform a reconstruction operation on the target webpage including the live broadcast control program.

In step S402, the reconstruction operation includes one or more of webpage structure adjustment, label adjustment, CSS style adjustment, script adjustment, loading adjustment, event adjustment, and storage adjustment. Compared with step S202, the reconstruction of the target web page including the live control program in step S402 is to further improve the performance of the live web page. The former focuses on content and display, while the latter focuses on quality and performance. This method adopts a way of automatically generating the code of the live web page, therefore, it is more important to reconstruct the code of the web page program.

In step S402, the refactoring is based on the consideration of program quality and performance, and is adjusted around various refactoring purposes. The refactoring purposes include: keeping the commonly used JS libraries included in the web pages in the latest state, and there is no HTML that has been discarded for use. Labels and attributes, clear web page structure and layout, no malicious advertisements and links in web page content, no memory leaks in program code, asynchronous loading of content to be explained in the case of a large number of web pages with clear structure and layout, and qualified code static check , The page loading sequence is reasonable, the webpage is not allowed to contain illegal content, the local storage of the webpage is running normally, the database is called normally and the connection is normal, the resources are loaded within a reasonable time range, and the webpage is displayed normally under the expected device environment, and does not exist and live broadcast. Control conflicting events, etc.

In step S402, the refactoring operation calls the corresponding refactoring tool or method based on the above refactoring purpose to perform web page structure adjustment, label adjustment, CSS style adjustment, script adjustment, loading adjustment, event adjustment, storage adjustment, etc. achieve the purpose of reconstruction. In order to make the structure and layout of the web page clear, it is necessary to adjust the structure of the web page, adjust and layout (DOM adjustment) of the page components such as the navigation bar, column, and text content, and at the same time, adjust the CSS.

Another embodiment of the present application also provides another method for quickly establishing a live broadcast based on a webpage, as shown in FIG. 5 , in this embodiment, the method includes:

Step S501, read in the target webpage URL for live broadcast communication;

Step S5021, read in the first frame web page that includes an iframe tag and a first live control program, the first live control program includes a web page operation information collection function, add the target web address to the iframe tag, and add all the web pages to the iframe tag. The first frame web page is stored and generated as the first link; the second frame web page containing the iframe tag and the second live control program is read in, and the second live control program includes the function of parsing and executing web page operation instructions, and the target web page is The web address is added into the iframe tag, and the second frame web page is stored and generated as a second link. Or in step S5022, the target webpage address is sent to the live webpage calculation generation service unit for registration, and is generated according to predetermined rules or distributed according to the live broadcast communication service unit to generate the first link and the second link; the live webpage calculation generation service unit is in When receiving the first link access request, read in the first frame web page containing the iframe tag and the first live control program, the first live control program including the web page operation information collection function, and add the target web address Enter the iframe tag and return; when the live web page calculation and generation service unit receives the second link access request, read in the second frame web page containing the iframe tag and the second live control program, the second live broadcast The control program includes the function of parsing and executing webpage operation instructions, and adding the target webpage URL into the iframe tag and returning it;

Step S503 creates a communication relationship between the first link and the second link in the live communication service unit, and the live communication service unit provides a live communication service for the first link and the second link.

The main points of this embodiment are described in detail below:

In this embodiment, in step S501, there may be one or more target webpage URLs read for live communication. When there are multiple URLs, the creator of the live broadcast can specify to arrange them in a certain order. After the live broadcast is generated, the content can be used. The switching control instruction switches among multiple contents.

In this embodiment, referring to FIG. 6 and FIG. 7 , the first frame web page and the second frame web page have integrated a live broadcast control program, and an iframe tag is provided for the target web page. After the src attribute is modified to the target webpage URL, the final live webpage can be obtained. In this method, an inline frame is created through the iframe tags contained in the first frame webpage and the second frame webpage, and the target is added to the iframe tag. After the webpage URL, the iframe tag calls the target webpage based on the target webpage URL, so that the target webpage is embedded in the frame webpage and runs.

In this embodiment, the first live control program includes a web page operation information collection function, and the web page operations include common operations for web pages and other operations for assisting live broadcast, wherein the common operations for web pages are the same as those shown in FIG. 1 . The implementation is slightly different, because the first live broadcast control program and the target webpage have cross-domain restrictions when communicating, the first live broadcast control program cannot collect part of the user's operation data on the target webpage (such as the click operation of the internal button of the target webpage, etc.), Therefore, this embodiment can only provide limited web page operations (such as target web page sliding, jumping, etc.).

In this embodiment, when monitoring the content switching control instruction input by the user, the first live control program calls up a list interface of switchable target webpage URLs, and sends the target webpage URL identifier selected by the user to the live communication service unit, the live communication service unit sends the new target webpage URL and update instruction to the host and the viewer, triggering the address update of the iframe tags in the first frame webpage and the second frame webpage.

In this embodiment, after listening to the content replacement control instruction sent by the user, the first live control program calls out an interface for inputting a new target web address, receives the new target web address, and converts the new target web address to the new target web address. The webpage URL and content update request are sent to the live communication service unit, and the live communication service unit sends the new target webpage URL and update instruction to the host and the audience, triggering the iframe tags in the first frame webpage and the second frame webpage. Address update.

Similarly, in this embodiment, after the above content switching control instruction and content replacement control instruction are responded, the communication state between the live communication service unit and the first link and the second link is not changed during the update process, The state data already formed by the live broadcast is not changed.

Since this embodiment provides a complete generation base for the live web pages of the broadcaster and the audience (that is, the frame web page corresponding to the live control program has been integrated, which is similar to a program template and has a certain degree of maturity), in the construction process, only The final live web page can be generated by adding the target webpage URL. During the creation process, the creator does not need to provide the live broadcast creation requirements, and the system does not need to perform complex reconstruction processing. It is especially suitable for quickly establishing a live broadcast based on the existing URL and showing and explaining the target webpage. , the situation where the operation interaction requirements are not high.

In an optional implementation manner, before step S602 (corresponding to step S103 or step S503) the live communication service unit creates the communication relationship between the first link and the second link, referring to FIG. Include the following steps:

S601. Receive a live broadcast configuration requirement, and configure the current live broadcast communication service based on the configuration requirement.

In step S601, the live broadcast configuration requirements include one or more of live broadcast time configuration requirements, number limit configuration requirements, functional rights configuration requirements, user restriction configuration requirements, and message sending configuration requirements, and the live broadcast communication service unit receives the live broadcast configuration requirements. After that, configure the live broadcast communication service according to the live broadcast configuration requirements, for example: set the live broadcast time configuration requirements to realize the establishment and disconnection of the communication connection according to the start time and end time in the time configuration requirements; set the number limit configuration requirements, The live broadcast communication service unit detects the number of users currently connected, and limits the number of live broadcasters; sets the function permission configuration requirements to limit the user function permissions in the live broadcast; sets the message sending configuration requirements, and controls the sending range, frequency, and type of messages, etc. .

The following is an exemplary description and elaboration of a specific application scenario of a method:

Referring to Figures 9-11, an example process is created for one of the live broadcasts.

The first step in creating a live broadcast, as shown in Figure 9, the user needs to provide the live broadcast title, introduction, introduction picture, operating environment, time setting, and other setting information. The title, introduction, and introduction picture are used for the link description when the invitation link is forwarded, and are also applied to the guide screen when the live broadcast is not turned on; the operating environment such as PC, mobile phone, etc., this information will also be used as the system's built-in processing specification for target web pages (such as webpage material specifications, content structure specifications, content arrangement rules, label specifications, etc.) calculation reference, and also used as a reference for calculating the final reconstruction purpose; time settings include the start time, end time, timing method ( Display time or countdown), etc.; other setting information includes audience limit, audience source area limit, conference mode speaker limit, whether to automatically close live broadcast over time, etc. This information is used to calculate live broadcast configuration requirements (live broadcast time configuration requirements, number of people limit configuration requirements, functional rights configuration requirements, user restriction configuration requirements, message sending configuration requirements, etc.).

After the above live broadcast summary information and configuration information are set, the next step is to enter the live broadcast content setting.

The initial screen of the live content setting is shown in Figure 10. This page provides the user with a variety of ways to set the live content to fully meet the user's needs for live broadcast creation.

A. Create from URL. This method receives the URL uploaded by the user as the live broadcast content to create a live broadcast. This method is most suitable for the situation where the user already has one or more URLs (such as websites) and needs to quickly explain to others.

This method also supports the creation method of uploading multiple URLs by the user. When uploading multiple URLs, a default URL needs to be specified as the starting content of the live broadcast. At the same time, the user can specify the selection order of each URL (the system defaults to store in the upload order as selection order), this method stores and sorts the URLs uploaded by the user, and provides the user to switch and select during the live broadcast process.

According to the user's processing requirements for the live content, the user can also choose a processing method for the content of the web page, such as: retain the original web page, optimize the processing, the former system preserves the original web page display and interactive content to the greatest extent. , the latter system performs optimization processing according to the content of the web page, such as adjusting the layout of the web page, scaling pictures, etc., to obtain the best display effect.

In addition, this method creates a live broadcast based on the URL, and supports two live broadcast generation methods as shown in Figure 1 and Figure 5, depending on the content of the webpage pointed to by the URL uploaded by the user. Interaction requirements, when the event interaction inside the webpage is not involved, and it is only used for browsing explanations (similar to PPT explanations), the system chooses to create the live broadcast in the way of Figure 5 (created using a frame webpage containing an iframe tag).

B. Created from a web page. This method is very similar to creating from a web address, the difference is that what the user has is not a web address, but an actual web page file. The uploaded content includes not only the web page file, but also the resource files (pictures, etc.) referenced by the web page. For the convenience of users Execute upload operation, and provide upload methods for folders and compressed packages. After the file is uploaded, the target web page is generated and processed, and the generated network file is temporarily stored on the server as required.

Likewise, this creation method supports multiple webpages to generate live content, and generates live broadcasts according to the steps shown in FIG. 1 and FIG. 5 .

C. Created from other files. On the premise that the user has PPT files, PDF files, Word files, etc., it is very convenient to use this method to create. The user only needs to upload the file, and the server calls the corresponding conversion tool to convert the uploaded file for web page processing. At the same time, in the conversion process, the internal page division of the web page can be established according to the paging of the original file, and the directory, page turning navigation, etc. can be established to generate a browsing effect consistent with the original file. This operation is determined according to the user's requirements.

This creation method theoretically receives files that can be converted into web pages for conversion operations, supports multiple file uploads, processes target web pages according to user requirements, and selects the live broadcast generation method in Figure 1 or Figure 5 according to content interaction requirements.

D. Created from content, material. In principle, this method includes a process of automatically building a webpage based on webpage materials. For users who have some materials at hand (such as a set of engineering pictures), this method is used to generate live broadcasts simply and quickly. During the creation process, the user can choose not to define the generation requirements, and the system will process the structure and arrange the content according to the characteristics of the material to generate the target web page. From the point of view of the live broadcast generation method, the methods shown in Figure 1 and Figure 5 (the uploaded content and the generated target webpage need to be stored as network files) can be used.

E. Create from template. This method provides users with a way to quickly create high-quality live content on the basis of the above method of creating content and materials. Users can choose a template according to their needs, set the text in the template, and replace the material files contained in the template. Since the template provides professional design layout, color scheme, animation effect, and interaction scheme, the application of the template can quickly generate a uniform style of live broadcast landing page. . At the same time, the template generally matches the best live broadcast generation method (using the method in Figure 1 or Figure 5) according to the internal interaction characteristics.

After the above live broadcast creation, configuration settings, and source content upload are completed, the web page link of this live broadcast is stored in the server or the server has the ability to dynamically generate the live broadcast webpage. The live communication service unit) is registered, and the registration steps are generally: create a record in the database to provide live broadcast, including ID, creator, live broadcast name, live broadcast content introduction, live broadcast time, anchor link, viewer link, target page generation Information such as the method (dynamically generated or statically provided), the way of creating the live broadcast (such as using a framed webpage containing an iframe tag), the authentication method, the number of users to limit the number of users, the creation time, and other settings.

After the live broadcast is created, the host and audience sharing link of the live broadcast will be generated. Referring to Figure 11, a QR code and link are provided for the creator to share and enter the live broadcast.

The live broadcast communication server finds a corresponding live broadcast creation record according to the received anchor access link, and establishes a live broadcast communication service for the record.

The host and the audience access the corresponding links. According to the time set when the live broadcast is created, when the start time is not reached, the live broadcast information screen will be displayed, including the live broadcast theme, live broadcast content introduction, live broadcast start countdown and other information.

Referring to FIG. 12 and FIG. 13 , it is an example of the host side and the viewer side during the live broadcast.

After the live broadcast is normally started, the host page is shown in FIG. 12 . The page mainly includes several main areas, such as the target webpage content display area, the live broadcast information display area, the shortcut tool area, the message area, and the live broadcast control area.

The target webpage content display area is used to display the webpage content explained in this live broadcast, that is, the target webpage content. The host can perform webpage operations in the content display area of the target webpage, such as sliding, clicking, inputting, zooming, dragging, jumping, etc. At the same time, the audience keeps the screen synchronization in this area.

The live broadcast information display area is used to display the relevant information of the live broadcast, such as the number of current live broadcast viewers, the current live broadcast mode, the current speaker, the current speaker video, duration or timing information, etc.

The shortcut tool area mainly includes the commonly used operation tools of the host during the live broadcast, such as: content synchronization switch, video switch button, audio switch button, and graffiti operation button. The audio switch controls the on and off of sending the host video and audio. After the graffiti operation is turned on, the operations for the webpage in the target webpage content display area are in an invalid state. At this time, it is convenient to perform graffiti operations on the screen and display detailed graffiti tools, such as Graffiti pen type switching, color switching, line thickness settings, etc. During the graffiti process, the audience screen also keeps synchronization. After the graffiti operation is closed, the operation for the webpage in the target webpage content display area is resumed.

The message area displays the messages sent by the host and the audience during the live broadcast. Some of the messages carry request instructions, such as requesting to speak, returning the right to speak after speaking, etc. The relevant processing can be quickly started through the message area.

The live control area includes all the functions of live control, such as live mode switching, content selection, content replacement, audience management, setting, stopping, etc. There are two types of live broadcast mode switching: ordinary live broadcast mode and conference mode. The difference between the two is that the ordinary live broadcast mode sends voice to the host alone, and the conference mode allows multiple speakers (the number of speakers is set according to the settings) to send voice at the same time; content selection, for uploading In the case of multiple live broadcast contents, the content selection can be performed here; the replacement content is to temporarily replace the new live broadcast content during the live broadcast process. Execute the operation of generating and replacing the content of the new target page; the audience management displays the audience list, which includes the audience's name, region, speech status, audio and video switch status and other information, management operations such as viewing detailed information, blocking, blocking messages, and blocking speeches , request to speak, withdraw the right to speak, etc., if you can specify an audience in this list to speak, and transfer the right of live broadcast; the setting function includes other setting information for live broadcast, such as timing display mode, closing audience entry, message sending and receiving range, Live broadcast time adjustment, microphone volume adjustment, whether to record live broadcast process data, etc.; the stop function closes the live broadcast.

After the live broadcast is normally started, the audience page is shown in Figure 13. The page mainly includes: the target webpage content display area, the live broadcast information display area, the shortcut tool area, the message area, and the audience live broadcast control area. Slightly the same.

The target webpage content display area is used to display the webpage content explained in this live broadcast. During the live broadcast, the screen is generally kept in sync with the host, and the webpage operations in this area are blocked. Only when the audience has obtained the right to live broadcast, Web pages can be operated and synchronized to other users.

The live broadcast information display area is basically the same as the host terminal. In the normal state, the small video of the speaker (refer to the upper left corner of Figure 13) is broadcast live, and the user can choose to enlarge or close the video.

The shortcut tool area, the operation tools and functions contained in this area are basically the same as those of the anchor terminal. After the viewer obtains the live broadcast permission, it provides functions such as content synchronization control, audio switch control, video switch control, graffiti control, and live broadcast right handover. If the live broadcast permission is not obtained, the area will be hidden or the relevant buttons will be disabled.

The message area, which has the same function as the host, displays messages and can carry request instructions, such as "accept the request to speak".

Audience live control area, this area includes all the functions of audience live control during live broadcast, such as I want to speak, message, audience list, exit, etc. The I want to speak function is convenient for viewers to strive for live broadcast rights during the live broadcast; the message function starts the message sending window, which can be sent to the host or a certain audience; the audience list is used to view the basic information of the audience.

The live broadcast communication server provides services for the live broadcast process, and can record the whole process of the live broadcast at the same time. After the live broadcast is over, the anchor and the audience will access the link, display the introduction of the live broadcast, the live broadcast duration and other information, and can view the live broadcast playback at the same time.

The method for quickly establishing a live broadcast based on a webpage provided by this application can quickly establish a live broadcast based on various types of source content. After accessing the link generated by this method, the live broadcast can be quickly started without downloading additional software or plug-ins, and without learning the live broadcast software. Relevant operational knowledge simplifies the process and reduces the cost of use. At the same time, the method provides a variety of auxiliary live broadcast tools, and the screen of the host and the audience is synchronized in real time, which improves the interaction between the host and the audience, and helps the audience to better understand the live broadcast content. In addition, compared with the video stream data of traditional live broadcast, the data generated during the live broadcast has a much smaller transmission volume and can achieve a lossless effect, which is conducive to the realization of fast transmission.

Although the present invention has been specifically described above with reference to the accompanying drawings and embodiments, it should be understood that the above description does not limit the present invention in any form. Those skilled in the art can make modifications and changes to the present invention as required without departing from the essential spirit and scope of the present invention, and these modifications and changes all fall within the scope of the present invention.

Claims (10)

1. a method for quickly establishing a live broadcast based on a webpage, is characterized in that, comprises the following steps: A. Read in the landing page for live communication; B. Introduce the first live control program that includes the web page operation information collection function in the target web page, store and generate the target web page that includes the first live control program as the first link; The second live broadcast control program of the webpage operation instruction function stores and generates the target webpage containing the second live broadcast control program as a second link; the first link and the second link can be generated according to predetermined rules or according to live broadcast communication services. unit allocation; Alternatively, the target webpage is sent to the live webpage calculation and generation service unit for registration, and is generated according to predetermined rules or distributed according to the live communication service unit to generate the first link and the second link; when the live webpage calculation and generation service unit receives the When the first link access request is made, the webpage content including the target webpage and the first live broadcast control program is returned, and the first live broadcast control program includes a webpage operation information collection function; when the live webpage calculation and generation service unit is receiving When the second link access request is reached, the webpage content including the target webpage and the second live broadcast control program is returned, and the second live broadcast control program includes the function of parsing and executing webpage operation instructions; C. Create a communication relationship between the first link and the second link in the live communication service unit, and the live communication service unit provides a live communication service for the first link and the second link; The first live broadcast control program included in the first link collects user operation data on the target web page, and sends the operation data to the live broadcast communication service unit; the first live broadcast control program included in the second link 2. The live broadcast control program parses the received data, and restores it to the execution of web page operation instructions, so as to achieve the effect of synchronizing with the original user's web page screen. 2. The method according to claim 1, wherein the step before reading the target web page further comprises: Receive source content and identify the source content type, where the source content type includes one or more of web pages, URLs, files that can be converted into web pages, and material files supported by web pages; When judging that the source content type is a webpage, obtain the source webpage content and generate it as a target webpage; When judging that the source content type is a website, obtain the corresponding webpage file content through the website to generate a target webpage; When judging that the source content type is a file that can be converted into a web page, first perform the conversion to web page operation, and then read the converted web page content to generate a target web page; When judging that the source content type is a material file supported by a web page, first create a new web page, create an HTML tag corresponding to the material file type in the new web page, set the tag attribute and the content to place the material file to generate Landing page. 3. The method according to claim 2, characterized in that the step before generating the target web page further comprises receiving the web material processing requirements, content structure requirements, content arrangement requirements, and display style requirements from the creator of the live broadcast. One or more, and/or in combination with one or more of the built-in web page material specification, content structure specification, content arrangement rule, and label specification to process the source content. 4. The method according to claims 1 and 2, wherein the step before generating the target web page further comprises reading in a live web page template, and processing the source content according to the requirements for the live content in the live web page template , and use the processed source content to replace the corresponding item in the template to generate the target web page. 5. method according to claim 1, is characterized in that, the step after the introduction of the first live broadcast control program, the second live broadcast control program in the target webpage also comprises to the described introduction of the first live broadcast control program, the second live broadcast control program The target web page after the control program undergoes a reconstruction operation, and the reconstruction operation includes one or more of web page structure adjustment, tag attribute modification, CSS style modification, script adjustment, loading order adjustment, event adjustment, and storage adjustment. 6. A method for quickly establishing a live broadcast based on a webpage, wherein the method comprises: A. Read in the URL of the landing page for live communication; B. Read in the first frame web page that includes an iframe tag and a first live control program, the first live control program includes a web page operation information collection function, adds the target web site address into the iframe tag, and adds the The first frame web page is stored and generated as the first link; the second frame web page containing the iframe tag and the second live broadcast control program is read in, and the second live broadcast control program includes the function of parsing and executing web page operation instructions, and the URL of the target web page is Add into the iframe tag, and store and generate the second frame web page as a second link; Or, send the target webpage URL to the live webpage calculation and generation service unit for registration, and generate the first link and the second link according to the predetermined rule or according to the distribution of the live communication service unit; the live webpage calculation and generation service unit receives the When the first link access request is made, the first frame web page containing the iframe tag and the first live control program is read in, and the first live control program includes the function of collecting web page operation information, and the target web address is added to all the web pages. Describe the iframe tag and return; When the said live web page calculation and generation service unit receives the said second link access request, reads in the second frame web page that includes the iframe tag and the second live broadcast control program, the second live broadcast control program Including the function of parsing and executing webpage operation instructions, and adding the target webpage URL into the iframe tag and returning it; C. create a communication relationship between the first link and the second link in the live communication service unit, and the live communication service unit provides a live communication service for the first link and the second link; The first live broadcast control program contained in the first link collects user operation data on the first frame web page, and sends the operation data to the live broadcast communication service unit; The second live control program parses the received data, and restores it to the execution of web page operation instructions, so as to achieve the effect of synchronizing with the original user's web page screen. 7. The method according to claim 1 or 6, wherein the first live control program also comprises one or more of the collection of graffiti operation data, audio operation data collection, video operation data collection, and text operation data collection. The second live control program further includes one or more of parsing graffiti data, parsing audio operation data, parsing video operation data, and parsing text operation data. 8. method according to claim 7, is characterized in that, described first live broadcast control program also comprises the control instruction that the monitoring user inputs in the web page corresponding to the first link, and described instruction comprises start/stop live broadcast, start/ Turn off one or more of speaking, live/conference mode switching, content switching, content replacement, processing speaking requests, audience management, handover of live broadcast rights, video switching, audio switching, Tuya settings, and message processing; the second live broadcast The control program also includes monitoring the control instructions input by the user in the webpage corresponding to the second link, the instructions include entering/exiting the live broadcast, speaking request, receiving the live broadcast right, returning the live broadcast right, video switch, audio switch, graffiti setting, message one or more of the processing; The first live broadcast control program and the second live broadcast control program send the control instructions to the live broadcast communication service unit, and the live broadcast communication service unit executes or forwards the control instructions; the first live broadcast control program and the second live broadcast control program The control program further includes receiving and executing a control instruction of the live broadcast communication service unit; the first live broadcast control program and the second live broadcast control program also include receiving and displaying the live broadcast status information of the live broadcast communication service unit. 9. method according to claim 8, is characterized in that, after receiving the live content replacement instruction that described first live control program sends and new source content, generate new target webpage data, and send to live communication service unit, the first live broadcast control program and the second live broadcast control program, after receiving the live broadcast content replacement instruction and the new target webpage data sent by the live broadcast communication service unit, perform an update according to the received new target webpage data operate; During the update process, the communication state between the live broadcast communication service unit and the first link and the second link is not changed, and the state data formed by the live broadcast is not changed. 10. The method according to claim 1 or 6, wherein the step before creating the communication relationship between the first link and the second link in the live communication service unit also comprises receiving live broadcast time configuration requirements, the number of people One or more of restriction configuration requirements, functional rights configuration requirements, user restriction configuration requirements, and message sending configuration requirements, and send the configuration requirements to the live communication service unit, and the live communication service unit configures this configuration based on the configuration requirements. Live communication service.

Images