A method and system for quickly establishing same-screen interaction based on web pages

Abstract

The present application provides a method and system for quickly establishing same-screen interaction based on a web page, which belongs to the field of Internet communication technology. A web client initiates a same-screen interaction creation request and sends it to the server. The server receives it and creates a same-screen interaction service based on it, generates corresponding same-screen interaction connection information, and multiple web clients establish web page same-screen interaction based on the same-screen interaction connection information, monitor the web page operations occurring on the operator's web page, and collect the same-screen interaction data based on the operations and send it to the server; other web clients receive the same-screen interaction data sent by the server, and perform corresponding web page operations to achieve same-screen interaction between multiple web clients browsing the same URL. It can be seen that the present application realizes the rapid establishment of same-screen interaction based on web pages, including web page browsing, operation, etc., which adds a new way of communication and browsing to web pages, improves communication efficiency and enhances user experience.

Description

Technical Field

[0001] The present invention relates to the field of Internet communication technologies, and in particular to a method and system for quickly establishing same-screen interaction based on web pages. Background Art

[0002] Web pages are the most common tool for human-computer communication. People use them to quickly access information resources, work online, and conduct business operations. With existing websites and web page technologies, users access web pages through URLs and link jumps, and browse, read, or operate them unilaterally. However, as business increasingly moves online, the demand for real-time online communication based on web content is growing. For example, a company creates a website with an introduction to the company and its products. A customer accesses the website through the URL, and the customer service representative remains online, but is unable to communicate directly with the customer.

[0003] Some existing communication technologies incorporate instant messaging tools within websites. However, frequent pop-up chat request dialog boxes can affect the overall browsing experience of the website. Furthermore, even with readily available website content, customer service representatives cannot use this content as a communication medium. This leads to issues such as an inability to establish real-time customer contact, low communication efficiency, and poor results. Therefore, there is an urgent need to develop a method for quickly establishing communication via a webpage (website) to address these issues. Summary of the Invention

[0004] In response to the above problems, the present invention provides a method and system for quickly establishing same-screen interaction based on a web page (or website), aiming to enable multiple visitors of a web page (or website) to quickly establish same-screen interaction, including same-screen browsing, same-screen operation, graffiti marking, audio and video communication, etc., and quickly expand the web page from conventional one-way browsing to online communication, so that the function of the website is quickly enhanced, and the website (or web page) becomes a tool for acquiring customers and communication at the same time. The technical solutions provided by the present invention are as follows:

[0005] In a first aspect, the present application provides a method for quickly establishing same-screen interaction based on a web page, the method being applied to a web client, the method comprising:

[0006] Receiving a trigger signal from a first function button configured on a web browsing interface of a web client, and sending a same-screen interaction creation request to a server after receiving the trigger signal, wherein data of the same-screen interaction creation request includes at least one of creator information, target website information for performing the same-screen interaction, browser information, and same-screen interaction setting information, wherein the server is configured to receive the same-screen interaction creation request sent by the web client, create a same-screen interaction service based on the same, and generate corresponding same-screen interaction connection information, wherein the same-screen interaction connection information provides a service connection for the web client participating in the corresponding same-screen interaction, and has a one-to-one relationship with the target website information for creating the same-screen interaction;

[0007] Receiving the same-screen interaction connection information, or obtaining the same-screen interaction connection information from a server based on the currently browsed URL;

[0008] Establishing a communication connection between the web client and the same-screen interaction service based on the same-screen interaction connection information;

[0009] A web client with operating authority listens to web page operations, collects data based on the nature of the web page operations, generates same-screen interaction data of the corresponding type, and sends it to the server; a web client without operating authority receives the same-screen interaction data sent by the server, and executes web page operations of the corresponding nature on the web client based on the type of the received same-screen interaction data, so as to realize same-screen interaction with a web client with operating authority.

[0010] Through the above method, the JS library used to implement the same-screen interaction creation, control, and communication of this application is introduced into the client web page program, so that the same-screen interaction function can be quickly realized without changing the original content program on the web page.

[0011] Furthermore, it also includes, after the web client receives the same-screen interaction connection information, or, based on the current browsing URL, obtains the same-screen interaction connection information from the server, it also includes, based on the same-screen interaction connection information, generating an entry link to enter the same-screen interaction, wherein the method of generating the entry link includes generating an entry link in the web page corresponding to the target URL of the same-screen interaction, or, based on the browsing jump relationship between web pages in the website, generating an entry link in a web page associated with the web page corresponding to the target URL of the same-screen interaction.

[0012] Through the above method, after the creator of the same-screen interaction completes the same-screen interaction, entry link information is generated for the creator of the same-screen interaction and the visitor at the same time, so that the visitor can quickly participate and enter the communication.

[0013] In one possible implementation, after the creator or visitor of the same-screen interaction enters the same-screen interaction, it also includes loading the same-screen interaction control component in the web client of the creator or visitor, and the same-screen interaction control component includes at least one of an operation permission control component, a graffiti control component, an audio and video control component, a same-screen interaction process control component, a same-screen interaction process recording component, a same-screen interaction status information display component, and a same-screen interaction user information display component.

[0014] Through the above method, a same-screen interaction environment is generated for the web client that enters the same-screen interaction.

[0015] In one possible implementation, during the same-screen interaction process, the web client participating in the same-screen interaction collects the same-screen interaction data and sends it to the server, and receives the same-screen interaction data sent by the server to perform web page operations of corresponding nature, including but not limited to the following methods:

[0016] On a web client with operation authority, data is collected based on the web operations performed by the user to generate web operation instruction data, and the web operation instruction data is sent as same-screen interaction data; on a web client without operation authority, the web operation instruction data sent by the server is received, and the web operation instructions contained therein are executed to restore the web operation performed by the web client with operation authority;

[0017] On a web client with operation authority, monitor the changes of web page data content, collect web page content data or differentiated web page data content and send it as same-screen interactive data; on a web client without operation authority, receive the web page content data sent by the server, and update or replace the web page data content of the web client based on the web client, so that the web page data is consistent with that of the web client with operation authority;

[0018] On a web client with operating authority, image data and / or drawing instructions are generated based on the web page display content or the changed web page display content, and the image data and / or drawing instructions are sent as same-screen interactive data; on a web client without operating authority, the image data and / or drawing instructions sent by the server are received, and based on the data, images are displayed or drawn, or images are replaced on the web client, so that the web page display content is consistent with that of the web client with operating authority.

[0019] The above method provides a method for performing synchronous display and operation between web pages after establishing same-screen interaction of web pages (or websites), so as to achieve synchronization between various web page terminals during the same-screen interaction process.

[0020] In one possible implementation, a graffiti control component is loaded on a web client that enters same-screen interaction. Specifically, the graffiti control component includes at least a graffiti switch component. When the graffiti switch component is turned on, it controls all web clients participating in the interaction to enter a graffiti operation state, generates a Canvas element for graffiti within its web page, and intercepts other web page operations unrelated to the graffiti operation. When a graffiti operation occurs, drawing data is generated based on the drawing operation occurring on the Canvas element, and the drawing data is sent to the server as the same-screen interaction data. The system also includes receiving the drawing data sent by the server and performing a drawing operation on the Canvas element based on the data. When the graffiti switch component is turned off, the Canvas element is hidden or deleted, interception of other web page operations unrelated to the graffiti operation is abandoned, and all web clients participating in the interaction are controlled to exit the graffiti operation state.

[0021] The above method provides a method for synchronous graffiti during the same-screen interaction of a web page (or website), facilitating communication between various web page terminals during the same-screen interaction.

[0022] In one possible implementation, after the creator or visitor of the same-screen interaction enters the same-screen interaction, it also includes loading an audio and video control component to establish audio and / or video communication between the web clients participating in the same-screen interaction service. The audio and video control component is used to realize the acquisition, playback, and control of audio and video, including one or more of a sound playback switch, a microphone switch, a video playback switch, a video capture switch, and a switching switch between audio and video.

[0023] The above method provides a method for audio and video communication and control during the same-screen interaction of web pages (or websites), thereby improving the communication efficiency between various web page terminals during the same-screen interaction.

[0024] In one possible implementation, after establishing a connection between the web client participating in the interaction and the same-screen interaction service based on the same-screen interaction connection information, it also includes recording one or more of the same-screen interaction data, same-screen control data, audio and video data, and the corresponding occurrence time information sent or received by the web client participating in the interaction, and storing the data collected during a same-screen interaction process and the corresponding occurrence time information in a structured manner to generate a same-screen interaction data record, and adding a data index to the same-screen interaction data record. The same-screen interaction data record is used for playback of the same-screen interaction process, and the data index includes one or more of the target URL information corresponding to the same-screen interaction, web page data, version information contained in the web page request header, and participant information.

[0025] The above implementation method provides a method for recording and generating same-screen interaction data by collecting and recording data during same-screen interaction, thereby realizing the storage and evidence of the same-screen interaction process.

[0026] In one possible implementation, the web client also includes sending a query request to the server to obtain the same-screen interaction data record related to the current URL, generating and displaying an entry link for playback based on it, so that other visitors can obtain the corresponding same-screen interaction data record through the entry link and perform playback of the corresponding same-screen interaction process.

[0027] Through the above implementation method, a playback link is generated on the web client so that web visitors can view the communication process, adding a new access and reading dimension to the web page (or website) and enriching the content analyzed by the communicator based on the web page (or website) itself.

[0028] In another possible implementation, a JS library is introduced into the web page program, and the JS library may include functions for implementing the above various implementation methods, such as generating a same-screen interaction creation request, receiving a same-screen interaction service creation completion notification or connection information, generating a same-screen interaction environment, establishing a communication connection with the same-screen interaction service, sending and receiving same-screen interaction data, generating an entry link in the web page, generating a graffiti component, generating drawing data based on the graffiti, establishing audio and video communication, controlling audio and video communication, collecting same-screen interaction data, generating same-screen interaction data records, generating playback data, and executing one or more functions of playback.

[0029] This implementation method is conducive to quickly implementing the various methods mentioned in this application without changing the original content of the web page (or website).

[0030] On the other hand, the present application provides a system for quickly establishing same-screen interaction based on a web page, the system being used for a web client, the system comprising:

[0031] A creation module, configured to generate a same-screen interaction creation request based on one or more of creator information, target URL information for creating same-screen interaction, browser information, and same-screen interaction setting information; and to generate an entry link for a visitor to enter the same-screen interaction;

[0032] A loading module for loading the same-screen interaction control components, including one or more of an operation permission control component, a graffiti control component, an audio and video control component, a same-screen interaction process control component, a same-screen interaction process recording component, a same-screen interaction status information display component, and a same-screen interaction user information display component;

[0033] A communication module is used to establish a communication connection with the server, including sending a same-screen interaction creation request, querying the same-screen interaction service, receiving same-screen interaction service information, and sending and receiving same-screen interaction data;

[0034] The control module is used to execute the operation authority allocation and control the same-screen interaction process;

[0035] Graffiti module, used to execute graffiti drawing, collect graffiti data, and execute drawing based on graffiti data;

[0036] Audio and video module, used to collect, send, receive, and play audio and video data, including audio and video playback control;

[0037] The acquisition module is used to collect one or more of web page operation instruction data, web page content data or differentiated web page data, image data or drawing data generated by web page display content, graffiti drawing data, audio data, and video data to generate same-screen interaction data.

[0038] In one possible implementation, the creation module of the system also includes obtaining corresponding same-screen interaction data records from the server based on the target URL, and generating an entry link for visitors to perform playback; the system also includes a recording module, recording one or more of the same-screen interaction data, same-screen control data, audio and video data, and the corresponding occurrence time information sent or received by the web client participating in the interaction, and storing the data collected during a same-screen interaction process and the corresponding occurrence time information in a structured manner to generate a same-screen interaction data record; the system also includes a playback module, which performs playback of the corresponding same-screen interaction process based on the same-screen interaction data record.

[0039] The present invention has at least the following beneficial effects:

[0040] The present invention provides a method for quickly establishing same-screen interaction based on a web page. Without changing the original program code of the web page (or website), the same-screen interaction JS library implemented in this application is introduced to quickly establish a same-screen communication function for the web page. This application enables multiple clients browsing the same web page to perform same-screen browsing, synchronous operation, synchronous graffiti and other same-screen interactions based on the web page content, thereby realizing interaction between website viewers and achieving a "face-to-face" communication effect. In addition, during the same-screen interaction process, browsing, operation, and explanation data are recorded, and playback data is generated. While forming operation or communication evidence, a new explanation and guidance function is added to the website. The method provided by this application transmits or records a very small amount of data, which is convenient for transmission and storage; the playback image quality is high. It can be seen that this application adds a new way of communication and browsing to web pages, improves communication efficiency and enhances user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] Figure 1A flowchart of a method for quickly establishing same-screen interaction based on a web page according to an embodiment of the present application;

[0042] Figure 2 A flowchart of a method for quickly establishing same-screen interaction based on a web page according to an embodiment of the present application;

[0043] Figure 3 A flowchart of a method for quickly establishing same-screen interaction based on a web page according to an embodiment of the present application;

[0044] Figure 4 A schematic diagram of a process for loading a same-screen interaction component according to an embodiment of the present application;

[0045] Figure 5 Schematic diagram of corresponding sending and receiving of different types of same-screen interactive data according to an embodiment of the present application;

[0046] Figure 6 This is a schematic diagram of an execution flow of a Tuya switch component according to an embodiment of the present application;

[0047] Figure 7 A schematic diagram of a process for loading audio and video components according to an embodiment of the present application;

[0048] Figure 8 A schematic diagram of a process for generating same-screen interaction data records according to an embodiment of the present application;

[0049] Figure 9 This is a flowchart of performing playback based on same-screen interactive data recording according to an embodiment of the present application;

[0050] Figure 10 A schematic diagram of a system for quickly establishing same-screen interaction based on a web page according to an embodiment of the present application;

[0051] Figure 11 This is a schematic diagram of an interface for quickly establishing same-screen interaction based on a web page according to an embodiment of the present invention;

[0052] Figure 12 This is a schematic diagram of an interface for quickly establishing same-screen interaction based on a web page according to an embodiment of the present invention;

[0053] Figure 13 This is a schematic diagram of an interface for quickly establishing same-screen interaction based on a web page according to an embodiment of the present invention;

[0054] Figure 14 This is a schematic diagram of an interface for quickly establishing same-screen interaction based on a web page according to an embodiment of the present invention;

[0055] Figure 15 This is a schematic diagram of an interface for quickly establishing same-screen interaction based on a web page according to an embodiment of the present invention;

[0056] Figure 16 This is a schematic diagram of an interface for quickly establishing same-screen interaction based on a web page according to an embodiment of the present invention;

[0057] Figure 17 This is a schematic diagram of an interface for quickly establishing same-screen interaction based on a web page according to an embodiment of the present invention;

[0058] Figure 18 This is a schematic diagram of an interface for quickly establishing same-screen interaction based on a web page according to an embodiment of the present invention;

[0059] Figure 19 This is a schematic diagram of an interface for quickly establishing same-screen interaction based on a web page according to an embodiment of the present invention;

[0060] Figure 20 This is a schematic diagram of an interface for quickly establishing same-screen interaction based on a web page according to an embodiment of the present invention;

[0061] Figure 21 Schematic diagram of the internal structure of a web page according to an embodiment of the present invention. DETAILED DESCRIPTION

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

[0063] The embodiment of the present invention provides a method for quickly establishing same-screen interaction based on a web page, which aims to establish same-screen interaction between multiple web clients browsing the same web page. Figure 1 As shown:

[0064] S101, receiving a trigger signal of a first function button configured on a web browsing interface of a web client, and sending a same-screen interactive service creation request to a server;

[0065] Among them, a same-screen interaction is created on a certain web client, and a same-screen interaction service creation request is sent to the server. The information sent includes but is not limited to one or more of the creator information, the target URL information for the same-screen interaction, the browser information, and the same-screen interaction setting information. After the server receives the same-screen interaction service creation request, it creates the same-screen interaction service based on it, generates a corresponding same-screen interaction connection, and provides a service connection for the web client participating in the corresponding same-screen interaction. It has a one-to-one relationship with the target URL information for creating the same-screen interaction. Preferably, the same-screen interaction connection is generated on the server, and the service is started at the same time to provide the client with the same-screen interaction service corresponding to the connection. According to the above, the same-screen interaction service is similar to a room for communication, and the connection information is similar to the room address. It should be noted that the server mentioned in this application usually includes a same-screen interaction service creation module, a same-screen interaction service management module, and a communication service module, wherein the same-screen interaction service creation module is used to create a same-screen interaction service based on a same-screen interaction creation request; the same-screen interaction service management module is used to register the same-screen interaction service and generate a same-screen interaction connection, and is also used to deregister and query the same-screen interaction service. When receiving a same-screen interaction connection query request sent by the client, the server retrieves and provides the corresponding same-screen interaction connection in the server database; the data communication service module is used to receive a same-screen interaction creation request, send a same-screen interaction connection or creation completion notification, and send and receive same-screen interaction data. It should also be noted that for the same URL, different web clients can create one or more same-screen interaction services based on it at the same time or at different times, which is similar to creating one or more communication rooms for the same URL.

[0066] S102, receiving same-screen interaction connection information or same-screen interaction service creation completion notification sent by the server;

[0067] Specifically, this step includes two implementation methods: the server pushes the information to the web client, or the web client actively queries the server for the information.

[0068] S103, connecting to the same-screen interaction service and entering the same-screen interaction;

[0069] This step establishes a communication connection between the web page client and the corresponding same-screen interaction service based on the same-screen interaction connection information, and the web page client enters the same-screen interaction state.

[0070] S1041, collecting web page operation data, generating same-screen interaction data, and sending the data;

[0071] S1042, receiving same-screen interaction data and restoring web page operations.

[0072] In the above two steps, S1041 monitors web page operations on a web page client with operation authority, collects data based on the nature of the web page operation, generates the corresponding type of same-screen interaction data and sends it to the server; S1042 receives the same-screen interaction data sent by the server on a web page client without operation authority, and performs the corresponding web page operation based on the type of the received same-screen interaction data to achieve web page synchronization with the web page client with operation authority. It should be noted that the web page operations in the above steps include but are not limited to operations performed by users, web page program running events, web page content changes, web page display changes, etc., among which user operations include sliding, dragging, clicking, inputting, etc. In addition, under normal circumstances, at the same time, there is only one web page client with operation authority, but there are also cases where multiple clients have operation authority at the same time, such as in graffiti interaction mode, where multiple users can perform graffiti drawing at the same time.

[0073] In this embodiment, a request for creating same-screen interaction is initiated on a web client, which enables same-screen interaction between multiple web clients based on a specified URL, providing a new communication function for web pages, making it easier for viewers to communicate about the content of the web page itself and improving communication efficiency.

[0074] After the server opens the same-screen interaction service and generates the same-screen interaction connection in the above embodiment, in order to facilitate other viewers to enter the same-screen interaction, a corresponding entry link needs to be generated in the web page browsed by the user. Please refer to Figure 2 , as follows:

[0075] S201, receiving same-screen interactive connection information during a current webpage browsing, or obtaining same-screen interactive connection information from a server based on the current webpage browsing;

[0076] S202, generating an entry link for entering the same-screen interaction based on the same-screen interaction connection information;

[0077] S203, click the entry link to connect to the same-screen interaction service and enter the same-screen interaction;

[0078] S2041, collecting web page operation data, generating same-screen interaction data, and sending the data;

[0079] S2042, receiving same-screen interaction data and restoring web page operations.

[0080] Among them, S201 includes two methods for obtaining same-screen interaction connections: obtaining the corresponding same-screen interaction connection from the server based on the currently browsed URL, or calculating the target webpage to which the currently browsed webpage can directly or indirectly jump based on the browsing or jump relationship between webpages within the website, searching for the same-screen interaction service associated with the target webpage, obtaining the corresponding same-screen interaction connection, generating an entry link in S202, and then entering the same-screen interaction in S203. S2041 and S2042 in this embodiment are basically the same as S1041 and S1042 in the previous embodiment and will not be repeated here.

[0081] This embodiment provides a way for users who are browsing web pages to create a same-screen interaction entrance and enter the same-screen interaction, so that users can obtain the current same-screen interaction in real time while browsing the web pages and choose to enter the same-screen communication.

[0082] In the specific implementation scenario of this application, one of the web page clients initiates the same-screen interaction creation, and other web page clients participate in the same-screen interaction. Preferably, the web page terminals communicate with each other through the server. Figure 3 The main steps are as follows:

[0083] On web client 1:

[0084] S301, generating a same-screen interactive service creation request;

[0085] On the server:

[0086] S302, creating a same-screen interactive service;

[0087] S303, generating same-screen interaction connection information and starting the same-screen interaction service;

[0088] S304, receiving the same-screen interaction data and sending it to other web clients participating in the interaction;

[0089] On web client 1:

[0090] S305: Receive same-screen interaction connection information or same-screen interaction creation completion notification information and enter same-screen interaction;

[0091] S3071, collecting web page operation data to generate same-screen interaction data;

[0092] S3072, receiving same-screen interaction data and restoring web page operations;

[0093] On web client 2:

[0094] S306, receiving same-screen interaction connection information, generating an entry link, and entering same-screen interaction through the entry link;

[0095] S3081, collecting web page operation data to generate same-screen interaction data;

[0096] S3082, receiving same-screen interaction data and restoring web page operations.

[0097] Among them, web client 1 is the same-screen interaction creation terminal, web client 2 represents the same-screen interaction participating terminal, and the two establish communication through the server. After the same-screen interaction service is created in S303, the same-screen interaction service is started at the same time, and the same-screen interaction connection or notification is sent to the client to enter the same-screen interaction. S304 realizes the same-screen data interaction between web clients. It should be noted that the present application should not be limited by the above implementation method of interacting data through the server. In one possible implementation scenario, web clients can be implemented through direct communication, such as establishing a P2P connection. The client first connects to the relay service. After the relay service is connected, the clients communicate directly with each other. For example, WebRTC is used for direct data communication between clients. In another possible implementation scenario, the creator's web client is used to replace part or all of the server functions to execute the creation of the same-screen interaction service and provide the same-screen interaction service.

[0098] In a possible implementation scenario, a web client that initiates or participates in same-screen interaction, after entering the same-screen interaction, first sets up the same-screen interaction environment on the web client and loads the same-screen interaction components. Please refer to Figure 4 , the steps are as follows:

[0099] S401, connecting to the same-screen interaction service and entering the same-screen interaction;

[0100] S402, load the same-screen interaction control component, including one or more of the operation permission control component, graffiti control component, audio and video control component, same-screen interaction process recording component, same-screen interaction process recording component, same-screen interaction status information display component, and same-screen interaction user information display component.

[0101] Among them, the components loaded by the creation client and the participating client of the same-screen interaction may be different. For example, the former needs to load the control components related to the host. Optionally, the corresponding same-screen interaction components are loaded according to whether the current client currently has the operation authority. The following examples illustrate the functions of the components: the operation authority control component includes control rights application, authorization, transfer, cancellation and other functions; the graffiti control component includes graffiti on, graffiti off functions, as well as brush, eraser, shape and other setting functions, among which the brush settings include color, thickness and other setting functions; the audio and video control component includes sound switch, microphone switch, video display component, etc.; the same-screen interaction recording component includes recording start, pause, stop and other functions, as well as recording duration, recording file size display, etc.; the same-screen interaction status information display component includes information display functions such as the number of participants, same-screen interaction duration, graffiti status (graffiti on status, graffiti off status), etc.; the same-screen interaction user information display component displays information such as the creator, host, operator, speaker, etc.

[0102] After entering the same-screen interaction, this embodiment loads the same-screen interaction component and quickly generates a same-screen interaction environment on the web client, providing functional support for same-screen interaction, same-screen graffiti, and audio and video communication based on the web page.

[0103] In a possible implementation scenario, multiple clients collect and send same-screen interaction data, or receive and process same-screen interaction data during the same-screen interaction process. Please refer to Figure 5 Schematic diagram illustrating the sending and receiving of several different types of same-screen interactive data. On a web client with operating authority, step S501 is executed. Based on the web page operation performed by the user, data is collected to generate web page operation instruction data and send it as same-screen interactive data. On a web client without operating authority, step S502 is executed to receive web page operation instruction data and execute the web page operation instructions contained therein. On a web client with operating authority, step S503 is executed to monitor changes in web page data content, collect web page content data or differentiated web page data content and send it as same-screen interactive data. On a web client without operating authority, step S504 is executed to receive web page content data and update or replace the web page data content of the web client based on the web page content. On a web client with operating authority, step S505 is executed to generate image data and / or drawing instructions based on the web page display content or the changed web page display content and send it as same-screen interactive data. On a web client without operating authority, step S506 is executed to receive image data and / or drawing instructions and display or draw or replace images on the web page side based on the images.

[0104] Among them, in a certain state during the same-screen interaction process, for a certain web page operation, there is always a web client as the controller of the same-screen interaction, and other web clients as the controlled parties of the same-screen interaction. The essence of the same-screen interaction is to synchronize the operations and changes performed by one party to the behavior of the other party. Therefore, combined with the operation permissions during the same-screen interaction process, the web client with operation permissions is usually used as the controller, and the web client without operation permissions is used as the controlled party. S501 and S502 monitor or collect the operations performed by the controller, convert the operations into web page operation instructions and send them. The controlled party restores the web page operation based on the received instructions to achieve the same-screen display and operation of the web page. For example, when the controller clicks a button to perform a certain operation, the controlled party executes the onclick event of the button through JS, thereby achieving the same execution effect of the two. S503 and S504 achieve web page synchronization by monitoring web page data changes and synchronizing web page data. The web page data includes but is not limited to HTML text, CSS code, JavaScript code and other content used for web page rendering, and monitors web page content change functions such as MutationObserver. S505 and S506 achieve web page synchronization by collecting the final display screen of the web page. The final display screen is the screen generated after the web page is rendered. In this method, there are two options: collecting image data and drawing instructions. The drawing instruction is that the controller generates an instruction set for drawing the screen based on the current display screen, constructs a canvas element for presentation on the controlled party, and performs drawing on the canvas element to achieve the same-screen display effect. Optionally, in a specific implementation scenario, this application can be implemented in combination with one or more of the above methods.

[0105] The same-screen interactive data collection, sending, receiving, and restoration method provided in this embodiment enables multiple clients to keep web pages in a synchronized state during the interaction process, thereby achieving the effect of same-screen browsing and synchronous operation, and improving the quality of communication.

[0106] In a possible implementation scenario, the Tuya control component is loaded in the web client that enters the same-screen interaction. The Tuya control reference Figure 6 As shown, the details are as follows:

[0107] Steps to follow when Tuya is enabled:

[0108] S601, Tuya switch component is turned on;

[0109] S602, controlling all web page clients participating in the interaction to enter a graffiti operation state; generating a Canvas element for graffiti within the web page; and intercepting other web page operations not related to the graffiti operation;

[0110] S603: Generate drawing data based on the drawing operation on the Canvas element and send same-screen interaction data; or receive the same-screen interaction data, parse the drawing data, and perform drawing on the Canvas element;

[0111] Steps to perform when Tuya is closed:

[0112] S604, Tuya switch component is turned off;

[0113] S605: Hide or delete the Canvas element; abandon interception of other web page operations not related to the graffiti operation; and control all web page clients participating in the interaction to exit the graffiti operation state.

[0114] After entering the graffiti operation state at S602, a transparent canvas for graffiti is created on the upper layer of the web page. At the same time, all user operations on the original web page will be blocked to prevent the graffiti operation event from affecting the web page operation. Optionally, when entering and exiting the graffiti operation state at S601 and S604, a switching status prompt message is displayed on the web page.

[0115] The synchronous graffiti function provided by the above embodiments is more conducive to circling and marking content based on web pages, effectively improving communication efficiency.

[0116] One possible implementation scenario also includes a working mode where, at the same time, web page operations are performed on one web client and graffiti is performed on other web clients. In this mode, the web client performing the web page operations displays a Canvas element for presenting graffiti content. When a user operation occurs on this Canvas element, the event on the Canvas element is ignored and passed to the original web page element for execution. On the other web clients, graffiti operations are performed, and other web page operations unrelated to the graffiti operations are blocked. This method is conducive to communication scenarios where one party performs operations and the other party makes notes.

[0117] In a possible implementation scenario, the audio and video control component is loaded in the web client that enters the same-screen interaction, referring to Figure 7 As shown:

[0118] S701, connecting to the same-screen interaction service and entering the same-screen interaction;

[0119] S702, loading the audio and video control component, and establishing audio and / or video communication between the web clients participating in the same-screen interactive service.

[0120] Preferably, WebRTC (Web Real Time Communication) is used to directly perform video and audio communications between web clients.

[0121] The above embodiments do not require the use of other audio and video communication tools or plug-ins, and directly establish audio and video communication based on the web client, making on-screen interaction faster and more efficient.

[0122] In another possible implementation scenario, based on the same-screen interaction process, the communication process data is recorded. Figure 8 As shown:

[0123] S801, enter the same-screen interaction;

[0124] S802: Record one or more of the same-screen interaction data, same-screen control data, and audio and video data sent or received by the web client participating in the interaction, as well as the corresponding occurrence time information. The data collected during a same-screen interaction process and the corresponding occurrence time information are stored in a structured manner to generate a same-screen interaction data record.

[0125] S803: Add a data index to the same-screen interaction data record.

[0126] According to the above implementation, optionally, the type of recorded data is configured according to the recording requirements in S802. Optionally, the recording operation in S802 is performed on a web client. Optionally, the recording operation in S802 is performed on the server based on the received web client data. Preferably, after generating the same-screen interaction data record, the data record is stored in the server database, and the index information of the data record is added through S803. The data index includes but is not limited to the target URL information corresponding to the same-screen interaction, web page data, version information contained in the web page request Header, participant information, etc., and the data index is used to query and obtain the corresponding same-screen interaction data record.

[0127] In a possible implementation of the above embodiment, playback is performed and a video is generated based on the same-screen interaction data record in S802 or the data contained therein, or a video is recorded and generated during the same-screen interaction process, and the video is stored as a same-screen interaction data record.

[0128] The same-screen interaction data records generated by the above embodiments can be used for playback of the same-screen interaction process.

[0129] In combination with the above embodiments, in a possible implementation scenario, a message digest (such as MD5 operation) is calculated based on the same-screen interaction data record generated in S802 or the data content contained therein, and the generated message digest is stored or displayed on the same-screen interaction web page for participants to keep as evidence. Furthermore, during the same-screen interaction process, after each update of the same-screen interaction data record, a new message digest is recalculated for the updated same-screen interaction data record, and the new message digest is stored or displayed on the same-screen interaction web page to keep as evidence the interaction data in each state of the same-screen interaction process. Furthermore, after the same-screen interaction process ends, one or more of the message digest, same-screen interaction identification information, and related index information corresponding to the final same-screen interaction data record are stored using blockchain technology to keep as evidence the entire same-screen interaction process.

[0130] In another possible implementation scenario, an entry for viewing the playback of the same-screen interaction process is generated on the web page for the viewer to access and view. Figure 9 As shown, the specific steps are:

[0131] S901, sending a query request to the server on the currently browsed web page to obtain the same-screen interaction data record related to the current URL;

[0132] S902: Generate and display an entry link for playback based on the same-screen interaction data record;

[0133] S903, click the link to obtain the corresponding same-screen interaction data record and perform playback of the corresponding same-screen interaction process.

[0134] In step S901, the URL carried in the query request includes the current URL information, or the specified URL used to query related same-screen interaction data records. In addition, the returned data records include arrays, that is, multiple data records. Correspondingly, the entry links generated in S902 include single links and list links.

[0135] The above embodiment can produce a beneficial effect by adding an explanation and analysis function to the website or webpage. The playback provided by this embodiment has a multimedia effect, which is more conducive to the browser's reading and understanding of the website. In addition, this embodiment does not limit the number of people communicating. When there is only one person, the result generated is a multimedia explanation of the website content. For example, if the website content is a form to be filled out, the commentator creates a same-screen interaction, performs the form filling operation, and provides voice explanation during the operation. After the same-screen interaction data record is generated, other visitors can learn through playback, which has a helpful effect.

[0136] In a preferred implementation scenario, a JS library for implementing the method for quickly establishing same-screen interaction based on a web page according to the above embodiments of the present invention is introduced into a web page program. The functions of the JS library include: generating a same-screen interaction creation request, receiving a same-screen interaction service creation completion notification or a same-screen interaction connection, generating a same-screen interaction environment, establishing a communication connection with a same-screen interaction server, sending and receiving same-screen interaction data, generating a same-screen interaction entry link in a web page, generating a graffiti component, generating drawing data based on graffiti, establishing audio and video communication, controlling audio and video communication, collecting same-screen interaction data, generating same-screen interaction data records, executing playback, and other functions. The embodiment of the present invention introduces a JS library into a web page and configures the same-screen interaction server connection information, so that the web page quickly has the function of same-screen interaction. Therefore, introducing a JS library is an implementable way of a method for quickly establishing same-screen interaction based on a web page according to an embodiment of the present invention.

[0137] Based on the same inventive concept, Figure 10 As shown, an embodiment of the present invention further provides a system for quickly establishing same-screen interaction based on a web page, the system being used in a web client, and the system comprising:

[0138] The creation module 101 is configured to generate a same-screen interaction creation request based on one or more of the creator information, the target website information for creating the same-screen interaction, the browser information, and the same-screen interaction setting information; and is further configured to generate an entry link for the visitor to enter the same-screen interaction;

[0139] A loading module 102 is configured to load the same-screen interaction control components, including one or more of an operation permission control component, a graffiti control component, an audio and video control component, a same-screen interaction process control component, a same-screen interaction process recording component, a same-screen interaction status information display component, and a same-screen interaction user information display component;

[0140] The communication module 103 is configured to establish a communication connection with the server, including sending a same-screen interaction creation request, querying the same-screen interaction service, receiving same-screen interaction service information, and sending and receiving same-screen interaction data;

[0141] The control module 104 is configured to execute the operation authority allocation and control the same-screen interaction process;

[0142] Graffiti module 105, configured to execute graffiti drawing, collect graffiti data, and execute drawing based on the graffiti data;

[0143] Audio and video module 106, configured to collect, send, receive, and play audio and video data, including audio and video playback control;

[0144] The data acquisition module 107 is configured to collect one or more of web page operation instruction data, web page content data or differentiated web page data, web page display content or image data or drawing data generated by changed web page display content, drawing data generated by graffiti-based Canvas elements, audio data, and video data to generate same-screen interaction data. It also includes collecting the occurrence time information corresponding to the same-screen interaction data, and storing the same-screen interaction data and the corresponding occurrence time information in a structured manner to generate a same-screen interaction data record.

[0145] Optionally, the loading module 102 also generates and updates on-screen status information, such as the number of participants. Optionally, the creation module 101, while generating an entry link for visitors to enter the on-screen interaction, also generates on-screen interaction status information corresponding to the entry link, such as the number of people currently participating in the on-screen interaction. Optionally, the creation module 101 is further configured to generate an entry and corresponding status information on the parent page of the webpage corresponding to the URL based on the webpage structure information contained in the website.

[0146] In a possible implementation scenario, an embodiment of the present invention provides a system for quickly establishing same-screen interaction based on a web page, wherein the creation module 101 also includes, based on the target URL, obtaining corresponding playback record data from the server, and generating an entry link for visitors to perform playback; the system also includes a recording module 108, which records one or more of the same-screen interaction data, same-screen control data, audio and video data, and the corresponding occurrence time information sent or received by the web client participating in the interaction, and generates a same-screen interaction data record by storing the data collected during a same-screen interaction process and the corresponding occurrence time information in a structured manner; the system also includes a playback module 109, which performs corresponding same-screen interaction process playback based on the same-screen interaction data record.

[0147] The following is an example explanation and elaboration based on a specific application scenario of a system:

[0148] refer to Figure 11 As shown, there is a web page A on the web client. After user A enters the browser, he clicks the "Create Communication" function button configured on the browsing interface of web page A, and then sends a same-screen interaction creation request to the server. The same-screen interaction creation request sent includes but is not limited to one or more of the relevant information of user A, the URL information of web page A, browser information, and same-screen interaction setting information. That is, the information carried by the same-screen interaction creation request can tell the server "which user creates the same-screen interaction service based on which URL request, and based on what configuration the same-screen interaction service and the client same-screen interaction components are set."

[0149] After the server receives the same-screen interaction creation request sent by user A on web page A, it parses the data information contained therein and creates a same-screen interaction service based on the information on the server. That is, the server creates and starts a same-screen interaction service for a certain user for a certain URL. In essence, each time a same-screen interaction service is started, it is equivalent to creating a room for communication, providing its participants with instant and synchronous communication services. In addition, the same-screen interaction service is created on the server, and identification information of the same-screen interaction service is generated at the same time, such as the same-screen interaction service ID, the same-screen interaction service identifier (such as an identifier generated using the creator identifier + URL + creation time), etc. After the server completes the above creation and starts the same-screen interaction service, it sends a creation completion notification or a same-screen interaction connection to user A's web client (optionally, including a web client browsing web page A or associated with web page A). The same-screen interaction connection is used to connect to the same-screen interaction service, such as including the server URL, same-screen interaction service ID (or same-screen interaction service identifier) ​​and other information in the connection information.

[0150] After user A receives the same-screen interaction creation completion notification or same-screen interaction connection information on web page A, he enters the same-screen interaction based on it and loads the same-screen interaction component on web page A. Figure 12 As shown, the upper left corner displays the user and status information of the same-screen interaction; the video window displays the video information of the host and participants; the audio switch is used to control the opening and closing of the local audio collection; the graffiti button is used to control the opening and closing of graffiti; the process recording button is used to start the recording of the same-screen interaction operation process of the web page; the closing same-screen interaction component is used to close this same-screen interaction.

[0151] After user A successfully creates the same-screen interaction, when other users browse web page A, prompt information and entry information for the same-screen interaction of the web page are generated, such as Figure 14 Alternatively, on the upper level web page B of web page A or on web page C that can jump to web page A, the prompt and entry information for the same screen interaction of web page A can also be generated, such as Figure 15 Schematic diagram. The above entry information is for other visitors to participate in the same-screen interaction. The above implementation method is that when a user browses a web page or website, first, based on the current URL or the included jump URL, the existing same-screen interaction service information is obtained, and the display entry information is set based on the obtained same-screen interaction service information. Optionally, a long connection is established between the web page and the server. When the same-screen interaction service related to the URL stored on the server changes, the same-screen interaction entry information in the web page is updated.

[0152] When a web page viewer, such as user B, visits the above web page A, web page B, or web page C, while loading the web page, he obtains the same-screen interaction service information from the server, and generates a same-screen interaction entry link based on the information obtained. For example, for web page A, there are multiple users who create same-screen interactions based on it, that is, multiple same-screen interaction data can be requested from the server. Therefore, when user B enters the same-screen interaction, he needs to select the same-screen interaction entry, as shown above. Figure 16 As shown, there are three same-screen interactions (i.e., three rooms) for web page A at the same time, and the user selects one of the same-screen interaction entrances to enter the communication.

[0153] After user B selects the same-screen interaction service (corresponding to a same-screen interaction entry link) to enter, he first sends a request to the server based on the identification information of the same-screen interaction service to obtain the same-screen interaction initialization data, based on which the local same-screen interaction environment is initialized. The data obtained includes but is not limited to one or more of the following: same-screen interaction environment configuration data, current web browsing status data, web content data, web content image data, graffiti data, current web audio and video communication connection information, etc. Among them, the same-screen interaction environment configuration data is used to generate the same-screen interaction environment of user B's web page. After user B enters the same-screen interaction, he also needs to load the same-screen interaction component in his web page A. Refer to Figure 17 As shown, it should be noted that the roles of user B and user A in the same-screen interaction process may be different. Therefore, the loaded same-screen interaction components may be different. For example, user A has host-related components, such as user A has a close same-screen interaction component, etc., and user B has an exit same-screen interaction component, etc. It should also be noted that the same-screen interaction configuration data also includes some configuration information such as web page size and font. Due to differences in the devices, browsers, etc. of the communication participants and the host, these differences will affect the same-screen effect during the same-screen interaction of the web page. Therefore, this part of information needs to be included for setting; the current web page browsing status data indicates the changes that have occurred from the first entry to the current browsing status of the web page. For example, the host user A organizes the same screen, and users enter and participate in turn. When user B enters, some communicators have already made some changes to the web page, such as sliding position, cursor position, etc. This part of the data needs to be synchronized after user B enters; in addition, after the above-mentioned participating users enter in turn, the operations performed on the web page during the same-screen process, such as filling in form content, graffiti, etc., will cause the content of the web page to change. Therefore, after user B enters, it is necessary to make settings based on the above data to keep it synchronized with other communicators.

[0154] After user A and user B enter the same-screen interaction, only one user has the operation authority for browsing and operating the original web page at the same time. When the user with control rights performs an operation on the web page, the synchronous data is sent to the other communication parties. Depending on the method used for web page synchronization, the way of collecting and sending data is also different, such as the following methods: A. Synchronizing web pages by synchronizing web page content data, that is, the operator sends the generated web page content data or differentiated web page data to the controlled party, and the controlled party achieves web page synchronization by updating local web page data; B. One party sends web page screen image data or differentiated web page screen image data to other parties, and the other party performs display based on the image data to achieve web page display screen synchronization. This method only displays the real web page content, that is, the original web page code, on one party, and the other party displays it in the form of an image; C. Based on the above B method of synchronizing image data, a method of transmitting drawing instructions can also be evolved, that is, transmitting drawing instructions for drawing web page screens, and the other party performs drawing based on the received drawing instructions to obtain the same display effect; D. Web page synchronization is achieved by collecting and sending web page operation instructions on the operating end, that is, when a web page operation occurs on the operating end, such as a button click, the operation is collected to form a web page operation instruction and sent, and the instruction is executed accordingly through JS on the other end to obtain the same effect as the button onclick event triggered by the operating end.

[0155] In the above steps, in addition to synchronizing browsing and operating data for the original web page, the sending and receiving of audio data, video data, and graffiti data are also optional. Graffiti data can be treated as a type of web page data for processing, while audio and video data generally use independent communication channels. Furthermore, during the same-screen interaction of web pages, the data sent and received also includes control data for the same-screen interaction process, which is used to control control permissions, audio switches, video switches, graffiti switches, recording switches, and so on during the communication process. For example, after user A turns off the audio, the user end where he is located stops collecting audio data and simultaneously sends the audio-off status information to other ends, so that other users know that user A has muted or stopped speaking.

[0156] During the same-screen interaction, when one party starts graffiti through the graffiti control component, a Canvas element for graffiti is created in the web page (such as Figure 13), the Canvas element is located on top of the original web page content (such as by setting the stacking order of the Canvas element through the z-index attribute to make it on the top layer). After graffiti is turned on, the current same-screen interaction enters graffiti mode. In this mode, all user operation events on the original web page will be blocked, that is, in graffiti mode, other web page operations not related to graffiti will be monitored and intercepted. After the user clicks "Exit Graffiti" to exit graffiti mode, the interception of other web page operations not related to graffiti will be canceled. It should be noted that the graffiti working mode can choose to synchronize all users participating in the same-screen interaction, that is, when one user switches to graffiti working mode, all users enter graffiti working mode to prevent one user from performing graffiti while another user performs web page operations, causing interaction confusion. Optionally, in graffiti mode, graffiti-related tool components are also included, such as line thickness, shape, graffiti color settings and other components.

[0157] During the same-screen interaction process, the process recording button is used to start the same-screen interaction operation process recording. When it is turned on, one or more of the web operation instruction data, web content data, differentiated web data content, web display content on the web side or changed web display content to generate image data, drawing data generated by the Canvas element based on graffiti, audio data, and video data sent and received by the web terminals participating in the communication are collected, and the same-screen interaction data record is generated according to structured storage.

[0158] During the same-screen interaction, User B can choose to exit the communication component and exit the interaction. During the same-screen interaction, User A can close the communication component and send a notification to the server to close the interaction. Optionally, a notification can be sent to other web clients participating in the interaction. When the interaction is closed, all users participating in the interaction enter the normal browsing state of Webpage A.

[0159] The above steps describe a process of establishing same-screen interaction for multiple users based on a web page. However, in Internet business, communication and operations through the Internet often involve important communication, transactions, and other behaviors. Recording the communication process between users is particularly important. Based on this, on the basis of the above steps, this application also provides a method for recording the same-screen interaction process. The following example illustrates:

[0160] After establishing a communication connection between the web client participating in the same-screen interaction and the same-screen interaction server, it also includes collecting one or more of the web operation instruction data, web content data, differentiated web data content, image data or drawing data generated based on the display content or changed display content of the web terminal, drawing data or image data generated based on the Canvas element of graffiti, audio data, and video data sent and received by the web terminal, and generating same-screen interaction data records according to structured storage. The above collected data can be achieved through client collection or server collection, and the collected content includes one or more of time information, operator information, operation terminal information, and data information.

[0161] The above-generated same-screen interaction data records are stored in correspondence with one or more of the corresponding URLs, web page version information (obtainable from the web page request header), and participant information to generate playback data records. The playback data records are mainly used to restore the overall process of same-screen interaction.

[0162] The playback data record is stored in the server database. When the user visits a web page and executes the web page loading, the corresponding playback data record is obtained from the server (such as by querying the URL or web page version), and the data record is displayed on the web page or at the web page link entrance, such as Figure 18 When there are multiple playback data records, click "View" and select one of the playback data records, such as Figure 19 Indicates that a request is sent to the server to obtain the corresponding same-screen interaction data record and perform playback of the same-screen interaction process.

[0163] After entering the communication process playback, set the web page to enter the playback state and generate relevant playback control components. Figure 20 As shown, the playback progress control, pause, fast forward, rewind, etc., as well as the exit playback button are included. In the playback state, the user's operations on the original web page content will be intercepted (for example, by setting up a monitoring function within the web page, and executing the interception process when the user's operations on the original web page content are monitored). When the exit playback is clicked, the relevant playback components are hidden or removed, and the interception of the user's operations on the original web page is stopped, that is, the web page returns to the normal browsing state.

[0164] Through the above implementation, on the one hand, the process of users interacting on the same screen and operating web pages can be recorded to generate communication evidence; on the other hand, the purpose is that, for example, a single user performs example operations or browses a web page and generates data for playback. Other users can obtain the process of web page browsing and operation by watching the playback, which can be used for browsing guidance, operation examples, etc., which is similar to providing a new form of web page operation help. In addition, it contains audio and video, and has a multimedia explanation effect. In addition, the beneficial effects of the communication, explanation, etc. recorded in this way also include that its playback effect is similar to that of video, but because the data is recorded in the way of recording the web page operation process data, the amount of recorded data is small enough and easy to store. Because the playback is performed by restoring the web page browsing and operation process in the browser, the picture is completely intact. In addition, when the web page version is consistent, the web page elements currently loaded on the web page can be used, and the content contained in the same-screen interaction data record can be used as a playback script to control the web page elements to complete the playback, saving network traffic.

[0165] In the above embodiment of performing web page same-screen interaction, generation and execution playback, in the specific implementation, it is preferred to introduce the JS library into the web page to achieve it, refer to Figure 21 A schematic diagram of the internal structure of a web page is shown, in which the web page includes a same-screen interaction JS library 211, that is, one or more JS libraries introduced, wherein the JS library includes one or more functions of generating a same-screen interaction creation request, receiving a same-screen interaction service creation completion notification or connection, generating a same-screen interaction environment, establishing a communication connection with the same-screen interaction service, sending and receiving same-screen interaction data, generating an entry link in the web page, generating a graffiti component, generating drawing data based on graffiti, establishing audio and video communication, controlling audio and video communication, collecting same-screen interaction data, same-screen interaction process control, generating same-screen interaction data records, generating playback data, generating playback components, and executing playback. In addition, the web page includes a same-screen interaction configuration 212 module, which configures the web page accordingly, such as configuring the path of the server, configuring the display position of the same-screen interaction entrance, communication keys, etc. (optionally, the server includes configuration information, such as configuring the URL that can create the same-screen interaction service, the hierarchical relationship and jump relationship of the web pages in the website, etc.). Based on the above, the rapid implementation of this application can be achieved without changing the original web page content 213. It should be noted that the configuration method of the above same-screen interaction configuration 212 module is not unique. For example, the hierarchical relationship and jump relationship of the web pages in the website are not configured in the 212 module, but the configuration is automatically identified and generated through the web page code in the website.

[0166] It should also be noted that the above embodiment takes a single web page same-screen interaction as an example. In actual implementation scenarios, same-screen interaction can be established based on multiple web pages that can jump to each other, as well as the entire website.

[0167] The above description is merely a specific implementation of the embodiments of the present application, but the scope of protection of the embodiments of the present application is not limited thereto. Any changes or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in the embodiments of the present application should be included in the scope of protection of the embodiments of the present application. Therefore, the scope of protection of the embodiments of the present application should be based on the scope of protection of the claims.

Claims

1. A method for quickly establishing same-screen interaction based on a web page, the method being applied to a web client, characterized in that: include: Receiving a trigger signal from a first function button configured on a web browsing interface of a web client, and sending a same-screen interaction creation request to a server after receiving the trigger signal, wherein data of the same-screen interaction creation request includes at least one of creator information, target website information for performing the same-screen interaction, browser information, and same-screen interaction setting information, wherein the server is configured to receive the same-screen interaction creation request sent by the web client, create a same-screen interaction service based on the same, and generate corresponding same-screen interaction connection information, wherein the same-screen interaction connection information provides a service connection for the web client participating in the corresponding same-screen interaction, and has a one-to-one relationship with the target website information for creating the same-screen interaction; Receiving the same-screen interaction connection information, or obtaining the same-screen interaction connection information from a server based on the currently browsed URL; generating an entry link for entering the same-screen interaction based on the same-screen interaction connection information, wherein the entry link is generated by generating the entry link within a webpage corresponding to a target URL of the same-screen interaction, or generating the entry link within a webpage associated with the webpage corresponding to the target URL of the same-screen interaction based on a browsing jump relationship between webpages within a website; Establishing a communication connection between the web client and the same-screen interaction service based on the same-screen interaction connection information; A web client with operating authority listens to web page operations, collects data based on the nature of the web page operations, generates same-screen interaction data of the corresponding type, and sends it to the server; a web client without operating authority receives the same-screen interaction data sent by the server, and executes web page operations of the corresponding nature on the web client based on the type of the received same-screen interaction data, so as to realize same-screen interaction with a web client with operating authority.

2. The method according to claim 1, wherein After the creator or visitor of the same-screen interaction enters the same-screen interaction, it also includes loading the same-screen interaction control component on the web client of the creator or visitor, and the same-screen interaction control component includes at least one of an operation permission control component, a graffiti control component, an audio and video control component, a same-screen interaction process control component, a same-screen interaction process recording component, a same-screen interaction status information display component, and a same-screen interaction user information display component.

3. The method according to claim 1, wherein During the same-screen interaction process, the web client collects the same-screen interaction data and sends it to the server, and receives the same-screen interaction data sent by the server to perform web page operations of corresponding nature, including the following methods: On a web client with operation authority, data is collected based on the web operations performed by the user to generate web operation instruction data, and the web operation instruction data is sent as same-screen interaction data; on a web client without operation authority, the web operation instruction data sent by the server is received, and the web operation instructions contained therein are executed to restore the web operation performed by the web client with operation authority; On a web client with operation authority, monitor the changes of web page data content, collect web page content data or differentiated web page data content and send it as same-screen interactive data; on a web client without operation authority, receive the web page content data sent by the server, and update or replace the web page data content of the web client based on the web client, so that the web page data is consistent with that of the web client with operation authority; On a web client with operating authority, image data and / or drawing instructions are generated based on the web page display content or the changed web page display content, and the image data and / or drawing instructions are sent as same-screen interactive data; on a web client without operating authority, the image data and / or drawing instructions sent by the server are received, and based on the data, images are displayed or drawn, or images are replaced on the web client, so that the web page display content is consistent with that of the web client with operating authority.

4. The method according to claim 2, wherein Loading a graffiti control component on a web client that enters same-screen interaction, specifically, the graffiti control component includes at least a graffiti switch component. When the graffiti switch component is turned on, it controls all web clients participating in the interaction to enter a graffiti operation state, generates a Canvas element for graffiti within its web page, and intercepts other web page operations unrelated to the graffiti operation. When a graffiti operation occurs, generating drawing data based on the drawing operation occurring on the Canvas element, and sending the drawing data as the same-screen interaction data to the server; further comprising receiving the drawing data sent by the server, and performing a drawing operation on the Canvas element based on the drawing data; When the graffiti switch component is closed, the Canvas element is hidden or deleted, interception of other web page operations unrelated to the graffiti operation is abandoned, and all web page clients participating in the interaction are controlled to exit the graffiti operation state.

5. The method according to claim 2, wherein The creator or visitor of the same-screen interaction loads the audio and video control component after entering the same-screen interaction. Specifically, the audio and video control component is used to realize the acquisition, playback, and control of audio and video, including one or more of a sound playback switch, a microphone switch, a video playback switch, a video acquisition switch, and a switching switch between audio and video. It also includes, while loading the audio and video control component, establishing audio and / or video communication between the web clients participating in the same-screen interaction service.

6. The method according to claim 1, wherein After establishing a connection between the web client participating in the interaction and the same-screen interaction service based on the same-screen interaction connection information, it also includes recording one or more of the same-screen interaction data, same-screen control data, audio and video data, and the corresponding occurrence time information sent or received by the web client participating in the interaction, and storing the data collected during a same-screen interaction process and the corresponding occurrence time information in a structured manner to generate a same-screen interaction data record, and adding a data index to the same-screen interaction data record. The same-screen interaction data record is used for playback of the same-screen interaction process, and the data index includes one or more of the target URL information, web page data, web page version information, and participant information corresponding to the same-screen interaction.

7. The method according to claim 6, wherein The web client also includes sending a query request to the server to obtain the same-screen interaction data record related to the current URL, generating and displaying an entry link for playback based on it, so that other visitors can obtain the corresponding same-screen interaction data record through the entry link and perform playback of the corresponding same-screen interaction process.

8. A system for quickly establishing same-screen interaction based on a web page, the system being used for a web client, characterized in that: The system comprises: A creation module, configured to generate a same-screen interaction creation request based on one or more of creator information, target URL information, browser information, and same-screen interaction setting information; further configured to receive a trigger signal from a first function button configured on a web browsing interface of a web client, and send the same-screen interaction creation request to a server; further configured to receive same-screen interaction connection information, or to obtain same-screen interaction connection information from a server based on a currently browsed URL; and further configured to generate an entry link for a visitor to enter the same-screen interaction; A loading module for loading the same-screen interaction control components, including one or more of an operation permission control component, a graffiti control component, an audio and video control component, a same-screen interaction process control component, a same-screen interaction process recording component, a same-screen interaction status information display component, and a same-screen interaction user information display component; A communication module is used to establish a communication connection with the server, including sending a same-screen interaction creation request, querying the same-screen interaction service, receiving same-screen interaction service information, and sending and receiving same-screen interaction data; The control module is used to execute the operation authority allocation and control the same-screen interaction process; Graffiti module, used to execute graffiti drawing, collect graffiti data, and execute drawing based on graffiti data; Audio and video module, used to collect, send, receive, and play audio and video data, including audio and video playback control; The data acquisition module is used to collect one or more of web page operation instruction data, web page content data or differentiated web page data, image data or drawing data generated by web page display content, graffiti drawing data, audio data, and video data to generate same-screen interaction data.

9. The system for quickly establishing same-screen interaction based on a web page as claimed in claim 8, characterized in that: The web client further includes: The creation module further includes, based on the target website, obtaining corresponding playback record data from the server and generating an entry link for the visitor to perform playback; A recording module records one or more of the same-screen interaction data, same-screen control data, and audio and video data sent or received by the web client participating in the interaction, as well as the corresponding occurrence time information, and generates a same-screen interaction data record by storing the data collected during a same-screen interaction process and the corresponding occurrence time information in a structured manner; The playback module performs playback of the corresponding on-screen interaction process based on the on-screen interaction data record.

Images