CN113868573A

CN113868573A - Method and system for quickly establishing one-screen interaction based on webpage

Info

Publication number: CN113868573A
Application number: CN202111030419.8A
Authority: CN
Inventors: 路九阳
Original assignee: Qingdao Hope Bird Technology Co ltd
Current assignee: Qingdao Hope Bird Technology Co ltd
Priority date: 2021-09-07
Filing date: 2021-09-07
Publication date: 2021-12-31

Abstract

The application provides a method and a system for quickly establishing one-screen interaction based on a webpage, and belongs to the technical field of internet communication. The method comprises the steps that a webpage client side initiates a co-screen interaction creating request and sends the co-screen interaction creating request to a server side, the server side receives the co-screen interaction creating request and creates a co-screen interaction service based on the co-screen interaction creating request, corresponding co-screen interaction connection information is generated, a plurality of webpage client sides establish webpage co-screen interaction based on the co-screen interaction connection information, webpage operation of an operator webpage is monitored, and co-screen interaction data are collected based on the operation and sent to the server side; and receiving the same-screen interaction data sent by the server by other webpage clients, and executing corresponding webpage operation to realize the same-screen interaction among a plurality of webpage clients browsing the same website. Therefore, the method and the device realize the quick establishment of the same-screen interaction based on the webpage, including webpage browsing, operation and the like, increase a new communication and browsing mode for the webpage, improve the communication efficiency and improve the user experience.

Description

Method and system for quickly establishing one-screen interaction based on webpage

Technical Field

The invention relates to the technical field of internet communication, in particular to a method and a system for quickly establishing one-screen interaction based on a webpage.

Background

The web page is the most common existing tool for man-machine communication, and people can quickly know information resources, work on the internet, operate business and the like through the web page. In the existing website or webpage technology, a user accesses a webpage through websites, link skip and other modes to unilaterally browse and read or operate the webpage, but with the gradual online business, the real-time online communication requirement for webpage content is greater and greater, for example, a company makes a company website, company introduction and company products are placed in the website, a client accesses the company website through the websites, and customer service staff keep online at the same time, but cannot directly communicate with the client.

In some existing communication technologies, an instant chat communication tool is set in a website, on one hand, frequent popping up of a chat request dialog box affects the overall browsing effect of the website, and on the other hand, a customer service communicates with a customer through the instant chat tool, even if the website content is ready, the website content cannot be used as a communication carrier, so that the problems of incapability of establishing real-time contact with the customer, low communication efficiency, poor effect and the like are caused. Therefore, it is desirable to provide a method for establishing communication quickly based on web pages (websites), so as to solve the above problems.

Disclosure of Invention

Aiming at the problems, the invention provides a method and a system for quickly establishing the same-screen interaction based on a webpage (or a website), aiming at realizing the quick establishment of the same-screen interaction among a plurality of visitors of the webpage (or the website), comprising the steps of same-screen browsing, same-screen operation, scrawling marks, audio and video communication and the like. The technical scheme provided by the invention is as follows:

in a first aspect, the present application provides a method for quickly establishing a co-screen interaction based on a web page, where the method is used for a web page client, and the method includes:

receiving a trigger signal of a first function button configured on a webpage browsing interface of a webpage client, and sending a co-screen interaction creation request to a server after receiving the trigger signal, wherein data of the co-screen interaction creation request at least comprises creator information, target website information for performing co-screen interaction, browser information and co-screen interaction setting information;

receiving the same-screen interactive connection information, or inquiring and acquiring the same-screen interactive connection information from a server based on the current browsing website;

establishing communication connection between the webpage client and the on-screen interaction service based on the on-screen interaction connection information;

monitoring webpage operation at a webpage client with operation authority, acquiring data according to the property of the webpage operation, generating corresponding type of same-screen interactive data and sending the same-screen interactive data to the server; and receiving the same-screen interaction data sent by the server at the webpage client without the operation authority, and executing the webpage operation with corresponding properties at the webpage client according to the type of the received same-screen interaction data so as to realize the same-screen interaction with the webpage client with the operation authority.

By the method, the JS library for realizing the same-screen interaction creation, control and communication is introduced into the client webpage program, so that the same-screen interaction function is quickly realized under the condition of not changing the original content program of the webpage end.

The method further comprises the steps of receiving the same-screen interaction connection information at a webpage client, or after the same-screen interaction connection information is obtained from a server based on a current browsing website through inquiry, generating an entry link entering the same-screen interaction based on the same-screen interaction connection information, wherein the generation mode of the entry link comprises the steps of generating the entry link in a webpage corresponding to a target website of the same-screen interaction, or generating the entry link in a webpage related to the webpage corresponding to the target website of the same-screen interaction based on a browsing jump relation among the webpages in the website.

By the method, after the same-screen interaction is established by the same-screen interaction creator, the entrance link information is generated for the same-screen interaction creator and the visitor, so that the visitor can quickly participate and enter in the communication.

In a possible implementation manner, after the creator or the visitor of the same-screen interaction enters the same-screen interaction, the method further includes loading a same-screen interaction control component on a webpage client of the creator or the visitor, where the same-screen interaction control component includes at least one of an operation authority control component, a graffiti control component, an audio/video control component, a same-screen interaction process recording component, a same-screen interaction state information display component, and a same-screen interaction user information display component.

By the method, the same-screen interaction environment is generated for the webpage client side entering the same-screen interaction.

In a possible implementation manner, in the process of the same-screen interaction, a web page client that participates in the same-screen interaction collects the same-screen interaction data and sends the same-screen interaction data to a server, and receives the same-screen interaction data sent by the server to execute web page operations with corresponding properties, including but not limited to the following manners:

acquiring data to generate webpage operation instruction data on the basis of webpage operation executed by a user at a webpage client with operation permission, and sending the webpage operation instruction data as same-screen interactive data; receiving webpage operation instruction data sent by the server at a webpage client without operation authority, and executing a webpage operation instruction contained in the webpage operation instruction data to restore webpage operation generated by the webpage client with the operation authority;

monitoring the change of webpage data content at a webpage client with operation authority, and acquiring webpage content data or differentiated webpage data content as same-screen interactive data to be sent; receiving webpage content data sent by the server at a webpage client without operation authority, and updating or replacing the webpage data content of the webpage client based on the webpage content data so as to keep the webpage data consistent with the webpage client with the operation authority;

generating picture data and/or a drawing instruction based on webpage display content or changed webpage display content at a webpage client with operation authority, and sending the picture data and/or the drawing instruction as same-screen interaction data; and receiving picture data and/or drawing instructions sent by the server at the webpage client without the operation authority, and displaying or drawing pictures and replacing the pictures at the webpage based on the picture data and/or the drawing instructions so as to keep the webpage display content consistent with the webpage client with the operation authority.

The method provides a method for executing synchronous display and operation between web pages after web pages (or websites) are established to interact with each other on the same screen, so as to realize the synchronization between the web page terminals in the process of interacting with each other on the same screen.

In a possible implementation manner, a graffiti control part is loaded at a webpage client side entering the same-screen interaction, specifically, the graffiti control part at least comprises a graffiti switch part, when the graffiti switch part is turned on, all webpage client sides participating in the interaction are controlled to enter a graffiti operation state, Canvas elements used for graffiti are generated in a webpage, and other webpage operations irrelevant to the graffiti operation are intercepted; when a doodling operation occurs, generating drawing data based on the drawing operation occurring on the Canvas element, and sending the drawing data serving as the same-screen interaction data to the server; the method also comprises the steps of receiving drawing data sent by the server side and executing drawing operation on the Canvas element based on the drawing data; when the doodle switch part is closed, hiding or deleting the Canvas element, abandoning interception of other webpage operations irrelevant to the doodle operation, and controlling all webpage clients participating in interaction to exit the doodle operation state.

The method provides a method for synchronously scrawling in the process of the same-screen interaction of the webpage (or the website), and provides convenience for communication among all webpage terminals in the process of the same-screen interaction.

In a possible implementation manner, after the creator or visitor of the same-screen interaction enters the same-screen interaction, the method further includes loading an audio/video control component, and establishing audio and/or video communication between the web clients participating in the same-screen interaction service, where the audio/video control component is used to realize acquisition, playing and control of audio/video, and includes one or more of a sound playing switch, a microphone switch, a video playing switch, a video acquisition switch, and a change-over switch between audio and video.

The method provides the audio and video communication and control method in the process of the same-screen interaction of the webpage (or the website), and improves the communication efficiency among the webpage terminals in the same-screen interaction.

In one possible implementation manner, after establishing the connection between the webpage client participating in the interaction and the on-screen interaction service based on the on-screen interaction connection information, also comprises recording one or more of on-screen interaction data, on-screen control data and audio/video data sent or received by the webpage client participating in the interaction, and corresponding occurrence time information, data acquired in one-time on-screen interaction process and the corresponding occurrence time information are stored according to a structure to generate on-screen interaction data records, and adding a data index to the on-screen interactive data record for playback of the on-screen interactive process, the data index comprises one or more of target website information, webpage data, version information contained in a webpage request Header and participant information corresponding to the same-screen interaction.

The implementation mode provides a method for recording and generating the same-screen interaction data by acquiring and recording the data in the same-screen interaction, and realizes storage and evidence storage in the same-screen interaction process.

In a possible implementation manner, at the web page client, the method further includes sending a query request to the server, obtaining the on-screen interaction data record related to the current website, generating and displaying an entry link for playback based on the on-screen interaction data record, so that other visitors obtain the corresponding on-screen interaction data record through the entry link, and executing playback of the corresponding on-screen interaction process.

Through the implementation mode, the playback link is generated at the webpage client, so that a webpage visitor can view the communication process, a new access reading dimension is added for the webpage (or the website), and a layer of content analyzed by the communicator is enriched based on the webpage (or the website).

In another possible implementation manner, a JS library is introduced into the webpage program, and the JS library may include functions for implementing various implementation methods, such as one or more functions of generating a request for creating a co-screen interaction, receiving a notification or connection information for creating a co-screen interaction service, generating a co-screen interaction environment, establishing a communication connection with the co-screen interaction service, sending and receiving co-screen interaction data, generating an entry link in a webpage, generating a doodle component, generating drawing data based on doodle, establishing audio-video communication, controlling the audio-video communication, collecting the co-screen interaction data, generating a co-screen interaction data record, generating playback data, and executing playback.

The implementation mode is beneficial to quickly implementing various methods mentioned in the application under the condition of not changing the original content of the webpage (or the website).

On the other hand, the application provides a system for rapidly establishing on-screen interaction based on a webpage, the system is used for a webpage client, and the system comprises:

the creating module is used for generating a same-screen interaction creating request based on one or more of creator information, target website information for creating same-screen interaction, browser information and same-screen interaction setting information; the system is also used for generating an entrance link for the visitor to enter the same-screen interaction;

the loading module is used for loading the same-screen interaction control component and comprises one or more of an operation authority control component, a doodle control component, an audio and video control component, a same-screen interaction process recording component, a same-screen interaction state information display component and a same-screen interaction user information display component;

the communication module is used for establishing communication connection with the server, and comprises a same-screen interaction establishing request sending, a same-screen interaction service inquiring, a same-screen interaction service information receiving, and a same-screen interaction data sending and receiving;

the control module is used for executing operation authority distribution and controlling the same-screen interaction process;

the scrawling module is used for executing scrawling drawing, collecting scrawling data and executing drawing based on the scrawling data;

the audio and video module is used for acquiring, sending, receiving and playing audio and video data, and comprises audio and video playing control;

the acquisition module is used for acquiring one or more of webpage operation instruction data, webpage content data or differentiated webpage data, picture data or drawing data generated by webpage display content, doodle drawing data, audio data and video data to generate same-screen interactive data.

In a possible implementation manner, the creating module of the system further includes, based on the target website, obtaining a corresponding on-screen interaction data record from the server, and generating an entry link for the visitor to perform playback; the system also comprises a recording module, a display module and a display module, wherein the recording module is used for recording one or more of on-screen interaction data, on-screen control data and audio and video data which are sent or received by the webpage client side participating in interaction and corresponding occurrence time information, and generating on-screen interaction data records according to structured storage of data acquired in one on-screen interaction process and the corresponding occurrence time information; the system also comprises a playback module which executes playback of the corresponding on-screen interaction process based on the on-screen interaction data record.

The invention has at least the following beneficial effects:

the invention provides a method for quickly establishing one-screen interaction based on a webpage, which introduces a JS library for realizing the one-screen interaction on the basis of not changing the original program code of the webpage (or a website) and quickly establishes a one-screen interaction function for the webpage; according to the method and the system, the multiple client sides browsing the same webpage perform screen interaction such as same-screen browsing, synchronous operation and synchronous doodling based on webpage content, interaction among browsers of websites is realized, and a face-to-face communication effect can be achieved; in addition, browsing, operation and explanation data are recorded in the process of same-screen interaction, playback data are recorded and generated, and an explanation and guidance function is added to the website while an operation or communication evidence is formed; the data volume transmitted or recorded by the method is extremely small, and the transmission and storage are convenient; the playback image quality is high. Therefore, a new communication and browsing mode is added to the webpage, communication efficiency is improved, and user experience is improved.

Drawings

Fig. 1 is a schematic flowchart of a method for quickly establishing a one-screen interaction based on a web page according to an embodiment of the present application;

FIG. 2 is a schematic flowchart of a method for quickly establishing a one-screen interaction based on a web page according to an embodiment of the present application;

FIG. 3 is a schematic flowchart of a method for quickly establishing a one-screen interaction based on a web page according to an embodiment of the present application;

FIG. 4 is a schematic flowchart illustrating loading of an on-screen interactive component according to an embodiment of the present application;

FIG. 5 is a schematic diagram illustrating corresponding transmission and reception of different types of on-screen interactive data according to an embodiment of the present application;

FIG. 6 is a schematic flow chart illustrating an exemplary implementation of a doodle switch component according to an embodiment of the present disclosure;

fig. 7 is a schematic flowchart of loading an audio/video component according to an embodiment of the present application;

FIG. 8 is a schematic flowchart illustrating a process of generating an on-screen interaction data record according to an embodiment of the present application;

FIG. 9 is a schematic flowchart illustrating playback based on-screen interactive data recording according to an embodiment of the present application;

FIG. 10 is a schematic diagram of a system for quickly establishing a one-screen interaction based on a web page according to an embodiment of the present application;

FIG. 11 is a schematic diagram of an interface for quickly establishing on-screen interaction based on a web page according to an embodiment of the present invention;

FIG. 12 is a schematic diagram of an interface for quickly establishing on-screen interaction based on a web page according to an embodiment of the present invention;

FIG. 13 is a schematic diagram of an interface for quickly establishing on-screen interaction based on a web page according to an embodiment of the present invention;

FIG. 14 is a schematic diagram of an interface for quickly establishing on-screen interaction based on a web page according to an embodiment of the present invention;

FIG. 15 is a schematic diagram of an interface for quickly establishing on-screen interaction based on a web page according to an embodiment of the present invention;

FIG. 16 is a schematic diagram of an interface for quickly establishing on-screen interaction based on a web page according to an embodiment of the present invention;

FIG. 17 is a schematic diagram of an interface for quickly establishing on-screen interaction based on a web page according to an embodiment of the present invention;

FIG. 18 is a schematic diagram of an interface for quickly establishing on-screen interaction based on a web page according to an embodiment of the present invention;

FIG. 19 is a schematic diagram of an interface for quickly establishing on-screen interaction based on a web page according to an embodiment of the present invention;

FIG. 20 is a schematic diagram of an interface for quickly establishing on-screen interaction based on a web page according to an embodiment of the present invention;

fig. 21 is a schematic diagram of an internal structure of a web page according to an embodiment of the present invention.

Detailed Description

The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.

The embodiment of the invention provides a method for quickly establishing one-screen interaction based on a webpage, which aims to establish one-screen interaction among a plurality of webpage clients browsing the same webpage, and specifically refers to the following steps:

s101, receiving a trigger signal of a first function button configured on a webpage browsing interface of a webpage client, and sending a co-screen interactive service creation request to a server;

the method comprises the steps of creating on-screen interaction at a certain webpage client, sending an on-screen interaction service creation request to a server, wherein the sent information comprises but is not limited to one or more of creator information, target website information for on-screen interaction, browser information and on-screen interaction setting information, after the server receives the on-screen interaction service creation request, creating on-screen interaction service based on the on-screen interaction service creation request, generating corresponding on-screen interaction connection, providing service connection for the webpage clients participating in the corresponding on-screen interaction, and enabling the on-screen interaction service creation request to be in one-to-one relation with the target website information for on-screen interaction creation. Preferably, the same-screen interactive connection is generated at the server, and the service is started at the same time, so that the same-screen interactive service corresponding to the connection is provided for the client. According to the above, the on-screen interactive service is similar to a room for communication, and the connection information is similar to a room address. It should be noted that the server mentioned in the present application generally includes a co-screen interaction service creation module, a co-screen interaction service management module, and a communication service module, where the co-screen interaction service creation module is configured to create a co-screen interaction service based on a co-screen interaction creation request; the on-screen interactive service management module is used for registering on-screen interactive services, generating on-screen interactive connections, logging out and inquiring on the on-screen interactive services, and searching and providing corresponding on-screen interactive connections in a server database when receiving on-screen interactive connection inquiry requests sent by a client; the data communication service module is used for receiving the on-screen interaction creating request, sending the on-screen interaction connection or creating completion notification, and sending and receiving on-screen interaction data. It should be noted that, for the same web address, different web clients may create one or more same-screen interactive services based on the web client at the same time or different times, that is, one or more communication rooms may be created similarly for the same web address.

S102, receiving on-screen interactive connection information or on-screen interactive service creation completion notification sent by a server;

specifically, the step includes two implementation modes: the server pushes the webpage client, or the webpage client actively queries and acquires the webpage client from the server.

S103, connecting the same-screen interaction service and entering the same-screen interaction;

the method comprises the steps of establishing communication connection between a webpage client and corresponding on-screen interaction services based on-screen interaction connection information, and enabling the webpage client to enter an on-screen interaction state.

S1041, collecting webpage operation data, generating same-screen interaction data and sending the same-screen interaction data;

and S1042, receiving the same-screen interactive data, and restoring the webpage operation.

In the two steps, S1041 monitors the webpage operation at the webpage client with the operation authority, collects data according to the property of the webpage operation, generates the same-screen interactive data of the corresponding type, and sends the same-screen interactive data to the server; s1042 receives the same-screen interactive data sent by the server at the webpage client without the operation authority, and executes the webpage operation with the corresponding property according to the type of the received same-screen interactive data so as to realize the webpage synchronization with the webpage client with the operation authority. It should be noted that the web page operations in the above steps include, but are not limited to, operations performed by a user, web page program running events, web page content changes, web page display changes, and the like, where the user operations include operations such as sliding, dragging, clicking, inputting, and the like. In addition, in a general case, only one web page client side has an operation right at the same time, but a case where a plurality of client sides have the operation right at the same time also exists, for example, in a graffiti interaction mode, a plurality of users can simultaneously perform graffiti drawing.

In the embodiment, the on-screen interaction creating request is initiated at one webpage client, so that on-screen interaction among a plurality of webpage clients based on the specified website is realized, a new communication function is provided for the webpage, a browser can conveniently perform communication aiming at the content of the webpage, and the communication efficiency is improved.

After the server side of the above embodiment starts the on-screen interaction service and generates the on-screen interaction connection, in order to facilitate other browsers to enter the on-screen interaction, an entry link needs to be correspondingly generated in a webpage browsed by the user, please refer to fig. 2, which is as follows:

s201, receiving the same-screen interactive connection information in a current browsed webpage, or inquiring and acquiring the same-screen interactive connection information from a server side based on a current browsed website;

s202, generating an entrance link entering the same-screen interaction based on the same-screen interaction connection information;

s203, clicking an entrance link, connecting the same-screen interaction service, and entering the same-screen interaction;

s2041, collecting webpage operation data, generating same-screen interaction data and sending the same-screen interaction data;

and S2042, receiving the same-screen interactive data, and restoring the webpage operation.

The method comprises the steps of S201, two ways of obtaining the same-screen interactive connection, obtaining the corresponding same-screen interactive connection from a server side based on the current browsing website, or calculating a target webpage which can be directly or indirectly jumped to the current browsing webpage based on the browsing or jumping relation among the webpages in the website, searching for the same-screen interactive service related to the target webpage, obtaining the corresponding same-screen interactive connection, generating an entry link through S202, and entering the same-screen interaction through S203. S2041 and S2042 in this embodiment are substantially the same as S1041 and S1042 in the previous embodiment, and are not described herein again.

The embodiment provides a mode for creating the same-screen interaction entrance and entering the same-screen interaction for the user browsing the webpage, so that the user can conveniently acquire the currently-performed same-screen interaction in real time and select to enter the same-screen interaction in the process of browsing the webpage.

In a specific implementation scenario of the present application, one of the web page clients initiates creation of a co-screen interaction, and the other web page clients participate in the co-screen interaction, and preferably, the web page terminals communicate with each other through the server, referring to a flow diagram shown in fig. 3, the main steps are as follows:

at the web client 1:

s301, generating a request for establishing the same-screen interactive service;

at the server side:

s302, establishing a same-screen interaction service;

s303, generating same-screen interactive connection information and starting same-screen interactive service;

s304, receiving the same-screen interaction data and sending the same-screen interaction data to other webpage clients participating in interaction;

at the web client 1:

s305, receiving the same-screen interaction connection information or the same-screen interaction creation completion notification information, and entering the same-screen interaction;

s3071, collecting webpage operation data to generate same-screen interaction data;

s3072, receiving the same-screen interactive data, and restoring webpage operation;

at the web client 2:

s306, receiving the same-screen interaction connection information, generating an entrance link, and entering the same-screen interaction through the entrance link;

s3081, acquiring webpage operation data to generate same-screen interaction data;

s3082, receiving the same-screen interactive data, and restoring webpage operation.

The web client 1 creates a terminal for the same-screen interaction, the web client 2 represents a same-screen interaction participant terminal, the two terminals establish communication through the server, after the same-screen interaction service is created in S303, the same-screen interaction service is simultaneously started, and the same-screen interaction connection or notification is sent to the client to enter the same-screen interaction, and S304 realizes the same-screen data interaction between the web clients. It should be particularly noted that, the present application should not be limited by the above implementation of data interaction through the server, and in a possible implementation scenario, the web clients may be implemented by direct communication, for example, a P2P connection is established, the clients first connect to the relay service, and after the relay service is taken, the clients directly communicate with each other, for example, WebRTC is used to perform direct data communication between the clients. In another possible implementation scenario, the web client of the creator is used to replace part or all of the server functions to perform the creation of the on-screen interactive service and provide the on-screen interactive service.

In a possible implementation scenario, after entering the on-screen interaction, the web client initiating or participating in the on-screen interaction first sets an on-screen interaction environment at the web client, and loads an on-screen interaction component, please refer to fig. 4, and the steps are as follows:

s401, connecting the same-screen interaction service and entering the same-screen interaction;

s402, loading a same-screen interaction control component, wherein the same-screen interaction control component comprises one or more of an operation authority control component, a doodle control component, an audio and video control component, a same-screen interaction process recording component, a same-screen interaction state information display component and a same-screen interaction user information display component.

Wherein, the loaded components of the creating client and the participating client in the same screen interaction can be different, for example, the former needs to load the control component related to the host. Optionally, the corresponding on-screen interactive component is loaded according to whether the current client currently has the operation authority. The following illustrates the functions of the components: the operation authority control part comprises functions of control authority application, authorization, transfer, cancellation and the like; the doodle control part comprises doodle opening and doodle closing functions and setting functions of a painting brush, an eraser, a shape and the like, wherein the painting brush setting comprises setting functions of color, thickness and the like; the audio and video control component comprises a sound switch, a microphone switch, a video display component and the like; the same-screen interactive recording part comprises the functions of recording starting, pausing, stopping and the like, recording duration, size display of a recording file and the like; the information display part of the same-screen interaction state comprises information display functions of the number of people participating, the same-screen interaction time length, the scrawling state (scrawling opening state, scrawling closing state) and the like; and the same-screen interactive user information display part displays information such as a creator, a host, an operator, a speaker and the like.

In the embodiment, after the on-screen interaction is carried out, the on-screen interaction component is loaded, the on-screen interaction environment is quickly generated at the webpage client, and the functional support is provided for on-screen interaction, on-screen doodling and audio and video communication based on the webpage.

In a possible implementation scenario, a plurality of clients collect and transmit on-screen interaction data during on-screen interaction, or receive and process on-screen interaction data, please refer to a schematic diagram of fig. 5 illustrating transmission and reception of several different types of on-screen interaction data. Executing step S501 on a webpage client with an operation authority, acquiring data to generate webpage operation instruction data based on webpage operation executed by a user, sending the webpage operation instruction data as same-screen interactive data, executing step S502 on a webpage client without the operation authority, receiving the webpage operation instruction data, and executing a webpage operation instruction contained in the webpage operation instruction data; executing step S503 on a webpage client with an operation authority, monitoring the change of webpage data content, acquiring webpage content data or differentiated webpage data content to be sent as same-screen interactive data, executing step S504 on a webpage client without the operation authority, receiving the webpage content data, and updating or replacing the webpage data content of the webpage client based on the webpage content data; and executing step S505 at the webpage client with the operation authority, generating picture data and/or drawing instructions based on the webpage display content or the changed webpage display content, sending the picture data and/or drawing instructions as the same-screen interaction data, executing step S506 at the webpage client without the operation authority, receiving the picture data and/or drawing instructions, and displaying or drawing pictures or replacing pictures at the webpage client based on the picture data and/or drawing instructions.

In a certain state in the process of the same-screen interaction, one webpage client always exists as a control party of the same-screen interaction aiming at certain webpage operation, other webpage clients serve as controlled parties of the same-screen interaction, and the essence of the same-screen interaction is the behavior of synchronizing the operation and the change of one party to the other party, so that the webpage client with the operation authority is usually taken as a control party and the webpage client without the operation authority is taken as a controlled party in combination with the operation authority in the process of the same-screen interaction. S501 and S502 convert the operation into a webpage operation instruction to be sent by monitoring or collecting the operation executed by the controller, and restore the webpage operation based on the received instruction to realize the same-screen display and operation of the webpage in the controlled party, for example, clicking a button to execute a certain operation in the controller and executing an onclick event of the button in the controlled party through JS, thereby achieving the same execution effect of the two; s503 and S504 realize webpage synchronization by monitoring webpage data changes and synchronizing the webpage data, wherein the webpage data comprises but is not limited to HTML text, CSS codes, JavaScript codes and other contents for webpage rendering, and a webpage content change function such as a MutationObserver is monitored; s505 and S506 realize webpage synchronization by acquiring a final display picture of a webpage, wherein the final display picture is a picture generated after webpage rendering, and the mode can be selected by acquiring picture data and drawing instructions, wherein the drawing instructions are that an instruction set for drawing the picture is generated on the basis of the current display picture at a control party, a canvas element for presentation is constructed at a controlled party, and drawing is executed on the canvas element so as to achieve the effect of on-screen display. Optionally, in a specific implementation scenario, the present application may be implemented in combination with one or more of the above modes.

The method for acquiring, sending, receiving and restoring the same-screen interactive data provided by the embodiment realizes that the webpages of the multiple clients keep a synchronous state in the interactive process, further realizes the effects of same-screen browsing and synchronous operation, and improves the communication quality.

In a possible implementation scenario, a graffiti control component is loaded at a web client entering a co-screen interaction, and the graffiti control is shown in fig. 6, specifically as follows:

the execution steps when the scrawling is opened are as follows:

s601, starting a doodling switch component;

s602, controlling all the web page clients participating in interaction to enter a doodle operation state; generating a Canvas element for graffiti within a web page; intercepting other webpage operations unrelated to the doodling operation;

s603, generating drawing data based on the drawing operation generated on the Canvas element, generating same-screen interactive data and sending the same-screen interactive data; or receiving the same-screen interactive data, analyzing the drawing data, and executing drawing on a Canvas element;

the execution steps when the scribble is closed are as follows:

s604, closing the doodle switch part;

s605, hiding or deleting the Canvas element; abandoning interception of other webpage operations unrelated to the doodling operation; and controlling all the webpage clients participating in the interaction to exit the scrawling operation state.

After the step S602 enters the scrawling operation state, a transparent canvas for scrawling is created on the upper layer of the webpage, and meanwhile, all operations of the user on the original webpage are intercepted, so that the webpage operations are prevented from being influenced by scrawling operation events. Optionally, when the scrawling operation state is entered and exited in S601 and S604, a prompt message for switching the state is displayed on the web page.

The synchronous doodling function provided by the embodiment is more beneficial to content circle points and marks based on the webpage, and effectively improves the communication efficiency.

In a possible implementation scenario, the method further includes, at the same time, executing a web page operation at one web page client, and executing a graffiti work mode at another web page client. In the mode, a Canvas element used for presenting the doodle content is displayed on a webpage client side executing webpage operation, and when the user operation occurs on the Canvas element, the event of the Canvas element is ignored and transmitted to the original webpage element for execution; and executing the scrawling operation at other webpage clients, and intercepting other webpage operations irrelevant to the scrawling operation. The method is beneficial to realizing the communication situation that one party performs operation and other parties perform marking.

In a possible implementation scenario, the av control component is loaded on a web client entering the co-screen interaction, which is shown in fig. 7:

s701, connecting the same-screen interaction service and entering the same-screen interaction;

s702, loading an audio and video control component, and establishing audio and/or video communication among the webpage clients participating in the same-screen interactive service.

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

The embodiment directly establishes audio and video communication based on the webpage client without other audio and video communication tools and plug-ins, so that the same-screen interaction is faster and more efficient.

In another possible implementation scenario, the communication process data is recorded based on the on-screen interaction process, and as shown in fig. 8:

s801, entering one-screen interaction;

s802, recording one or more of on-screen interaction data, on-screen control data and audio/video data sent or received by a webpage client participating in interaction and corresponding occurrence time information, and generating an on-screen interaction data record by data acquired in one on-screen interaction process and the corresponding occurrence time information according to structured storage;

and S803, adding a data index to the same-screen interaction data record.

According to the above embodiment, optionally, in S802, the type of the recording data is configured according to the recording requirement. Optionally, in the recording operation in S802, recording is performed at a web client. Optionally, in the recording operation in S802, the server performs recording based on the received web client data. Preferably, after the on-screen interaction data record is generated, the data record is stored in the server-side database, and the index information of the data record is added through S803. The data index includes, but is not limited to, target website information, web page data, version information contained in a web page request Header, participant information and the like corresponding to the same-screen interaction, and the data index is used for inquiring and acquiring corresponding same-screen interaction data records.

In a possible implementation manner of the above embodiment, based on the on-screen interaction data record in S802 or the data contained in the on-screen interaction data record, playback is performed and a video is generated, or a video is generated by recording in the on-screen interaction process, and the video is stored as the on-screen interaction data record.

The on-screen interaction data record generated by the above embodiment can be used for playback of the on-screen interaction process.

In combination with the above embodiments, in one possible implementation scenario, a message digest is generated by calculation according to the on-screen interaction data record generated in S802 or the data content contained therein (e.g., MD5 operation), and the generated message digest is stored or displayed in the on-screen interaction web page for the participant to take evidence. Further, in the process of the same-screen interaction, after each time of updating of the same-screen interaction data record, recalculating the updated same-screen interaction data record to generate a new message abstract, and storing or displaying the new message abstract in a same-screen interaction webpage so as to store the interaction data in each state of the same-screen interaction process. Further, after the one-screen interaction process is finished, one or more of the message abstract, the identification information of the one-screen interaction and the related index information corresponding to the final one-screen interaction data record are stored by adopting a block chain technology so as to store and prove the whole one-screen interaction process.

In another possible implementation scenario, an entry for viewing playback of the on-screen interaction process is generated in a web page for a browser to access and view, as shown in fig. 9, the specific steps are as follows:

s901, sending a query request to a server side in a current browsed webpage to obtain a co-screen interactive data record related to a current website;

s902, generating and displaying an entrance link for playback based on the same-screen interactive data record;

and S903, clicking the link, acquiring the corresponding on-screen interaction data record, and executing the playback of the corresponding on-screen interaction process.

In step S901, the website carried in the query request includes current website information or a designated website used for querying related on-screen interactive data records, in addition, the returned data records include an array form, that is, may be multiple data records, and correspondingly, the entry link generated in S902 includes a single link and a list link.

The embodiment has the advantages that the explanation and analysis functions are added to the website or the webpage, and the playback provided by the embodiment has a multimedia effect and is more beneficial to the reading and understanding of the website by a browser. In addition, the present embodiment is not limited to the number of people who communicate, and in the case of one person, the generated result is a multimedia explanation of the website content, for example: the website content is filled in a form, the explicator executes form filling operation by creating on-screen interaction, voice explanation is carried out during operation, and after on-screen interaction data records are generated, other visitors learn by playback, so that the method has a helpful effect.

In a preferred implementation scenario, a JS library for implementing the method for quickly establishing on-screen interaction based on a web page according to the above embodiments of the present invention is introduced into a web page program, where the JS library includes: the method comprises the following steps of generating a co-screen interaction creating request, receiving a co-screen interaction service creating completion notice or co-screen interaction connection, generating a co-screen interaction environment, establishing communication connection with a co-screen interaction service terminal, sending and receiving co-screen interaction data, generating a co-screen interaction entry link in a webpage, generating a doodle component, generating drawing data based on doodle, establishing audio and video communication, controlling the audio and video communication, collecting the co-screen interaction data, generating a co-screen interaction data record, executing playback and the like. In the embodiment of the invention, the JS library is introduced into one webpage to configure the connection information of the same-screen interaction server, so that the webpage has the function of the same-screen interaction quickly.

Based on the same inventive concept, as shown in fig. 10, an embodiment of the present invention further provides a system for quickly establishing a co-screen interaction based on a web page, where the system is used for a web page client, and the system includes:

the creating module 101 is configured to generate an on-screen interaction creating request based on one or more of creator information, target website information for creating on-screen interaction, browser information, and on-screen interaction setting information; the system is also used for generating an entrance link for the visitor to enter the same-screen interaction;

the loading module 102 is configured to load a same-screen interaction control component, which includes one or more of an operation authority control component, a graffiti control component, an audio/video control component, a same-screen interaction process recording component, a same-screen interaction state information display component, and a same-screen interaction user information display component;

the communication module 103 is configured to establish communication connection with the server, and comprises sending a request for establishing on-screen interaction, inquiring on-screen interaction service, receiving on-screen interaction service information, and sending and receiving on-screen interaction data;

the control module 104 is configured to execute operation authority distribution and control the same-screen interaction process;

a graffiti module 105 configured to perform graffiti drawing, collect graffiti data, perform drawing based on the graffiti data;

the audio/video module 106 is configured to collect, send, receive and play audio/video data, including audio/video play control;

the data acquisition module 107 is configured to acquire one or more of picture data or drawing data generated by webpage operation instruction data, webpage content data or differentiated webpage data, webpage display content or changed webpage display content, drawing data generated by a Canvas element based on doodling, audio data and video data to generate same-screen interaction data, and further includes acquiring occurrence time information corresponding to the same-screen interaction data, and generating same-screen interaction data records by storing the same-screen interaction data and the corresponding occurrence time information in a structured manner.

Optionally, the loading module 102 further generates and updates the on-screen status information, such as the number of participants. Optionally, the creating module 101 generates an on-screen interaction status information corresponding to the entry link, such as the number of people participating in the on-screen interaction, while generating the entry link through which the visitor enters the on-screen interaction. Optionally, the creating module 101 is further configured to generate an entry and corresponding state information in a higher-level page of a web page corresponding to the website based on the web page structure information included in the website.

In a possible implementation scenario, in the system for quickly establishing the same-screen interaction based on the web page provided by the embodiment of the present invention, the creating module 101 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; the system also comprises a recording module 108, which records one or more of on-screen interaction data, on-screen control data and audio/video data sent or received by the web client participating in the interaction and corresponding occurrence time information, and generates on-screen interaction data records according to structured storage of data acquired in the process of one-time on-screen interaction and the corresponding occurrence time information; the system further comprises a playback module 109 for executing a corresponding on-screen interaction procedure playback based on the on-screen interaction data record.

The following is an exemplary illustration and explanation of a system specific application scenario:

referring to fig. 11, after a web page a exists at a web page client, a user a browses, and then clicks a "create communication" function button configured on a browsing interface of the web page a, and further sends a co-screen interaction creation request to a server, where the sent co-screen interaction creation request includes, but is not limited to, one or more of related information of the user a, website information of the web page a, browser information, and co-screen interaction setting information, that is, information carried by the co-screen interaction creation request may tell the server "which user creates a co-screen interaction service based on which website request, and sets the co-screen interaction service and a client co-screen interaction component based on what configuration.

After receiving a co-screen interaction creating request sent by a user A in a webpage A at a server, analyzing data information contained in the co-screen interaction creating request, creating a co-screen interaction service based on the information at the server, namely creating and starting the co-screen interaction service for the co-screen interaction of a certain website for a certain user at the server, and essentially, creating a room for communication every time one co-screen interaction service is started, so as to provide instant and synchronous communication service for participants of the user. In addition, the same-screen interaction service is created at the server side, and meanwhile, the identification information of the same-screen interaction service is generated, such as a screen interaction service ID, a same-screen interaction service identification (for example, an identification generated by using a creator identification + website address + creation time), and the like. After the server finishes the creation and starts the on-screen interaction service, a creation completion notification is sent or the on-screen interaction connection is connected to the user A webpage client (optionally, the on-screen interaction connection includes browsing the webpage A or the webpage client associated with the webpage A), and the on-screen interaction connection is used for connecting the on-screen interaction service, for example, the connection information includes information such as a server website, an on-screen interaction service ID (or on-screen interaction service identifier) and the like.

After receiving the notification of completion of creation of the on-screen interaction or the on-screen interaction connection information in the webpage A, the user A loads an on-screen interaction component based on entering the on-screen interaction, and displays the information of the user and the state of the on-screen interaction at the upper left corner as shown in the figure 12; the video window displays video information of a host and participants; the audio switch is used for controlling the on and off of the local audio acquisition; the doodle button is used for controlling the opening and closing of the doodle; the process recording button is used for starting the recording of the webpage on-screen interactive operation process; and the on-screen closing interaction part is used for closing the on-screen interaction.

After the user a successfully creates the one-screen interaction, when another user enters the webpage a for browsing, prompt information and entry information for the one-screen interaction of the webpage are generated, as shown in fig. 14, or a previous webpage B of the webpage a or a webpage C capable of jumping to the webpage a can also generate prompt and entry information for the one-screen interaction of the webpage a, as shown in fig. 15. The above portal information allows other visitors to participate in entering the on-screen interaction. When a user browses a webpage or a website, the method comprises the steps of firstly acquiring the existing on-screen interaction service information based on the current website or the contained jump website, and setting display entry information based on the acquired on-screen interaction service information. Optionally, a long connection with the server is established in the web page, and when the on-screen interaction service stored in the server and related to the website is changed, the on-screen interaction entry information in the web page is updated.

When a browser of a web page, such as a user B, accesses the web page a, the web page B, and the web page C, the browser loads the web page and simultaneously acquires the on-screen interaction service information from the server, and generates an on-screen interaction portal link according to the acquired information, for example, for the web page a, there is a case where a plurality of users create on-screen interaction based on the on-screen interaction information, that is, a plurality of pieces of on-screen interaction data can be requested from the server, and therefore, when the user B enters on-screen interaction, an on-screen interaction portal needs to be selected, as shown in fig. 16, 3 on-screen interactions (i.e., 3 rooms) exist for the web page a at the same time, and the user selects one of the on-screen interaction portals to enter in communication.

After a user B selects an on-screen interaction service (corresponding to an on-screen interaction entry link) to enter, firstly, based on identification information of the on-screen interaction service, a request is sent to a server to obtain on-screen interaction initialization data, and a local on-screen interaction environment is initialized based on the on-screen interaction initialization data, wherein the obtained data comprises but is not limited to one or more of the following data: the method comprises the following steps of configuring data of the same-screen interactive environment, current webpage browsing state data, webpage content picture data, scrawling data, current webpage audio and video communication connection information and the like. The same-screen interaction environment configuration data is used for generating a same-screen interaction environment of a web page end of the user b, and after the user b enters the same-screen interaction, the same-screen interaction component needs to be loaded in the web page a, as shown in fig. 17, it needs to be described that roles of the user b and the user a in the same-screen interaction process may be different, so that the loaded same-screen interaction component may have differences, for example, the user a has a host related component, for example, the user a has a closed same-screen interaction component, and the user b has an exit same-screen interaction component. In addition, it should be noted that, in the same-screen interaction configuration data, some configuration information such as the size and font of the web page is also included, and because there is a difference between the communication participant and the host's device, browser, etc., in the same-screen interaction process of the web page, the same-screen effect is affected by the difference, so that the same-screen interaction configuration data needs to include the information for setting; the current webpage browsing state data represents the change of the webpage from the first entering to the current browsing state, for example, a host user A organizes the same screen, the user participates in the webpage in sequence, when a user B enters, some changes, such as a sliding position, a cursor position and the like, are already made on the webpage by an existing communicator, and the partial data needs to be synchronously set after the user B enters; in addition, after the users enter the system in sequence, the content of the web page is changed by operations performed on the web page in the process of the same screen, such as filling in the form content, doodling and the like, so that the user b needs to keep synchronization with other communication persons by setting based on the data after entering the system.

After the user A and the user B enter the same-screen interaction, only one user has the operation authority at the same time aiming at the webpage browsing and operation in the original webpage, and after the user with the control authority performs the operation on the webpage, synchronous data are sent to other communication parties. According to different methods used by the webpage synchronously, the data collection and transmission modes are different, for example, the following modes are adopted: A. the web pages are kept synchronous by a method of synchronizing the web page content data, namely, the operator sends the generated web page content data or differentiated web page data to the controlled party, and the controlled party realizes the web page synchronization by updating the local web page data; B. one party sends picture data of the webpage picture or differentiates the picture data of the webpage picture to other parties, and the other parties execute display based on the picture data to realize webpage display picture synchronization; C. on the basis of synchronizing the picture data in the mode B, a mode of transmitting drawing instructions can be evolved, namely transmitting the drawing instructions for drawing the webpage picture, and drawing on the basis of the received drawing instructions on the other side to obtain the same display effect; D. the webpage synchronization is realized by acquiring and sending the webpage operation instruction at the operation end, namely when the webpage operation occurs at the operation end, such as button clicking, the operation is acquired to form the webpage operation instruction and is sent, and the instruction is correspondingly executed at other ends through JS, so that the effect consistent with the event of triggering the button onclick at the operation end is obtained.

In the above steps, optionally, in addition to synchronization of browsing and operation data for the original webpage, sending and receiving of audio data, video data and graffiti data are also included, wherein the graffiti data can be regarded as webpage data for processing, and the audio and video data generally adopt an independent communication channel. In addition, in the process of the same-screen interaction of the webpage, the sent and received data also comprise control data aiming at the same-screen interaction process, and the control data are used for controlling a control authority, an audio switch, a video switch, a doodle switch, a recording switch and the like in the communication process, for example, after the user A closes the audio, the user side where the user A is located stops collecting the audio data, and meanwhile, state information of closing the audio is sent to other sides, so that other users can learn that the user A is muted or stops speaking.

In the process of the same-screen interaction, when a party opens a graffiti through a graffiti control component, a Canvas element for the graffiti is created in a webpage (as shown by a dotted line in fig. 13), the Canvas element is located at an upper layer of the content of an original webpage (for example, a stacking sequence of the Canvas elements is set through a z-index attribute so that the Canvas element is located at the uppermost layer), after the graffiti is opened, the current same-screen interaction enters a graffiti mode, in the mode, a user monitors and intercepts other webpage operations irrelevant to the graffiti in the graffiti mode aiming at all operation events of the original webpage, after the user clicks the 'exit graffiti' to exit the graffiti mode, the interception of the other webpage operations irrelevant to the graffiti is cancelled, it needs to be noted that the graffiti operation mode can select to keep synchronization for all users participating in the same-screen interaction, that is, one user switches to the graffiti operation mode, and all users enter the graffiti operation mode, in order to prevent one user from performing graffiti, while another user performs webpage operations and leads to interaction confusion, optionally, in the graffiti mode, tool components related to the graffiti are further included, such as components of line thickness, shape, and graffiti color setting.

The method comprises the steps of starting a co-screen interaction operation process recording through a process recording button in the co-screen interaction process, collecting one or more of webpage operation instruction data, webpage content data, differentiated webpage data contents, webpage display contents of a webpage end or changed webpage display contents generated picture data, drawing data generated based on a doodle Canvas element, audio data and video data sent and received by a webpage terminal participating in communication after starting, and generating a co-screen interaction data record according to structural storage.

And the user B can select to quit the communication component through operation in the same-screen interaction process, and quit the same-screen interaction. And in the process of the same-screen interaction, the user A can send a notification of closing the same-screen interaction to the server side through the communication closing component and close the same-screen interaction, optionally, sends a notification of closing the same-screen interaction to other webpage clients participating in the communication, and after the same-screen interaction is closed, all the users participating in the same-screen interaction enter the common browsing state of the webpage A.

Based on the above steps, the present application also provides a method for recording the same-screen interaction process, which is illustrated in the following examples:

after the communication connection is established between the webpage client participating in the same-screen interaction and the same-screen interaction server, the method further comprises the step of acquiring one or more of webpage operation instruction data, webpage content data, differentiated webpage data content, picture data or drawing data generated based on the display content of the webpage or changed display content, drawing data or picture data generated based on a doodle Canvas element, audio data and video data, wherein the drawing data or the picture data, the audio data and the video data are transmitted and received by the webpage terminal, the same-screen interaction data record is generated according to structured storage, the acquired data can be acquired by the client or the server, and the acquired content comprises one or more of time information, operator information, operation terminal information and data information.

And storing the generated same-screen interaction data record and one or more of the corresponding website, webpage version information (obtained from a webpage request Header) and participant information according to the corresponding relation to generate a playback data record, wherein the playback data record is mainly used for restoring the whole process of same-screen interaction.

Storing the playback data record in a server database, when a user accesses a certain webpage and executes webpage loading, acquiring a corresponding playback data record (such as being capable of being acquired by website address and webpage version query) from the server, and displaying the data record in the webpage or at a webpage link entrance, as shown in fig. 18; when a plurality of playback data records exist, clicking 'view' to select one of the playback data records, as shown in fig. 19, sending a request to the server to obtain the corresponding on-screen interaction data record, and executing the playback of the on-screen interaction process.

After entering the playback of the communication process, the web page is set to enter the playback state, and the relevant playback control components are generated, as shown in fig. 20, such as play progress control, pause, fast forward, rewind, and the like, and additionally include an exit playback button. In the playback state, the user's operation on the original webpage content is intercepted (for example, by establishing interception in the webpage, when the user's operation on the original webpage content is intercepted, the interception process is executed). And after the user clicks to quit the playback, hiding or removing the related playback component, and stopping the interception of the user on the original webpage operation, namely, the webpage enters a normal browsing state.

Through the implementation, on one hand, the process of the user interacting with the screen and operating the webpage can be recorded, and the communication evidence is generated; the other aspect is that for example, a single user performs example operation or browsing on the web page to generate data for playback, and other users can obtain the process of web page browsing and operation by viewing playback, and can be used for browsing guidance, operation example and the like, similarly to providing a new form of web page operation help, and additionally including audio and video, and having multimedia narrative effect. In addition, the communication, explanation and the like recorded in the mode also have the advantages that the playing effect is similar to that of a video, but because the data is recorded in the mode of recording the data of the webpage operation process, the recorded data is small enough and easy to store, and because the playback is executed in the mode of restoring the process of webpage browsing and operation in the browser, the picture is completely lossless. In addition, under the condition that the web page versions are consistent, the currently loaded web page elements of the web page can be utilized, the content contained in the same-screen interactive data record is used as a playing script, the web page elements are controlled to complete playback, and the network flow is saved.

In the above embodiment of performing the same-screen interaction, the generation and the execution of the playback of the web page, when the specific implementation is performed, the implementation is preferably implemented by introducing a JS library into the web page, referring to an internal structure schematic diagram of the web page shown in fig. 21, where the web page includes a JS library 211 for performing the same-screen interaction, that is, one or more introduced JS libraries, where the JS library includes the above JS library for performing the same-screen interaction creation request, receiving a notification or connection for completing the creation of the same-screen interaction service, generating a same-screen interaction environment, establishing a communication connection with the same-screen interaction service, sending and receiving the same-screen interaction data, generating an entry link in the web page, generating a doodle component, generating drawing data based on the doodle, establishing audio-video communication, controlling the audio-video communication, collecting the same-screen interaction data, controlling the process of the same-screen interaction, generating a record of the same-screen interaction data, and performing the same-screen interaction, Generating playback data, generating playback components, performing one or more functions of playback. In addition, the web page includes an on-screen interaction configuration module 212, which performs corresponding configuration on the web page, such as configuring a path of the server, configuring a display position of an on-screen interaction entry, and configuring a communication key (optionally, the server includes configuration information, such as configuring a website address capable of creating an on-screen interaction service, a hierarchical relationship and a skip relationship of the web page in the website, and the like). According to the above, the present application can be implemented quickly without changing the original web content 213. It should be particularly noted that the configuration mode of the on-screen interaction configuration 212 module is not unique, and if the hierarchical relationship and the jump relationship of the web pages in the website are not configured in the module 212, the configuration is generated by automatically identifying the web page codes in the website.

It should be noted that, in the above embodiment, a single web page is used as an example for the on-screen interaction, and in an actual implementation scenario, the on-screen interaction may be established based on a plurality of web pages that can jump to each other and the entire website.

The above description is only a specific implementation of the embodiments of the present application, but the scope of the embodiments of the present application is not limited thereto, and any person skilled in the art can easily conceive of changes or substitutions within the technical scope of the embodiments of the present application, and all the changes or substitutions should be covered by the scope of the embodiments of the present application. Therefore, the protection scope of the embodiments of the present application shall be subject to the protection scope of the claims.

Claims

1. A method for quickly establishing one-screen interaction based on a webpage is applied to a webpage client and is characterized by comprising the following steps:

2. The method of claim 1, wherein the receiving the on-screen interaction connection information, or after acquiring the on-screen interaction connection information from a server query based on a current browsing website, further comprises generating an entry link entering the on-screen interaction based on the on-screen interaction connection information, wherein the generation manner of the entry link includes generating an entry link in a webpage corresponding to a target website of the on-screen interaction, or generating an entry link in a webpage associated with a webpage corresponding to the target website of the on-screen interaction based on a browsing jump relationship between webpages in websites.

3. The method of claim 1, wherein after the creator or visitor of the on-screen interaction enters into the on-screen interaction, the method further comprises loading an on-screen interaction control component on a web client of the creator or visitor, wherein the on-screen interaction control component comprises at least one of an operation authority control component, a graffiti control component, an audio/video control component, an on-screen interaction process recording component, an on-screen interaction state information display component and an on-screen interaction user information display component.

4. The method of claim 1, wherein in the process of on-screen interaction, acquiring on-screen interaction data at the webpage client, sending the on-screen interaction data to the server, and receiving the on-screen interaction data sent by the server, and executing webpage operations with corresponding properties, comprises the following modes:

5. The method according to claim 3, characterized in that a graffiti control component is loaded at a webpage client entering the same-screen interaction, specifically, the graffiti control component at least comprises a graffiti switch component, when the graffiti switch component is turned on, all webpage clients participating in the interaction are controlled to enter a graffiti operation state, a Canvas element for graffiti is generated in a webpage, and other webpage operations unrelated to the graffiti operation are intercepted; when a doodling operation occurs, generating drawing data based on the drawing operation occurring on the Canvas element, and sending the drawing data serving as the same-screen interaction data to the server; the method also comprises the steps of receiving drawing data sent by the server side and executing drawing operation on the Canvas element based on the drawing data; when the doodle switch part is closed, hiding or deleting the Canvas element, abandoning interception of other webpage operations irrelevant to the doodle operation, and controlling all webpage clients participating in interaction to exit the doodle operation state.

6. The method according to claim 3, wherein the creator or visitor of the on-screen interaction loads an audio/video control component after entering the on-screen interaction, and specifically, the audio/video control component is used for acquiring, playing and controlling audio/video, and includes one or more of a sound playing switch, a microphone switch, a video playing switch, a video acquisition switch, and a change-over switch between audio and video, and further includes establishing audio and/or video communication between web clients participating in the on-screen interaction service while loading the audio/video control component.

7. The method of claim 1, wherein after establishing a connection between a web client participating in an interaction and the on-screen interaction service based on the on-screen interaction connection information, also comprises recording one or more of on-screen interaction data, on-screen control data and audio/video data sent or received by the webpage client participating in the interaction, and corresponding occurrence time information, data acquired in one-time on-screen interaction process and the corresponding occurrence time information are stored according to a structure to generate on-screen interaction data records, and adding a data index to the on-screen interactive data record for playback of the on-screen interactive process, the data index comprises one or more of target website information, webpage data, webpage version information and participant information corresponding to the same-screen interaction.

8. The method of claim 7, further comprising, at the web page client, sending a query request to the server, obtaining the on-screen interaction data record related to the current web address, generating and displaying a portal link for playback based on the query request, so that other visitors can obtain the corresponding on-screen interaction data record through the portal link, and perform playback of the corresponding on-screen interaction process.

9. A system for quickly establishing on-screen interaction based on a webpage, the system is used for a webpage client, and is characterized in that the system comprises:

the creating module is used for generating a same-screen interaction creating request based on one or more of creator information, target website information, browser information and same-screen interaction setting information; the system is also used for generating an entrance link for the visitor to enter the same-screen interaction;

and the data acquisition module is used for acquiring one or more of webpage operation instruction data, webpage content data or differentiated webpage data, picture data or drawing data generated by webpage display content, doodle drawing data, audio data and video data to generate same-screen interactive data.

10. The system for rapidly establishing on-screen interaction based on web pages according to claim 9, wherein the web page client further comprises:

the creating module also comprises a step of acquiring corresponding playback record data from the server based on the target website to generate an entrance link for the visitor to execute playback;

the recording module is used for recording one or more of on-screen interaction data, on-screen control data and audio/video data which are sent or received by the webpage client side participating in interaction and corresponding occurrence time information, and generating an on-screen interaction data record according to structured storage of data acquired in one on-screen interaction process and the corresponding occurrence time information;

and the playback module executes playback of the corresponding on-screen interaction process based on the on-screen interaction data record.