Technical support implementation method applied to Web application

Abstract

The invention provides a technical support implementation method applied to a Web application, and belongs to the technical field of communication, so that a user can obtain instant and online help and guidance of a technical consultant in the Web application in the process of operating the Web application, and the technical support implementation method specifically comprises the following steps: embedding a first program in the Web application on one side of the user, and receiving a trigger signal of the user by the program to send a technical support request; the technical consultant side comprises a second program, the second program receives and responds to the technical support request, and technical support communication connection is established between the first program and the second program; the first program collects webpage data based on the Web application, generates first synchronous data and sends the first synchronous data; and the second program receives the first synchronous data and obtains the webpage data contained in the first synchronous data, and loads the webpage data in the specified Web container. According to the method, technical support is provided on the basis of remote screen sharing on the two sides, the user experience is improved, and the service quality and the user satisfaction degree of the Web application are remarkably improved.

Description

Technical Field

[0001] The embodiments of the present invention relate to the field of communication technology, and in particular to a method for implementing technical support applied to Web applications. Background Art

[0002] There are many types of Web applications, covering many aspects of social economy, such as ERP (Enterprise Resource Planning), CRM (Customer Relationship Management), OA (Office Automation), SCM (Supply Chain Management Software), etc., which have brought great convenience to people's lives and work. However, the in-depth implementation and continuous maintenance of such applications are accompanied by high cost challenges. On-site support from technical consultants is indispensable, but the high cost of on-site technical support has become one of the burdens of enterprises. Although remote screen technical support can alleviate some cost issues, it often requires users to install additional software, which not only increases the complexity of operation, but may also cause security risks to user computers due to improper permission control, thereby reducing the overall safety factor of the service. Therefore, how to optimize the implementation and maintenance costs of Web applications while ensuring security and efficiency has become an issue that the industry urgently needs to solve. Summary of the invention

[0003] Analyzing the above problems, face-to-face technical support has a very good service effect, and remote screen technical support can clearly see the "site" of users using Web applications, which has a "face-to-face" effect. However, remote screen technical support also has some shortcomings, mainly concentrated in two aspects: First, users are required to install remote screen sharing software in advance: This requirement may bring additional burden to users. Some users may be cautious about installing software and worry about the security or compatibility of the software. In addition, the installation process may also encounter obstacles due to different computer levels or network conditions of users, thereby prolonging the time to solve the problem. Second, the real-time performance is relatively poor: Compared with face-to-face technical support, remote screen technical support has a certain gap in real-time performance. Before starting remote screen sharing, technicians and users usually need to contact each other in advance through communication tools such as telephone and WeChat to confirm the time arrangements and specific needs of technical support. This process may increase waiting time due to poor communication, time dislocation and other reasons, reducing the efficiency of problem solving.

[0004] Further analysis shows that if the Web application itself has the ability to display the same screen remotely, the above two problems can be perfectly solved.

[0005] In a first aspect, the present application provides a new method for implementing technical support for Web applications, the method being applied to a technical support system, the Web application technical support system providing technical support services for users using Web applications, the Web application technical support system comprising a Web application for users to perform business operations, and a technical support terminal for technical consultants, the Web application embeds a first program, the user calls the first program in the Web application to obtain technical support, the technical support terminal comprises a second program, and the technical consultant uses the second program to provide technical support services for the user, the method comprising:

[0006] The first program includes a first button, and in the first program, a trigger signal of the first button by a user is received to send a technical support request;

[0007] At the technical support end, the second program running thereon receives the technical support request, responds to the technical support request and then establishes a technical support communication connection between the first program and the second program;

[0008] In a Web application, a first program collects web page data based on a current page of the Web application, generates first synchronization data and sends it;

[0009] At the technical support end, the second program receives the first synchronization data and obtains the web page data contained therein, creates or specifies a Web container, loads the web page data in the Web container, and makes the content displayed by the Web container and the Web application the same. The technical consultant provides technical support to the user based on the content displayed by the Web container.

[0010] The method further includes: in a web application used by a user, based on receiving a user trigger signal in the first program to send a technical support end request, disconnecting the technical support communication connection based on the technical support end request. Alternatively, in a technical support terminal used by a technical consultant, based on receiving a technical consultant trigger signal in the second program to send a technical support end request, disconnecting the technical support communication connection based on the technical support end request.

[0011] In the above implementation, users do not need to install remote screen sharing software. When encountering problems during the operation of Web applications, they can quickly call technical support within the current software. After the technical consultant accepts the answer, he can see the user's operation screen and provide technical support services on this basis to quickly locate the problem and improve communication efficiency.

[0012] In a possible implementation, the first program collects web page data based on the current page of the Web application to generate first synchronization data, the web page data includes one or more of HTML data, CSS style data, web page DOM data, serialized DOM data, and web page drawing data, and the web page drawing data is: drawing is performed on the Canvas element based on the display content of the current web page, drawing instruction data collected based on the drawing process, or image data collected based on the result of the drawing. It can be seen from this implementation that the web page same-screen implemented by this application is different from the existing remote same-screen technology. The existing technology realizes synchronization on both sides by transmitting video, while this application uses web page data to realize display synchronization, which utilizes the capabilities of the web page itself, and the web page drawing data used is realized by utilizing the capabilities of the web page Canvas, which obviously has the advantage of small transmission data, and when performing synchronous display, the image quality is completely lossless, and the user experience is good.

[0013] In a possible implementation, the first program sends a technical support request to the second program, and the first program sends the first synchronization data while sending the technical support request. This implementation completes the establishment of a technical support communication connection using only one network request. This implementation is particularly suitable for scenarios where the technical support end automatically responds, can reduce network delays, improve bandwidth utilization, and optimize server processing.

[0014] In a possible implementation, after the technical support communication connection is established between the first program and the second program, the first program monitors the changes in the web application web page data, and when the changes are monitored, collects the web page data and sends it as the second synchronization data; the second program receives the second synchronization data, and updates the web page data in the specified web container based on the web page data contained therein, so that the web container on the technical consultant side is consistent with the web application display on the user side, wherein the second synchronization data includes incremental web page data or full web page data. This implementation continuously synchronizes the changes in the web application to the technical support end, so that the technical consultant can understand the user's operation process in real time.

[0015] In a possible implementation, after the technical support communication connection is established between the first program and the second program, the operation events performed by the user are monitored in the Web container, operation data is collected based on the operation events, and the operation data is generated as third synchronization data and sent to the first program; the first program receives the third synchronization data, parses the operation data contained therein, and executes the operation contained in the operation data in the Web application. In this implementation, the operation events of the technical consultant are monitored at the technical support end, and the operation events are executed in the Web application on the user side, thereby realizing the technical consultant to replace the user's operation. It should be noted that this implementation indicates that the technical consultant has the operation authority. This implementation realizes two-way operation between users and technical consultants, that is, the party with the operation authority can perform operations on the Web application, and then synchronize the operation effects to the other party.

[0016] In a possible implementation, after the technical support communication connection is established between the first program and the second program, a voice control component and / or a video control component are loaded on the Web application and the technical support end, and a trigger event of the voice control component by the user is received to turn on or off the voice communication. The voice communication collects sound data on one side of the Web application or the technical support end and sends it to the other side, and receives and plays the sound data sent by the other side; the video communication receives a click event of the video control component by the user to turn on or off the video communication. The video communication collects video data on one side of the Web application or the technical support end as the first video data and sends it to the other side through a camera, and receives and plays the first video data sent by the other side. This implementation enables the audio and video dialogue between the user and the technical consultant on the basis of the same screen of the web page, so that the two parties can interact in real time, reduce the delay of information transmission, and improve the efficiency of communication; enable both parties to convey emotions and intentions more intuitively, and reduce misunderstandings caused by differences in understanding; in addition, enhance the sense of reality and immersion of communication, and have the effect of "face-to-face" service.

[0017] In a possible implementation, after the technical support communication connection is established between the first program and the second program, synchronous graffiti is established based on web page synchronization performed on both sides, and the detailed steps are as follows:

[0018] Loading Tuya control components on the Web application and the technical support end;

[0019] Receive a trigger event of the graffiti control component from a user or a technical consultant to turn on or off a synchronous graffiti operation. When the synchronous graffiti is turned on, the graffiti operation is performed on one side of the Web application and the technical support end, and the graffiti result is synchronized on the other side; when graffiti is performed in the Web application, a first Canvas element for performing graffiti is generated or selected, and a first interception is started to intercept business operations occurring on the Web application; start graffiti operation monitoring, and when a graffiti operation occurs, generate drawing data based on the drawing operation on the first Canvas element, and send the drawing data as graffiti synchronization data; receive the graffiti synchronization data at the technical support end, create or select a second Canvas element for presenting graffiti content on the upper layer of its current web page, and based on the graffiti synchronization data The method comprises: performing a drawing operation on the second Canvas element to make its display consistent with the first Canvas display; when performing graffiti in the technical support end, generating or selecting a second Canvas element for performing graffiti, and starting a second interception to intercept business operations occurring on the Web container; starting graffiti operation monitoring, generating drawing data based on the drawing operation on the second Canvas element when a graffiti operation occurs, and sending the drawing data as graffiti synchronization data; the Web application receives the graffiti synchronization data, creates or selects a first Canvas element for presenting graffiti content on the upper layer of its current web page, and performs a drawing operation on the first Canvas element based on the graffiti synchronization data to make its display consistent with the second Canvas display;

[0020] When the synchronous graffiti is closed, the first Canvas element and the second Canvas element are hidden or deleted, the first interception and the second interception are released, and the graffiti operation state is exited.

[0021] The above steps use synchronous drawing on Canvas to achieve synchronous graffiti on both sides. Synchronous graffiti provides users and technical consultants with an immersive experience similar to face-to-face communication. One party can see the other party's graffiti actions and results on the screen. This immediacy and interactivity enhance the fun and effectiveness of communication. In addition, the synchronous graffiti function can be used to accurately mark key information. For example, technical consultants can use the synchronous graffiti function to mark key steps or precautions on the screen to help users better understand business processes. The synchronous graffiti function has significant beneficial effects in improving communication efficiency, enhancing user experience, promoting interactive learning, and achieving accurate marking. These effects make technical support more practical and efficient.

[0022] In a possible implementation, after a technical support communication connection is established between the first program and the second program, one or more of the first synchronization data and its corresponding time information, the second synchronization data and its corresponding time information, the third synchronization data and its corresponding time information, the graffiti synchronization data and its corresponding time information, the sound data and its corresponding time information, and the video data and its corresponding time information are recorded to generate technical support process record data. After the same-screen communication is completed, a startup link for playing back the technical support process record data is generated in the first program or the second program. Through this implementation, based on the technical support process record communication process data, detailed operation records are an important basis for diagnosing and solving problems, and can also be used for analysis, learning, and training.

[0023] In a possible implementation, after the technical support communication connection is established between the first program and the second program, a shared content setting component is loaded in the Web application or the technical support end, and a click event of the shared content setting component by the user or the technical consultant is received to set the content to be shared on the same screen, wherein the shared content includes one of the currently running desktop, other applications, files, and windows. When the shared content is set, based on the specified type of shared content, the second video data is collected and generated and sent to the other side, wherein the second video data is received and played on the other side. In this implementation, the second video data includes data or data stream, video data or video stream, etc. Through this implementation, visual sharing of other content outside the Web application is realized during the technical support process, which is conducive to providing users with all-round technical support.

[0024] In a second aspect, the present application also provides a new technical support system for Web applications, the technical support system comprising a Web application and a technical support terminal, the Web application being used to connect with users to perform business operations, and the technical support terminal being used to connect with technical consultants to provide online technical support for users using the Web application.

[0025] The technical support system of the Web application is composed of:

[0026] The Web application includes a first program, which includes a connection module, a web page synchronization module, a Tuya synchronization module, and an audio and video communication module; the technical support end includes a second program, which includes a connection module, a web page synchronization module, a Tuya synchronization module, and an audio and video communication module, wherein the second program also includes a synchronization Web container.

[0027] In the web application:

[0028] The connection module is used to send a technical support request, to establish a technical support communication connection with the second program, and to send a technical support end request to disconnect the technical support communication connection;

[0029] The web page synchronization module is used to collect web page data based on the Web application to generate first synchronization data for transmission, and is also used to monitor changes in the web page data of the Web application, and when changes are monitored, collect web page data to generate second synchronization data for transmission, and is also used to receive third synchronization data, parse the operation data contained therein, and execute the operation contained in the operation data in the Web application;

[0030] The audio and video communication module is used to collect sound data and send it to the other side, and is also used to receive and play the sound sent by the other side, and is used to collect video data from the camera as first video data and send it to the other side, and is also used to receive and play the first video data sent by the other side;

[0031] The graffiti synchronization module is used to perform graffiti, generate or select a first Canvas element for graffiti in the Web application, and collect and generate drawing data based on the drawing operation on the first Canvas element, and send the drawing data to the other side as graffiti synchronization data; it is also used to perform synchronous graffiti, receive the graffiti synchronization data sent by the other side, and perform drawing on the first Canvas element based on the graffiti synchronization data; it is also used to hide or delete the first Canvas element when the synchronous graffiti is closed;

[0032] On the technical support side:

[0033] The connection module is used to receive and process the technical support request, to establish a technical support communication connection with the first program, and to send an end request to disconnect the technical support communication connection;

[0034] The web page synchronization module is used to create or specify a synchronization Web container for synchronization, to receive the first synchronization data, to load the web page synchronization data contained in the first synchronization data into the synchronization Web container, to receive the second synchronization data, to update the web page data in the synchronization Web container based on the web page synchronization data contained in the second synchronization data, and to monitor the operation events performed by the technical consultant in the synchronization Web container, and to collect the operation data based on the operation events and send them as the third synchronization data;

[0035] The audio and video communication module is used to collect sound data and send it to the other side, and is also used to receive and play the sound sent by the other side, and is used to collect video data from the camera as first video data and send it to the other side, and is also used to receive and play the first video data sent by the other side;

[0036] The graffiti synchronization module is used to perform graffiti, generate or select a second Canvas element for graffiti, collect and generate drawing data based on the drawing operation on the second Canvas element, and send the drawing data to the other side as graffiti synchronization data; it is also used to perform synchronous graffiti, receive the graffiti synchronization data sent by the other side, and perform drawing on the second Canvas element based on the graffiti synchronization data; it is also used to hide or delete the second Canvas element when the synchronous graffiti is closed.

[0037] In a possible implementation, the Web application or the technical support terminal further includes a data recording module, which is used to record one or more of the first synchronization data and its corresponding time information, the second synchronization data and its corresponding time information, the third synchronization data and its corresponding time information, the graffiti synchronization data and its corresponding time information, the sound data and its corresponding time information, and the video data and its corresponding time information to generate technical support process recording data after the technical support communication connection is established on both sides. It is also used to generate a startup link for playing back the technical support process recording data in the first program or the second program after the same-screen communication ends.

[0038] In a possible implementation, the Web application or the technical support end further includes other synchronization modules. In the Web application or the technical support end, the other synchronization modules are used to realize remote sharing and communication of visual content other than the Web application, wherein the shared content includes but is not limited to a running desktop, other applications, files, windows, etc., and the other synchronization modules include functions such as setting shared content, collecting video data based on the shared content, sending the video data, and playing the video data to realize sharing.

[0039] Analyzing the above, the present application embeds a program component that can call and obtain technical support inside the Web application, so that the Web application itself has the ability to obtain technical support and can directly obtain technical support without relying on third-party software. It can be seen that the present application can at least obtain the following beneficial effects: giving the Web application the ability to obtain technical support, so that applying for technical support when operating the Web application no longer depends on third-party software; realizing technical support communication through web pages on the same screen, with a "face-to-face" service effect, facilitating "on-site" understanding of user problems, and providing a good user experience; during the technical support process, both the technical consultant and the user can operate the business, and the control method is flexible; audio and video communication is supported, with high efficiency; synchronous graffiti is supported, and the communication target is accurate; the content on the same screen during communication does not involve other information outside the Web application, effectively protecting the privacy of both parties, and having strong security.

[0040] From the above, it can be seen that the technical support implementation method for Web applications provided by the embodiments of the present application has significant advantages of high efficiency and low cost compared to traditional on-site technical support, and has obvious advantages of quick initiation, flexible operation, and high security compared to video-type remote same-screen execution technical support methods. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] Figure 1 A schematic diagram of the structure of a technical support system for Web applications provided in an embodiment of the present application;

[0042] Figure 2 A schematic diagram of an execution flow of a technical support method applied to a Web application provided in an embodiment of the present application;

[0043] Figure 3 A schematic diagram of another execution flow of a technical support method for Web applications provided in an embodiment of the present application;

[0044] Figure 4 A schematic diagram of a process of performing synchronization according to second synchronization data provided in an embodiment of the present application;

[0045] Figure 5 A schematic diagram of a process flow of a technical consultant performing operations and synchronization provided in an embodiment of the present application;

[0046] Figure 6 A schematic diagram of a process for performing audio and video communication in a technical support method provided in an embodiment of the present application;

[0047] Figure 7 A schematic diagram of a process of performing synchronous graffiti in a technical support method provided in an embodiment of the present application;

[0048] Figure 8 A flowchart of a recording of a technical support process provided in an embodiment of the present application;

[0049] Fig. 9 A schematic diagram of a process for executing the same-screen sharing of other contents provided in an embodiment of the present application;

[0050] Fig.10 A schematic diagram of the module composition of a technical support system for Web applications provided in an embodiment of the present application;

[0051] Fig.11 This is a schematic diagram of a Web application UI;

[0052] Fig.12 This is a schematic diagram of a first button UI in a Web application in an embodiment of the present application;

[0053] Fig.13 This is a schematic diagram of a communication component control UI in an embodiment of the present application;

[0054] Fig.14 This is a UI schematic diagram of an audio and video communication component in an embodiment of the present application;

[0055] Fig.15 A UI schematic diagram of a graffiti component in an embodiment of the present application;

[0056] Fig.16 A UI schematic diagram of a technical support terminal in an embodiment of the present application;

[0057] Fig.17 This is a UI diagram of a request response component of a technical support terminal in an embodiment of the present application. DETAILED DESCRIPTION

[0058] The implementation mode part of this application is only used to explain this application but is not intended to limit this application.

[0059] The following describes the embodiments of the present application in conjunction with the accompanying drawings. Obviously, the described embodiments are only embodiments of a part of the present application, rather than all embodiments. It is known to those skilled in the art that with the development of technology and the emergence of new scenarios, the technical solutions provided in the embodiments of the present application are also applicable to similar technical problems.

[0060] As we all know, technical support plays an indispensable role in software implementation and application. It ensures the stable operation of technical products and promptly solves various problems encountered by users when using software. It is an important part of the competitiveness of software products. Existing business software is mostly built with Web technology. Therefore, providing technical support for Web applications is a very common application requirement. In order to solve the problems existing in the existing technology, this application provides a new method for implementing technical support for Web applications. Please refer to Figure 1 The schematic diagram of the structure of a technical support system applied to Web applications is shown, which generally includes a user end and a technical support end. The user end includes the Web application used by the user. The purpose of the embodiment of the present application is to obtain technical support from a technical consultant when the user encounters problems using the Web application. In the embodiment of the present application, the technical support end is used by a technical consultant, who provides technical support to the user by operating the second program 20. Figure 1, the Web application 10 includes a first program 10, which is usually embedded in the Web application and runs (for example, introduced in the page in the form of a JS library, etc.), including related functions of initiating technical support requests and receiving technical support services, and on the technical support side, includes a second program 20. In the embodiment of the present application, the program type of the second program 20 is not limited. It can be an independently running software or a Web program running in a browser or a browser control, etc., which includes related functions such as responding to technical support requests and providing technical support services.

[0061] Please refer to Figure 2 The schematic diagram of the execution flow of a technical support method for a Web application provided by an embodiment of the present application is shown, and the specific steps include:

[0062] In a web application:

[0063] S201, receiving a trigger event of a first button by a user, and generating a technical support request;

[0064] S202, sending a technical support request;

[0065] In the second procedure 20:

[0066] S203, receiving a technical support request and responding to it;

[0067] Between the web application and the second program 20:

[0068] S204, establishing a technical support communication connection;

[0069] In a web application:

[0070] S205, collecting web page data based on the current page to generate first synchronization data;

[0071] S206, sending first synchronization data;

[0072] In the second procedure 20:

[0073] S207, receiving the first synchronization data, and loading it in a designated Web container, making it the same as the Web application, and performing same-screen technical support.

[0074] In the above steps, the first button is a button presented by the first program 10 when it is run in the Web application, which is part of the user-side technical support UI component, and the first button sends a technical support request after receiving a user trigger event. Optionally, the first program 101 is a JS library file, which is loaded in the Web application, and the user-side technical support UI component including the first button is drawn in the current page of the Web application.

[0075] Typically, the Web application includes multiple routes. When the routes are switched, the technical support UI component needs to be resident on each page. The following example illustrates one implementation method: Assuming that the Web application has integrated a front-end routing library such as React Router (for React projects), Vue Router (for Vue projects), etc., define the routes of each page in the routing configuration file and specify the corresponding components. However, the component where the technical support UI component is located does not need to be defined separately under each route. Create a layout component (Layout Component), which contains the technical support UI component (or a similar placeholder, depending on the routing library used) for displaying different page content. In the application root component, use this layout component and pass in the routing configuration. In this way, no matter how the route changes, the layout component (including the technical support UI component and the first button) will remain unchanged.

[0076] In the above steps, S202 sends a technical support request. Optionally, a network request is generated in the Web application and sent to the technical support server. The technical support server runs a server to provide services for the user and the technical support, including processing the technical support request, assigning a technical consultant according to the technical support request, establishing a same-screen communication room, and providing data communication services and data recording services during the technical support communication process. The technical support server is used to provide data communication services between the Web application and the second program 20. The technical support server is essentially an intermediate service, and the Web application and the second program 20 establish communication through it. The embodiments of the present application include but are not limited to the above communication methods using intermediate services. For example, in a possible implementation method, the intermediate server receives the technical support creation request of the user, and receives the registration information of the online technical consultant, and uses the point-to-point communication capabilities of the user and the technical support to establish a point-to-point communication connection between the Web application and the second program 20.

[0077] In the above steps, step S204 establishes a technical support communication connection, and the establishment of the communication connection is to establish a communication connection between the specified user terminal and the specified technical support terminal. Preferably, the technical support communication connection adopts the WebSocket communication method, that is, to establish a long connection to perform technical support communication.

[0078] In the above steps, step S205 collects web page data based on the current page and generates the first synchronization data, and the content contained in the first synchronization data is used to be presented on the technical support end. At the technical support end, step S207 is executed to present the first synchronization data in the specified Web container, that is, to display the same content as the user side, that is, the current page content of the Web application. In an embodiment of the present application, the Web container includes various forms, such as a browser, a browser component that can display a web page (such as a WebView control), etc. Step S207 achieves the technical effect of synchronizing the display content on both the technical support end and the user end. The displayed content is the Web application that the user is operating, that is, the page that raises the question. On this basis, the technical consultant can understand the user's problem site at the first time and provide technical support services on this basis.

[0079] The above step S205 collects web page data based on the current page and generates the first synchronization data. The first synchronization data is presented in the web page on the other side to achieve display synchronization on both sides. In a specific implementation scenario, the types of the first synchronization data are, for example, web page HTML data and CSS style data. Web page HTML data and CSS style data are two basic components for building and beautifying web pages. HTML data contains the structure and content of the web page, and CSS style data defines display specifications. The combination of the two can generate the display effect of the web page. When obtaining HTML data, for example, the document.documentElement.outerHTML property of JavaScript can be used to obtain the HTML string of the entire HTML document, including the tag and all the contents therein, and document.body.innerHTML can be used to obtain all the contents within the tag (excluding the tag itself). For obtaining CSS style data, for example, by accessing the computed style (computedstyles) of the DOM element or using other technologies to obtain and check the currently applied CSS data, the window.getComputedStyle() method is used to return an object that contains all the final CSS attribute values ​​used for the specified element, including the values ​​parsed and calculated from various sources (such as inline styles, external style sheets, and inherited styles). It should be noted that the above method of obtaining HTML data and CSS style data is only used as an example, and the embodiments of the present application include but are not limited to the above acquisition method. Optionally, the above HTML data can be replaced by web page DOM data, and DOM is a representation of web page content, which includes the structure of HTML and XML documents. Further, the DOM data is generated into serialized DOM data, that is, the DOM structure is converted into a string form for transmission and further processing, such as generating a snapshot of the page. Optionally, the type of the first synchronization data also includes web page drawing data, and the web page drawing data includes: drawing is performed on the Canvas element based on the display content of the current web page, drawing instruction data collected based on the drawing process, or image data collected based on the result of the drawing. It is known to those skilled in the art that the ability to directly take a screenshot (screenshot) through JavaScript is limited because it mainly runs in a browser environment, and the browser does not allow scripts to directly access the user's screen content (except the DOM content of the current page) for security and privacy considerations. Therefore, in the embodiments of the present application, JavaScript and HTML5 Canvas API can be used to draw the DOM element of the current page and generate a picture. This approach works well for static content on the page, but for video content, you can use the canvas element to draw the current frame of the video.Corresponding to the process and results of using the Canvas API to draw the DOM elements of the current page, optionally, image data collected based on the drawing result is transmitted as the first synchronous data, and optionally, the Canvas API drawing instructions used are recorded and used as the first synchronous data transmission.

[0080] In a possible implementation, after the technical support communication connection is established in the above step S204, in the Web application, a technical support end request is sent based on a user trigger signal received in the first program 10, and the technical support communication connection is disconnected based on the technical support end request.

[0081] In a possible implementation, after the technical support communication connection is established in the above step S204, in the second program 20, a trigger signal from a technical advisor is received to send a technical support end request, and the technical support communication connection is disconnected based on the technical support end request.

[0082] In one possible implementation, see Figure 2 The schematic diagram of the execution flow of a technical support method applied to a Web application is shown, and the main steps are as follows:

[0083] In a web application:

[0084] S301, receiving a trigger event of a first button by a user, generating a technical support request; and generating first synchronization data based on data collected from a current web page;

[0085] S302, sending a technical support request and first synchronization data;

[0086] In the second procedure 20:

[0087] S303, receiving a technical support request, responding and processing; receiving first synchronization data, and loading it in a specified Web container to make it the same as the Web application;

[0088] Between the web application and the second program 20:

[0089] S304, establishing a technical support communication connection;

[0090] …

[0091] In the above steps, the steps after S304 are the same as Figure 1 The steps after S204 of the embodiment shown are the same and will not be repeated here. Figure 1The differences between the illustrated embodiments are obvious. This embodiment is to combine the technical support request and the web page data required for synchronous presentation of the web page into one network request and send it. In this implementation, since the first synchronization data is already included in the request, the time for waiting for the connection to be established before sending the data is reduced, thereby reducing the overall transmission delay; reducing the number of network round trips, making data transmission more efficient, thereby providing a smoother user experience. It should be noted that the method provided in this embodiment is not suitable for scenarios with extremely large amounts of data or unstable network conditions, because the size of the entire data packet may be limited by the protocol or network conditions. In these cases, more complex data segmentation and transmission control mechanisms may need to be adopted.

[0092] Through the above embodiment, the technical consultant can see the running screen of the Web application on the user side and provide technical support on this basis. However, when the user continues to operate the Web application, the content displayed on the user side changes. In order to quickly track and locate the problem, the technical consultant must be able to synchronously see the operation progress on the user side. Please refer to Figure 4 The flowchart of performing synchronization according to the second synchronization data in the technical support method shown in the figure has the following steps:

[0093] Between the web application and the second program 20:

[0094] S401, establishing a technical support communication connection;

[0095] In a web application:

[0096] S402, start monitoring of web page data changes, and when changes are monitored, collect web page data to generate second synchronization data;

[0097] S403, sending second synchronization data;

[0098] In the second procedure 20:

[0099] S404, receiving the second synchronization data, and updating the web page data in the specified Web container based on the web page data contained therein;

[0100] In the above steps, after the technical support communication connection is established in step S401 and the first web page data synchronization is performed, the user side continues to operate the Web application, thereby the displayed content of the web page changes, and the web page data change monitoring is established through step S402, and the web page data is collected to generate the second synchronization data. Among them, the second synchronization data is basically the same in nature as the first synchronization data, and it is a kind of data that can be used to restore the web page changes on the user side on the other side. Optionally, MutationObserver is used to asynchronously monitor the changes of the DOM tree. When a part of the DOM tree changes, MutationObserver will provide a detailed report on the change. According to these reports, the web page data is collected to generate the second synchronization data. Optionally, listen to events that may cause DOM changes, such as click, input, change, etc., and check whether the DOM or HTML has changed in the processing functions of these events. Optionally, setInterval or requestAnimationFrame is used to periodically check whether a part of the DOM or HTML has changed. This method relies on polling and may consume more resources. It should be noted that the monitoring and collection of the second synchronization data in step S402 is not limited to the above examples, and all methods that can collect the second synchronization data should be within the protection scope of this application.

[0101] In a specific implementation scenario, for example, when a mouse moves within a web page, it usually does not directly cause changes in the DOM structure or CSS (Cascading Style Sheets) itself. However, in order to obtain a better communication effect, technical support personnel need to understand the user's mouse movement operation status to understand the user's operation trends. Preferably, after the above step S401, the monitoring of mouse events is started within the web page of the Web application, such as mousemove event monitoring. When the mouse event is monitored, the relevant mouse state data (such as the pointer position, etc.) is collected and added to the second synchronization data. Correspondingly, in step S404, the user's mouse state is restored and displayed based on the second synchronization data to improve the communication effect of both parties on the same screen.

[0102] In one possible implementation, Figure 5 The flowchart shown is a flowchart of a technical consultant performing operations and synchronization in a technical support method, and the steps are as follows:

[0103] Between the web application and the second program 20:

[0104] S501, establishing a technical support communication connection;

[0105] In the second procedure 20:

[0106] S502, starting operation event monitoring of the technical consultant, collecting operation data based on the operation event, and generating the operation data as third synchronization data;

[0107] S503, sending third synchronization data;

[0108] In a web application:

[0109] S504, receiving the third synchronization data, parsing the operation data contained therein, and executing the operation contained in the operation data in the current page of the Web application.

[0110] According to the above implementation method, S502 collects operation data based on the operation events, for example, through scripting languages ​​such as JavaScript to monitor the user's operation events, such as clicks, keyboard input, mouse movement, etc., for example, through JavaScript to record the user's clicks, scrolling, input and other behaviors on the web page, and generate the recorded operation data as the third synchronization data, wherein the third synchronization data records the user's operation behavior on the web page. It should be noted that in the embodiment of the present application, the second program 20 is used to provide technical support, and it is not the final execution environment of the Web application. Therefore, when the user performs an operation on the web page, the performed operation is not executed in the second program 20. When the user operation event is monitored in step S502, the user operation event is captured and the third synchronization data is generated. For example: the user's sliding operation is monitored through JavaScript's scroll event or wheel event. These events are triggered when an element (such as the entire window or a specific element) scrolls, and can capture relevant information about the scrolling, such as the scrolling position (scrollTop or scrollLeft) and scrolling direction, etc. The third synchronization data collected based on this includes sliding operation data, etc.; in step S504, JavaScript is used to simulate these sliding operations based on the sliding operation data. As can be seen from the above, in this embodiment, the operations of the final technical consultant are passed to the user side for actual execution. Of course, after the execution is completed, it needs to be executed Figure 4 The steps shown generate and send second synchronization data in the Web application so that the execution results are simultaneously displayed in the second program 20.

[0111] Optionally, after the above step S501, when the technical consultant has an operation requirement, a request to execute the operation is first generated in the second program 20 and sent to the Web application. After the user's permission, the operations of steps S502 and S503 are executed. That is, when the technical consultant wants to directly execute the program operation when providing technical support, the technical consultant obtains control after the user's consent.

[0112] Through the above implementation, the beneficial effect that can be obtained is that, on the basis of being able to see the content of the Web application operated by the user, the technical consultant can also perform operations on the Web application, which enhances the flexibility of operations during the technical support process, enables the collaborative parties to solve problems faster, and avoids tedious explanation processes, thereby improving work efficiency, making technical support more efficient and providing a good user experience.

[0113] In one possible implementation, Figure 6 The flowchart of performing audio and video communication in the technical support method shown in the figure allows the two parties to have a real-time conversation after the technical consultant and the user establish a technical support communication connection. The detailed steps are as follows:

[0114] Between the web application and the second program 20:

[0115] S601, establishing a technical support communication connection;

[0116] In a web application:

[0117] S602, the voice / video control component receives a start instruction from the user;

[0118] Between the web application and the second program 20:

[0119] S603: Establish audio and video communication.

[0120] In a web application:

[0121] S604, the voice / video control component receives a shutdown instruction from the user;

[0122] Between the web application and the second program 20:

[0123] S605: Disconnect the audio and video communication.

[0124] In the second procedure 20:

[0125] S606, the voice / video control component receives a start instruction from the technical consultant;

[0126] Between the web application and the second program 20:

[0127] S607: Establish audio and video communication.

[0128] In the second procedure 20:

[0129] S608, the voice / video control component receives a shutdown instruction from the technical advisor;

[0130] Between the web application and the second program 20:

[0131] S609, close the audio and video communication.

[0132] In the above implementation, S603 and S607 establish audio and video communication between the Web application and the second program 20. Optionally, WebRTC (Web Real-Time Communication) technology is used to establish audio and video communication between the two. In a specific implementation scenario, during audio and video communication between web pages, in order to protect the privacy and security of the user, the microphone usually requires the user to manually turn on or authorize, that is, the audio and video communication is turned on according to the user operation in steps S602 and S606. Optionally, if there are no security and privacy considerations and the browser allows the use of the microphone device to be automatically turned on, the embodiment of the present application supports automatically establishing an audio and video communication connection between the Web application and the second program 20 after step S601.

[0133] Through the above implementation, after the technical support communication connection is established, according to the needs of the user and the technical consultant, an audio and video communication connection is established between the Web application and the second program 20, so that both parties can transmit information and confirm the problem details more quickly, thereby accelerating the problem solving process. In addition, the dual combination of vision and hearing helps to reduce misunderstandings caused by unclear text descriptions or misunderstandings, and improves the accuracy of communication.

[0134] In one possible implementation, see Figure 7 The flowchart of performing synchronous graffiti in the technical support method is shown in FIG. 1 . This embodiment implements the synchronous graffiti function in the technical support process. The detailed steps include:

[0135] Between the web application and the second program 20:

[0136] S701, establishing a technical support communication connection;

[0137] In a web application:

[0138] S702, the Tuya control component receives a Tuya start instruction;

[0139] S703, generating or selecting a first Canvas element for graffiti, and starting a first interception; starting graffiti operation monitoring;

[0140] S704, when a graffiti operation is monitored, generating drawing data based on the drawing operation occurring on the first Canvas element, and further generating graffiti synchronization data;

[0141] S705, send Tuya synchronization data

[0142] In the second procedure 20:

[0143] S706, receiving the graffiti synchronization data, creating or selecting a second Canvas element for presenting graffiti content in an upper layer of the current web page, and performing a drawing operation on the second Canvas element based on the graffiti synchronization data to make its display consistent with that of the first Canvas;

[0144] In the above steps, step S702 starts graffiti after receiving the graffiti instruction triggered by the user. Step S703 generates or selects the first Canvas element for graffiti, wherein the Canvas element is a tag in HTML5, which provides a programmable 2D drawing environment. Usually, the first Canvas element is located at the upper layer of all web page elements displayed (except for web page elements used for execution control). The first interception is to intercept certain operation behaviors performed by the user in the graffiti state, such as sliding in the web page, that is, it is necessary to intercept the sliding behavior of the pair of web pages and identify it as a drawing behavior on the first Canvas. S704 collects graffiti synchronization data, such as collecting the user's current brush state, its thickness, color, etc., and collects the user's sliding trajectory on the web page. Correspondingly, in step S706, drawing is performed on the second Canvas based on the graffiti synchronization data, for example, according to the brush size and color set, and the corresponding curve is drawn according to the trajectory data.

[0145] The above shows the key steps of performing scribble in the Web application and synchronously presenting the scribble result in the second program 20. Based on the same principle, the embodiment of the present application also includes performing the scribble operation in the second program 20 and synchronously presenting the scribble result in the Web application.

[0146] Optionally, in step S702, a graffiti start instruction triggered by a user is received in the Web application, and the Web application and the second program 20 simultaneously enter a graffiti operation state, in which operation events on non-control component web page elements are intercepted, monitoring is started, drawing behaviors on the first Canvas are collected to form graffiti synchronization data and sent to the second program 20, and drawing behaviors on the second Canvas are collected to form graffiti synchronization data and sent to the Web application. Optionally, after the Web application and the second program 20 simultaneously enter the graffiti operation state, different brush colors are set for the two to distinguish the graffiti behaviors on both sides.

[0147] In one possible implementation, SVG elements are used instead of Canvas elements for implementation. SVG elements (Scalable Vector Graphics) are a markup language based on XML, which is used to embed vector graphics in web pages. Although SVG is not the preferred technology for the graffiti function, the feature of this implementation is that the graffiti results can be saved as vector graphics.

[0148] In another possible implementation, the graffiti effect is displayed by drawing web page elements. For example, when performing graffiti data collection, the position of the mouse relative to the container is calculated. When performing graffiti drawing, a new point element is created, and then the point is added to the container and its display position is set through CSS. This implementation does not use graphic image drawing elements such as Canvas elements and SVG elements, and also achieves the effect of synchronous graffiti and marking. Furthermore, if you do not want to have too many points in the container, you can set a condition to delete the old point elements.

[0149] In one possible implementation, the process of technical consultants providing technical support to users is recorded. Please refer to Figure 8 A flowchart of performing a technical support process recording in a technical support method is shown, and the steps are as follows:

[0150] S801, technical communication connection is established, and communication process data recording is started;

[0151] S802, recording the first synchronization data and its corresponding time information, the second synchronization data and its corresponding time information, the third synchronization data and its corresponding time information, the tutu synchronization data and its corresponding time information, the sound data and its corresponding time information, the video data and its corresponding time information to generate technical support process record data;

[0152] S803, when the same-screen technical support ends, generating a start link for playing back the recorded data of the technical support process in the first program or the second program.

[0153] In the above steps, the recording is started after both parties enter the technical support communication. After both parties enter the technical support communication, in order to achieve the consistency of the display content on both sides, the web page synchronization is performed to perform the first synchronous data transmission. In the communication process, the second synchronous data transmission is performed to make the display content consistent. In order to achieve the third synchronous data transmission on the technical support end, the two parties perform voice calls to perform audio and video data transmission, and the graffiti marks of both parties perform synchronous graffiti data transmission. S802 records the data transmitted during the communication between the two parties throughout the process, thereby recording all the material data of the technical support process, and recording the time information corresponding to each material. In step S803, according to the time information corresponding to each material, the corresponding playback is performed according to the type of material, such as presenting the web page according to the web page data, updating and replacing the web page data to change the web page, playing audio and video, and performing drawing on Canvas to restore the graffiti process. In step S803, a startup link is generated so that users and technical consultants can perform playback based on this. Optionally, step S802 is performed on the technical support service end, that is, while the technical support service end provides data communication services between the Web application and the second program 20, the transmitted data is recorded. Optionally, step S802 is performed in the Web application or the second program 20, that is, a front-end data recording method is adopted.

[0154] Optionally, step S802 stores the technical support process record data and the current route of the Web application, and records the corresponding relationship between the two. At the same time, relevant description information, startup links, etc. can be additionally stored. On this basis, when other users operate the Web application to access the current route, the corresponding technical support data record can be retrieved from the database according to the route information for user selection, and the playback of the technical support process record data is performed according to the user's selection. Optionally, after receiving the user's trigger signal for the first button, the corresponding technical support data record is retrieved from the database according to the route information for the user to select and play.

[0155] The above implementation method can at least obtain the following beneficial effects. Compared with the traditional video recording method of recording the communication process, it has the advantage of small data. For example, if both parties communicate for 20 minutes, assuming that the screen resolution is 1920x1080, the screen color depth is 24 bits, and the screen refresh rate (such as 60Hz), the single frame data volume is 655,360 bytes, and the 20-minute data volume is 749.7MB. After video compression (the compression rate of H.264 can usually reach 1:50), it is about 37.5M. This application adopts the recording method of web page data. For example, the total amount of web page data of the ERP system is usually within 1M. Therefore, the embodiment of the present application has the significant advantage of small data recording. In addition, in order to save storage resources, the existing technology will undoubtedly reduce the picture quality by increasing the compression ratio. The embodiment of the present application restores the recording effect by rendering the web page, and has the advantage of lossless picture. On the basis of forming the technical support process recording data, when users encounter similar problems, technical support personnel can directly refer to the previous technical support service records and quickly share them for problem solving. New employees can quickly learn the solutions and skills of old employees.

[0156] In a possible implementation, when a user operates the Web application, the problem encountered is not necessarily completely limited to the Web application, such as a user operating system problem, etc. Fig. 9 A schematic diagram of a process of performing other content same-screen sharing in a technical support method is shown, and the main steps are as follows:

[0157] Between the web application and the second program 20:

[0158] S901, establishing a technical support communication connection;

[0159] In a web application:

[0160] S902, the shared content setting component receives a setting instruction;

[0161] S903, selecting and setting the content of the same screen sharing, including the currently running desktop, other applications, files, windows, etc.;

[0162] S904, based on the specified shared content, collect and generate a second video;

[0163] S905, send the second video

[0164] In the second procedure 20:

[0165] S906, receiving and playing the second video.

[0166] In the above implementation, the Web application and the second program 20 are both web programs. Screen sharing in the web page can be achieved through WebRTC (Web Real-Time Communication) technology, which is a technology that supports web browsers to conduct real-time voice conversations or video conversations. For example, the following steps are performed: before starting to share the screen, the web page will ask the user to authorize screen sharing. At this time, the browser will pop up a system dialog box, asking the user whether to allow the website to obtain screen sharing permissions; after the user's authorization, the media stream of the screen or window is obtained by calling navigator.mediaDevices.getDisplayMedia() API, and the display, application or tab to be shared can be specified; a WebRTCPeer Connection object is created and the media stream is added to the object; a data transmission channel is established on the RTCPeerConnection object to enable bidirectional transmission of signaling from the local endpoint and the remote endpoint; once the data transmission channel is established, the screen can be shared; video frames, audio streams and other metadata can be exchanged between the sharee and the sharer; when the screen sharing needs to be ended, the RTCPeerConnection is closed and related resources are released. Optionally, in the above exemplary steps, the video transmission is performed using the data transmission channel established between the Web application and the second program 20 .

[0167] In another possible implementation, in step S903, the content to be shared on the same screen is set. When the shared content is a picture, Word document, PDF document, PPT document, Excel document, or other document that can be converted into a web page format, the set file is uploaded, and the file is converted into a web page on the technical support server. Then, the web page same-screen technology used in the embodiment of the present application is used to communicate by transmitting the first synchronization data, the second synchronization data, the third synchronization data, and the graffiti synchronization data.

[0168] Optionally, steps S902, S903, S904, and S905 are performed in the second program 20, and step S906 is performed in the Web application. That is, the technical consultant sets the content to be shared, such as an operation manual, an operation description file, and the like.

[0169] The above implementation method can achieve the beneficial effect that, during the technical support communication process, when problems or content outside the Web application need to be communicated, the above implementation method can serve as an effective supplement, allowing technical consultants and users to flexibly set shared content and fully communicate to solve problems.

[0170] In the specific implementation scenario of the embodiment of the present application, according to Figure 1The first program 10 and the second program 20 shown in FIG. Fig.10 As shown, a schematic diagram of the module composition of a technical support system for Web applications is shown, wherein the first program 10 includes a connection module 101, a web page synchronization module 102, a graffiti synchronization module 103, and an audio and video communication module 104; the second program 20 includes a connection module 201, a web page synchronization module 202, a graffiti synchronization module 203, and an audio and video communication module 204.

[0171] In the web application:

[0172] The connection module 101 is used to send a technical support request, to establish a technical support communication connection with the second program, and to send a technical support end request to disconnect the technical support communication connection;

[0173] The web page synchronization module 102 is used to collect web page data based on the web application to generate first synchronization data for transmission, and is also used to monitor changes in web page data of the web application, and when changes are monitored, collect web page data to generate second synchronization data for transmission, and is also used to receive third synchronization data, parse operation data contained therein, and execute the operation contained in the operation data in the web application;

[0174] The graffiti synchronization module 103 is used to perform graffiti, generate or select a first Canvas element for graffiti in the Web application, and collect and generate drawing data based on the drawing operation on the first Canvas element, and send the drawing data to the other side as graffiti synchronization data; it is also used to perform synchronous graffiti, receive the graffiti synchronization data sent by the other side, and perform drawing on the first Canvas element based on the graffiti synchronization data; it is also used to hide or delete the first Canvas element when the synchronous graffiti is closed;

[0175] The audio and video communication module 104 is used to collect sound data and send it to the other side, and is also used to receive and play the sound sent by the other side, and is used to collect video data from the camera as first video data and send it to the other side, and is also used to receive and play the first video data sent by the other side;

[0176] On the technical support side:

[0177] The connection module 201 is used to receive and process the technical support request, to establish a technical support communication connection with the first program, and to send an end request to disconnect the technical support communication connection;

[0178] The web page synchronization module 202 is used to create or specify a synchronization Web container for synchronization, to receive the first synchronization data, to load the web page synchronization data contained in the first synchronization data into the synchronization Web container, to receive the second synchronization data, to update the web page data in the synchronization Web container based on the web page synchronization data contained in the second synchronization data, and to monitor the operation events performed by the technical consultant in the synchronization Web container, and to collect the operation data based on the operation events and send them as the third synchronization data;

[0179] The graffiti synchronization module 203 is used to perform graffiti, generate or select a second Canvas element for graffiti, collect and generate drawing data based on the drawing operation on the second Canvas element, and send the drawing data to the other side as graffiti synchronization data; it is also used to perform synchronous graffiti, receive the graffiti synchronization data sent by the other side, and perform drawing on the second Canvas element based on the graffiti synchronization data; it is also used to hide or delete the second Canvas element when the synchronous graffiti is closed;

[0180] The audio and video communication module 204 is used to collect sound data and send it to the other side, and is also used to receive and play the sound sent by the other side. It is used to collect video data from the camera as first video data and send it to the other side, and is also used to receive and play the first video data sent by the other side.

[0181] In a possible implementation, the Web application or the technical support end further includes a data recording module, wherein the data recording module is used to record the first synchronization data and its corresponding time information, the second synchronization data and its corresponding time information, the third synchronization data and its corresponding time information, the graffiti synchronization data and its corresponding time information, the sound data and its corresponding time information, and the video data and its corresponding time information to generate technical support process recording data after the technical support communication connection is established on both sides; after the same-screen communication is completed, a startup link for playing back the technical support process recording data is generated in the first program or the second program.

[0182] In a possible implementation, the Web application or the technical support end further includes other synchronization modules. In the Web application or the technical support end, the other synchronization modules are used to realize remote sharing and communication of visual content other than the Web application, wherein the shared content includes but is not limited to a running desktop, other applications, files, windows, etc., and the other synchronization modules include functions such as setting shared content, collecting video data based on the shared content, sending the video data, and playing the video data to realize sharing.

[0183] The following is an example description and explanation of a specific application scenario of a method:

[0184] like Fig.11 The figure shows a schematic diagram of a Web application UI, such as an ERP system operation interface used for production management of an enterprise. The ERP system is a Web application, and users operate it to perform production management. In order to ensure smooth production, the provider of the ERP system provides exclusive technical consultants to solve various problems encountered in the software application.

[0185] To implement the technical support method provided by the present application on the ERP system, first, embed a JS library for implementing the technical support method of the present application in the front-end page program of the ERP system, such as support.js, and embed the code, for example:

[0186] <script src＝"support.js">< / script>

[0187] On the basis of embedding the above support.js, the support.js loads the connection module 101, the web page synchronization module 102, the synchronous graffiti module 103, and the audio and video communication module 104, and the ERP system has the ability to perform technical support. After loading, the UI interface is as follows Fig.12 As shown, it can be seen that support.js loads the "Technical Support" button, which is the first button, through which users obtain technical support.

[0188] At the same time, a technical support agent terminal program is deployed for use by technical consultants. For example, after the deployment is completed on the server side, the technical consultant opens and logs in through the specified website. The program is the second program 20, which also includes a connection module 201, a web page synchronization module 202, a synchronous graffiti module 203, and an audio and video communication module 204. The running screen of the second program 20 after logging in is as follows Fig.16 As shown, the left side is user list information and the right side is a chat conversation.

[0189] User A logs in to use the ERP system, encounters a problem, and clicks the "Technical Support" button to call technical support. The click event generates a technical support request and sends it to the technical support server. After receiving the request, the technical support server searches for online technical consultant information and assigns a seat to user A according to the specified seat allocation rules, such as assigning technical consultant A to provide services. Optionally, after user A clicks the "Technical Support" button, a list of online technical consultants is displayed in a pop-up window. User A selects a consultant from the list to generate a technical support request. The technical support server establishes a technical support connection between user A and technical consultant A based on the technical consultant A specified in the request. Optionally, the technical support server selects or specifies technical consultant A to provide services and sends a notification to the second program 20, such as Fig.17 As shown, the response is processed in the second program 20 and a technical support connection is established after the technical advisor A accepts it.

[0190] A technical support connection, such as a WebSocket connection, is provided between the ERP system operated by user A and the second program 20 operated by technical consultant A, i.e., a long connection.

[0191] The technical support server starts recording the technical support process data and records the time information of each data occurrence.

[0192] Based on the current page of the ERP system, web page data is collected and sent to the second program 20. After receiving the web page data, the second program 20 presents it in the specified web container, so that the technical consultant A can see the operation screen of the user A. At the same time, the communication control components are loaded in the pages on both sides. The effect of the loading is as follows: Fig.13 shown.

[0193] The loaded communication control components include microphone, video, graffiti, content, share, end and other buttons.

[0194] User A clicks the microphone button in the communication control component to start voice communication, collects the voice of user A and sends it to technical consultant A, who can hear the voice of user A; similarly, technical consultant A clicks the microphone button in the communication control component to start voice communication, collects the voice of technical consultant A and sends it to user A, who can hear the voice of technical consultant A. In this way, both parties can discuss issues through voice dialogue. In addition, if technical consultant A or user A needs video communication, they click the video button in the communication control component to start the camera on this side, collect video data and send it to the other side, so that the other side can see the other party's head video, which enhances the communication effect.

[0195] When user A slides the page or performs an operation, the web page on the user side monitors the change of the web page data, collects the changed data and sends it to the second program 20, which receives and updates the display content in the specified web container to make it consistent with the display content on the user A side.

[0196] Because the operation steps are too complicated, user A requests technical consultant A to operate and explain on his behalf. Technical consultant A receives this request, and thus, in the current page of the ERP system, the operation events outside the communication control component performed by user A are captured, that is, user A's operation rights on the current page are terminated, and the operation rights are allocated to technical consultant A. Technical consultant A performs operations, such as clicking a button, and the click information is collected in the web container, and the third synchronization data is generated and sent to the ERP system on the user A side, and the click information is parsed, and the click operation is actually performed in the ERP system. Of course, due to the execution of the above click, the content of the ERP system page changes, and the ERP system webpage monitors the changes in the webpage data again, collects the changed data and sends it to the second program 20, and the synchronous update display content in the web container, and technical consultant A perceives the processing result after this click.

[0197] In order to assist user A in business operations, technical consultant A clicks the graffiti button in the communication control component to start graffiti. As a result, the second Canvas for graffiti is loaded in the second program 20, which is located at the top of the web page, and the first Canvas for graffiti is loaded in the ERP system page, which is also located at the top of the web page. The operation event occurring on the second Canvas is identified as the execution of graffiti drawing behavior, and the current event is prevented from being transmitted to the web page elements of the next layer, while the graffiti component is displayed as follows: Fig.15As shown; on the contrary, for the operation events occurring on the first Canvas, the operations on the first Canvas are ignored and "penetrated" to the next layer of web page elements. Or it can be understood that technical consultant A can only perform graffiti but cannot operate the web page; user A cannot perform graffiti but can operate the web page. At the same time, based on the graffiti drawing operation data supported by the technical consultant, it is sent to the user A side, that is, the ERP system page. On the user A side, after the ERP system page receives this graffiti synchronization data, synchronous drawing is performed on the first Canvas. According to the above, technical consultant A guides user A but does not directly operate the business content, thereby assisting user A. For example, technical consultant A checks the required form items through graffiti, and user A actually fills in the content. Preferably, in the above graffiti state, the sliding event of user A on the web page is intercepted to fix the position of the web page content and the first Canvas. It should be noted that the above-mentioned execution of graffiti on the technical consultant A side and execution of web page operations on the user A side is only one synchronous graffiti working mode of an embodiment of the present application. For example, it also includes a synchronous graffiti working mode in which graffiti is executed on the user A side and operations are performed on the technical consultant A side, a working mode in which both sides can graffiti but cannot execute web page operations, etc.

[0198] Technical consultant A solves the problem for user A, and user A realizes that this problem also requires the attention of user B and user C. User A clicks the share button in the communication control component to obtain the link of the current communication room, and shares it to user B and user C through WeChat, etc. User B and user C access the link to enter the room and watch the synchronous communication content.

[0199] When technical consultant A is solving a problem for user A, for example, he finds that user A has a problem with the browser setting, which causes printing misalignment. User A clicks the content button in the communication control component and selects to share the screen or browser, such as Fig.14 As shown, the technical consultant can see the video sent by user A in the audio and video communication component, click on the video to enlarge the screen shared by user A, and guide user A to perform settings on this basis.

[0200] In addition, when technical consultant A was solving the problem for user A, he found that user A was not familiar with the business process. The technical consultant clicked the content button in the communication control component and selected a PDF file for explaining the process. The display content of the file was synchronously shared to user A in the form of video or web page, and technical consultant A performed the process explanation based on this.

[0201] After the problem is solved, technical consultant A or user A clicks the end button in the communication control component to disconnect the technical communication connection, the technical support server stops recording the technical support process data, and generates a playback link for the technical support process data, so that both user A and technical consultant A can view the link to perform playback or share it with other users.

[0202] It should be noted that the above Figures 11 to 17 The UI schematic diagram shown is only used to illustrate the present application, and should not be used to limit the present application because of the specific display form it provides.

[0203] In summary, the technical support implementation method for Web applications provided by the embodiment of the present application obtains technical support capabilities by embedding the first program in the Web application, quickly calling a technical consultant, and the user side does not need to install additional remote screen sharing software, so that the technical support function is integrated with the Web application, the user experience is good, the content shared during the technical support process can be limited to the Web application, the security is good, and the support process uses web page synchronization technology, with a small amount of data and lossless images. The technical support process has screen synchronization, audio and video synchronization, and graffiti synchronization, which has a "face-to-face" guidance effect. Compared with video sharing, this application supports two-way operation and is extremely flexible.

[0204] The above are only specific implementations of the embodiments of the present application, but the protection scope of the embodiments of the present application is not limited thereto. Any changes or replacements that can be easily thought of by any technician familiar with the technical field within the technical scope disclosed in the embodiments of the present application should be included in the protection scope of the embodiments of the present application. Therefore, the protection scope of the embodiments of the present application shall be based on the protection scope of the claims.

Claims

1. A method for implementing technical support for Web applications, the method being applied to a Web application technical support system, the Web application technical support system providing technical support services for users using Web applications, the Web application technical support system comprising a Web application for users to perform business operations, and a technical support terminal for technical consultants, the Web application embeds a first program, the user calls the first program in the Web application to obtain technical support, the technical support terminal comprises a second program, the technical consultant uses the second program to provide technical support services for the user, the method comprising: The first program includes a first button, and the first program receives a trigger signal for the first button to send a technical support request; The second program receives the technical support request, performs response processing on the technical support request, and establishes a technical support communication connection between the first program and the second program; The first program collects web page data based on the current page of the Web application, generates first synchronization data and sends it; The second program receives the first synchronization data and obtains the web page data contained therein, creates or specifies a web container, loads the web page data in the web container, and makes the contents displayed by the web container and the web application the same, and the technical consultant provides technical support to the user based on the contents displayed by the web container; In the first program, a user trigger signal is received to send a technical support end request, or in the second program, a technical advisor trigger signal is received to send a technical support end request, and the technical support communication connection is disconnected based on the technical support end request.

2. The method according to claim 1, characterized in that The first program collects web page data based on the current page of the Web application to generate first synchronization data, the web page data includes one or more of HTML data, CSS style data, web page DOM data, serialized DOM data, and web page drawing data, and the web page drawing data is: drawing is performed on a Canvas element based on the display content of the current web page, drawing instruction data is collected based on the drawing process, or image data is collected based on the drawing result.

3. The method according to claim 1, characterized in that The first program sending a technical support request to the second program also includes the first program sending the first synchronization data while sending the technical support request.

4. The method according to claim 1, characterized in that: After the technical support communication connection is established between the first program and the second program, the method further includes: the first program monitors changes in the web page data of the Web application, and when changes are monitored, collects the web page data and sends it as second synchronization data; the second program receives the second synchronization data, and updates the web page data in the Web container based on the web page data contained therein, so that the Web container is consistent with the Web application display, wherein the second synchronization data includes incremental web page data or full web page data.

5. The method according to claim 1, characterized in that After the technical support communication connection is established between the first program and the second program, the method further includes: monitoring operation events performed by users in the Web container, collecting operation data based on the operation events, generating the operation data as third synchronization data and sending it to the first program; the first program receives the third synchronization data, parses the operation data contained therein, and executes the operation contained in the operation data in the Web application.

6. The method according to claim 1, characterized in that After the technical support communication connection is established between the first program and the second program, the method further includes loading a voice control component and / or a video control component on the Web application and the technical support terminal, receiving a trigger event of the voice control component by a user or a technical consultant to turn on or off voice communication, wherein the voice communication is performed on one side of the Web application or the technical support terminal, collecting sound data and sending it to the other side, and receiving and playing the sound data sent by the other side; Receive a click event of the user or technical consultant on the video control component to turn on or off video communication. The video communication collects video data through a camera on one side of the Web application or the technical support end as a first video and sends it to the other side, and receives the first video data sent by the other side and plays it.

7. The method according to claim 1, characterized in that After the technical support communication connection is established between the first program and the second program, the method further includes: Loading Tuya control components on the Web application and the technical support end; Receive a trigger event of the graffiti control component from a user or a technical support consultant to turn on or off a synchronous graffiti operation. When the synchronous graffiti is turned on, the graffiti operation is performed on one side of the Web application and the technical support end, and the graffiti result is synchronized on the other side; when graffiti is performed in the Web application, a first Canvas element for performing graffiti is generated or selected, and a first interception is started to intercept business operations occurring on the Web application; graffiti operation monitoring is started, and when a graffiti operation occurs, drawing data is generated based on the drawing operation on the first Canvas element, and the drawing data is sent as graffiti synchronization data; the graffiti synchronization data is received at the technical support end, and a second Canvas element for presenting graffiti content is created or selected on the upper layer of the current web page, and based on the graffiti synchronization The web application executes a drawing operation on the second Canvas element to make its display consistent with the first Canvas display; when executing graffiti in the technical support end, generates or selects a second Canvas element for executing graffiti, and starts a second interception to intercept the business operation occurring on the Web container; starts graffiti operation monitoring, generates drawing data based on the drawing operation on the second Canvas element when a graffiti operation occurs, and sends the drawing data as graffiti synchronization data; the Web application receives the graffiti synchronization data, creates or selects a first Canvas element for presenting graffiti content on the upper layer of its current web page, and executes a drawing operation on the first Canvas element based on the graffiti synchronization data to make its display consistent with the second Canvas display; When the synchronous graffiti is closed, the first Canvas element and the second Canvas element are hidden or deleted, the first interception and the second interception are released, and the graffiti operation state is exited.

8. The method according to claim 1, characterized in that After the technical support communication connection is established between the first program and the second program, the method further includes recording one or more of the first synchronization data and its corresponding time information, the second synchronization data and its corresponding time information, the third synchronization data and its corresponding time information, the graffiti synchronization data and its corresponding time information, the sound data and its corresponding time information, and the video data and its corresponding time information to generate technical support process record data; After the on-screen communication is completed, a start link for playing back the technical support process recording data is generated in the first program or the second program.

9. The method according to claim 1, characterized in that: After the technical support communication connection is established between the first program and the second program, the method further includes, in the Web application or the technical support end, loading a shared content setting component, receiving a click event of a user or a technical support consultant on the shared content setting component to set content for same-screen sharing, wherein the content for same-screen sharing includes one of a currently running desktop, other applications, files, and windows; after setting the same-screen sharing content, based on a specified type of shared content, collecting and generating a second video and sending it to the other side, wherein the second video is received and played on the other side.

10. A technical support system applied to a Web application, the technical support system comprising a Web application and a technical support terminal, the Web application is used to connect with a user to perform business operations, and the technical support terminal is used to connect with a technical consultant to provide online technical support for the user to use the Web application, wherein: The Web application includes a first program, which includes a connection module, a web page synchronization module, a tudou synchronization module, and an audio and video communication module, wherein: The connection module is used to send a technical support request, to establish a technical support communication connection with the second program, and to send a technical support end request to disconnect the technical support communication connection; The web page synchronization module is used to collect web page data based on the Web application to generate first synchronization data for transmission, and is also used to monitor changes in the web page data of the Web application, and when changes are monitored, collect web page data to generate second synchronization data for transmission, and is also used to receive third synchronization data, parse the operation data contained therein, and execute the operation contained in the operation data in the Web application; The audio and video communication module is used to collect sound data and send it to the other side, and is also used to receive and play the sound data sent by the other side, and is used to collect video data from the camera as first video data and send it to the other side, and is also used to receive and play the first video data sent by the other side; The graffiti synchronization module is used to perform graffiti, generate or select a first Canvas element for graffiti in the Web application, and collect and generate drawing data based on the drawing operation on the first Canvas element, and send the drawing data to the other side as graffiti synchronization data; it is also used to perform synchronous graffiti, receive the graffiti synchronization data sent by the other side, and perform drawing on the first Canvas element based on the graffiti synchronization data; it is also used to hide or delete the first Canvas element when the synchronous graffiti is closed; The technical support terminal includes a second program, which includes a connection module, a web page synchronization module, a Tuya synchronization module, and an audio and video communication module, wherein the second program also includes a synchronization Web container, wherein: The connection module is used to receive and process the technical support request, to establish a technical support communication connection with the first program, and to send an end request to disconnect the technical support communication connection; The web page synchronization module is used to create or specify a synchronization Web container for synchronization, to receive the first synchronization data, to load the web page synchronization data contained in the first synchronization data into the synchronization Web container, to receive the second synchronization data, to update the web page data in the synchronization Web container based on the web page synchronization data contained in the second synchronization data, and to monitor the operation events performed by the technical consultant in the synchronization Web container, and to collect the operation data based on the operation events and send them as the third synchronization data; The audio and video communication module is used to collect sound data and send it to the other side, and is also used to receive and play the sound data sent by the other side, and is used to collect video data from the camera as first video data and send it to the other side, and is also used to receive and play the first video data sent by the other side; The graffiti synchronization module is used to perform graffiti, generate or select a second Canvas element for graffiti, collect and generate drawing data based on the drawing operation on the second Canvas element, and send the drawing data to the other side as graffiti synchronization data; it is also used to perform synchronous graffiti, receive the graffiti synchronization data sent by the other side, and perform drawing on the second Canvas element based on the graffiti synchronization data; it is also used to hide or delete the second Canvas element when the synchronous graffiti is closed.

Images