Method of embedding plug-in video window into browser

Abstract

The present invention discloses a method for embedding a plug-in video plug-in window into a browser, relating to the field of Internet technology. The method comprises the following steps: S1, starting the plug-in program body before starting the browser; S2, enabling communication between the plug-in program body and the page JavaScript in the browser program; S3, determining the window handle in the current browser; S4, achieving the effect of floating the plug-in video plug-in window over the outermost window of the browser; S5, establishing a mouse hook program; S6, achieving transparency in the rectangular area where the plug-in video plug-in window and the browser's webpage menu window intersect; S7, displaying a snapshot of the plug-in video plug-in window at the plug-in video plug-in location, and hiding the plug-in video plug-in window to display a page dialog window. The present invention achieves the function of embedding a plug-in video plug-in into a browser for cross-browser use.

Description

Technical Field

[0001] The invention belongs to the technical field of Internet and relates to a method for embedding an external video plug-in window into a browser. Background Art

[0002] Rich web front-end applications are currently prevalent, and the BS architecture has significant advantages in various application scenarios and is increasingly being used. However, due to the functional limitations of HTML and JavaScript, web front-ends conflict with the requirements of rich web front-ends. Therefore, a multi-browser compatible plug-in technology is urgently needed to provide services that HTML cannot.

[0003] Currently available plug-in technologies include Flash and Active X, but both have flaws. A comparison is as follows: Flash technology is no longer supported by browsers and faces elimination; Active X control technology is only supported by Microsoft's own browsers, and not by browsers from other manufacturers. Therefore, there is an urgent need for a cross-browser video plug-in that is not affected by different browser manufacturers or versions, and can be embedded in any browser for use. Summary of the Invention

[0004] To overcome the deficiencies of the prior art, the present invention provides a method for embedding a plug-in video plug-in window into a browser, thereby enabling the plug-in video plug-in to be embedded into a browser without being restricted by browsers of different manufacturers or versions, and enabling the plug-in video plug-in to be embedded into a browser across browsers. The present invention is achieved through the following technical solution: The present invention provides a method for embedding a plug-in video plug-in window into a browser, comprising the following steps:

[0005] S1, start the plug-in program before starting the browser;

[0006] S2, after the user opens the browser page, the plug-in program body is connected to the browser page JavaScript using WebSocket technology; that is, the browser establishes WebSocket communication with the plug-in program body when it is started;

[0007] S3: When the user clicks the corresponding action with the mouse, the browser sends a message to the plug-in. After receiving the message, the plug-in determines the window handle in the current browser based on the current mouse coordinates and the coordinate and window positioning functions provided by Windows.

[0008] S4, the plug-in program body uses the browser's outermost window handle obtained in step S3 as the parent window, sets the MFC dialog window style to None, Child, and creates a CDialog dialog box to achieve the effect of the plug-in video plug-in window floating on the browser's outermost window;

[0009] S5, establish the mouse HOOK hook program;

[0010] S6, making the rectangular area where the external video plug-in window and the web page menu window of the browser intersect transparent, so as to be used for displaying a page window similar to a menu; by making the intersecting area transparent and invisible, the same effect as the web page window blocking the intersecting area, making the area invisible, is achieved;

[0011] S7, realizing the snapshot display of the plug-in video plug-in window at the plug-in video plug-in position, and hiding the plug-in video plug-in, and being used to display the page dialog type window.

[0012] As a preferred solution, in step S3, the window handle obtained is the browser's internal window handle. After obtaining the browser's internal window handle, the outer window handle is obtained by recursively calling the Windows Forms function GetParent(HWND) until the outermost window handle is obtained. Because each browser has a different window structure, but all browsers have an outermost window, the outermost window of the browser is obtained; this ensures that the external video plug-in window is independent of the browser.

[0013] As a preferred solution, in step S4, after obtaining the outermost window handle of the browser in S3, a plug-in video plug-in window is created in the plug-in program body; the outermost window handle of the plug-in video plug-in window is created using MFC's CDialog floating style; clicking the browser page with the mouse generates a change in Z-Order, and the plug-in video plug-in will change along with the browser, that is, the plug-in video plug-in and the browser have synchronization and integrity; at this time, the plug-in video plug-in also maintains good consistency with the browser in state changes such as minimization, maximization, and loss of focus.

[0014] As a preferred solution, the plug-in video window is created by setting the styles to NONE and CHILD in an MFC dialog box and calling the CDialog::Create(nIDTemplate, CWnd *Parent); function to create a floating window above the browser. The Parent parameter in the function uses the handle of the newly identified outermost browser window. The dialog box with the NONE and CHILD styles is constructed based on the interface resource nIDTemplate.

[0015] As a preferred solution, step S5 is specifically as follows: establishing a mouse HOOK hook program in the plug-in program body; the HOOK hook program listens to all events from the mouse, that is, listens to and identifies operations related to the browser window; when the browser is moved, the plug-in video plug-in and the browser can be synchronized and moved in real time.

[0016] As a preferred solution, the plug-in video plug-in window suspended in S4 will still block the web page pop-up menu window behind it, that is, the plug-in video plug-in window and the browser's web page menu window will have intersecting and overlapping rectangular areas; the current external program body can communicate with the page JavaScript in the browser program through WebSocket; the page JavaScript already knows the desktop position of the plug-in video plug-in, and it can also calculate the global coordinates of the pop-up web page element; in this way, the rectangular area that needs to be transparent in the plug-in video plug-in can be calculated; the coordinates of the rectangular area are sent to the plug-in program body through WebSocket, and the plug-in program body deducts the intersection part according to the original RGN area of the plug-in video plug-in window, and sets the new RGN of the menu window, thereby achieving transparency of the specified rectangular area.

[0017] As a preferred solution, the external video plug-in window suspended in S4 will still block the webpage pop-up dialog window behind it, that is, the external video plug-in window and the browser webpage dialog window will have an overlapping rectangular area. The external program can now communicate with the browser's page JavaScript via WebSocket. The external program sends a snapshot of the external video plug-in window to the webpage via WebSocket. The webpage displays the snapshot image at the coordinates of the video plug-in window in the HTML. Then, the pop-up dialog window is displayed.

[0018] The beneficial effects of the present invention are:

[0019] The present invention uses a method of suspending an external video plug-in window on a browser to make the external video plug-in window and the browser become an integral whole, that is, to achieve synchronization between the external video plug-in window and the browser; the effect when the browser is minimized and restored to normal is more natural, which is better than the currently implemented method of displaying the plug-in window before the browser.

[0020] The present invention uses a global hook program to locate the position of the browser window in real time, determines whether the current browser is being dragged through the hook program, and realizes real-time update of the position of the plug-in video plug-in window during the process of the hook program processing the browser position data information.

[0021] The present invention uses a web page to calculate the intersection rectangular area of the external video plug-in window and the web page pop-up menu, and digs out the area from the external video plug-in window, that is, makes the area transparent, and achieves the effect of the web page pop-up window floating above the external video plug-in window.

[0022] When a webpage dialog window pops up, the present invention uses a snapshot image of an external video plug-in window to replace the plug-in display, hides the external video plug-in, and then calls a normal webpage dialog window to display.

[0023] The present invention realizes the function of embedding a cross-browser external video plug-in into a browser without being restricted by browsers of different manufacturers and versions. The method is simple, easy to use and has obvious beneficial effects. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] The present invention will be further described below with reference to the accompanying drawings.

[0025] Figure 1 The present invention is a flow chart of embedding the external video plug-in into a browser.

[0026] Figure 2 This is a diagram of the interaction between the external video plug-in of the present invention and the browser. DETAILED DESCRIPTION

[0027] To make the above-mentioned objects, features, and advantages of the present invention more readily apparent, specific embodiments of the present invention are described in detail below with reference to the accompanying drawings. The following description sets forth numerous specific details to facilitate a full understanding of the present invention. However, the present invention can be implemented in many other ways than those described herein, and those skilled in the art may make similar modifications without departing from the scope of the present invention. Therefore, the present invention is not limited to the specific embodiments disclosed below.

[0028] The accompanying drawings are specific embodiments of the method for embedding a plug-in video plug-in window into a browser according to the present invention. Figure 2 As shown, a plug-in video plug-in window is created in the plug-in program body.

[0029] This embodiment includes the following steps:

[0030] S1, start the external program before starting the browser;

[0031] S2, after the user opens the browser page, the plug-in program body is connected to the browser page JavaScript using WebSocket technology; that is, the browser establishes WebSocket communication with the plug-in program body when it is started;

[0032] S3: When the user clicks the corresponding action with the mouse, the browser sends a message to the plug-in. After receiving the message, the plug-in determines the window handle in the current browser based on the current mouse coordinates and the coordinate and window positioning functions provided by Windows.

[0033] S4, the plug-in program body uses the browser's outermost window handle obtained in step S3 as the parent window, sets the MFC dialog window style to None, Child, and creates a CDialog dialog box to achieve the effect of the plug-in video plug-in window floating on the browser's outermost window;

[0034] S5, establish the mouse HOOK hook program;

[0035] S6, making the rectangular area where the external video plug-in window and the browser's webpage menu window intersect transparent, for use in a menu-like page window display. By making the intersecting area transparent and invisible, the same effect as the webpage window blocking the intersecting area, making the area invisible, is achieved;

[0036] S7, realizing the snapshot display of the plug-in video plug-in window at the plug-in video plug-in position, and hiding the plug-in video plug-in, and being used to display the page dialog type window.

[0037] The WebSocket communication method is a service in the JavaScript library. It is a technical service implemented based on third-party standards independent of browser manufacturers. Generally, for security reasons, browsers cannot directly access local resources. Therefore, the use of this technology makes it possible for Web browsers to communicate with the plug-in program body.

[0038] In step S3, the window handle obtained is the browser's internal window handle. After obtaining the browser's internal window handle, the outer window handle is obtained by recursively calling the Windows Forms function GetParent(HWND) until the outermost window handle is obtained. Because each browser has a different window structure, but all browsers have an outermost window, the outermost window of the browser is obtained. This ensures that the external video plug-in window is independent of the browser.

[0039] In step S4, after obtaining the outermost window handle of the browser in S3, a plug-in video plug-in window is created in the plug-in program body; the outermost window handle of the plug-in video plug-in window is created using MFC's CDialog floating style; when the mouse clicks on the browser page to generate a change in Z-Order, the plug-in video plug-in will change along with the browser, that is, the plug-in video plug-in and the browser have synchronization and integrity; at this time, the plug-in video plug-in also maintains good consistency with the browser in state changes such as minimization, maximization, and loss of focus.

[0040] The function of the plug-in window of the video plug-in floating on the browser is based on the service provided by the Windows desktop operating system and is a third-party technology unrelated to the browser program;

[0041] By using this technology, the plug-in video plug-in window becomes a child window of the browser window, thus becoming a whole with the browser window; thus, the behavior of the plug-in video plug-in during Z-ORDER is consistent with that of the browser window.

[0042] The plug-in video window is created by setting the NONE and CHILD styles in an MFC dialog box and calling the CDialog::Create(nIDTemplate, CWnd *Parent); function to float within the browser window. The Parent parameter in the function uses the handle of the newly identified outermost browser window. A dialog box with the NONE and CHILD styles is constructed based on the interface resource nIDTemplate, with the parent window being the handle of the newly identified outermost browser window. The plug-in video window is embedded within the browser program by calling specific methods of the desktop system's functions.

[0043] Step S5 is specifically as follows: a mouse HOOK hook program is established in the plug-in program body; the HOOK hook program listens to all events from the mouse, that is, it listens to and identifies operations related to the browser window; for example, when the mouse moves the browser, the HOOK hook program can move the plug-in video plug-in according to the displacement of the mouse movement, thereby realizing the synchronous real-time movement of the plug-in video plug-in and the browser.

[0044] The window used by the frame listening browser action is the outermost window of the browser program. This method is also independent of the window organization method in the specific browser. Each browser program has an outermost window and several internal sub-windows with different organizations. This makes this method have the same behavioral characteristics on different browsers, so that it can achieve the effect of being usable across browsers.

[0045] Windows Hook mouse hook technology is a technology provided by the Windows system and is a third-party technology unrelated to the browser program. Our plug-in video plug-in window is an external program. Using this technology allows us to obtain and analyze the mouse operations on the browser with relatively low latency, so that the plug-in video plug-in window can be moved in real time, so that the plug-in video plug-in window and the browser move at the same time. This technology makes this linkage operation highly real-time.

[0046] The suspended external video plug-in window in S4 will still block the web page pop-up menu window behind it, that is, the external video plug-in window and the browser's web page menu window will have intersecting and overlapping rectangular areas; the current external program body can communicate with the page JavaScript in the browser program through WebSocket; the page JavaScript already knows the desktop position of the external video plug-in, and it can calculate and pop up the global coordinates of the web page elements; in this way, the rectangular area that needs to be transparent in the external video plug-in can be calculated; the coordinates of the rectangular area are sent to the external program body through WebSocket, and the external program body deducts the intersection part according to the original RGN area of the external video plug-in window, and sets the new RGN of the window, thereby achieving transparency of the specified rectangular area.

[0047] The suspended external video plug-in window in S4 still blocks the webpage pop-up dialog window behind it, meaning that the external video plug-in window and the browser's webpage dialog window have overlapping rectangular areas. The external program can now communicate with the browser's JavaScript page via WebSocket. The external program sends a snapshot of the external video plug-in window to the webpage via WebSocket. The webpage displays the snapshot at the coordinates of the video plug-in window in the HTML. Then, the pop-up dialog window is displayed.

[0048] As attached Figure 1A specific embodiment of the present invention is shown as follows: after the computer is started, the plug-in program is started. In this embodiment, the plug-in program is automatically started when the computer is started; WebSocket communication is established between the plug-in program and the browser; a click in the browser triggers a function event and sends a message to the plug-in program via WebSocket; the plug-in program obtains the handle of the clicked window in the browser based on the coordinates of the mouse click; recursively obtains the handle of the top-level window based on the clicked window handle; then, an MFC dialog is used to create a plug-in video plug-in window; a hook procedure is created based on the browser window handle; when the browser displays an HTML page pop-up menu window, the browser notifies the plug-in video plug-in window via WebSocket to hide a rectangular area of itself (i.e., make it transparent); at this point, the plug-in video plug-in window is initialized. When the browser displays an HTML page pop-up dialog window, the browser displays a snapshot of the plug-in video plug-in window sent by the plug-in program via WebSocket, and then displays the HTML pop-up dialog window.

[0049] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the above embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the above embodiments, or make equivalent replacements for some or all of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the scope of the technical solutions of the embodiments of the present invention, and they should all be included in the scope of the claims and description of the present invention.

Claims

1. A method for embedding a plug-in video plug-in window into a browser, characterized by: The steps include: S1, start the plug-in program before starting the browser; S2, after the user opens the browser page, the WebSocket technology is used to realize the communication between the plug-in program and the page JavaScript in the browser program; S3: When the user clicks the corresponding action with the mouse, the browser sends a message to the plug-in. After receiving the message, the plug-in determines the window handle in the current browser based on the current mouse coordinates and the coordinate and window positioning functions provided by Windows. S4, the plug-in program body uses the browser's outermost window handle obtained in step S3 as the parent window, sets the MFC dialog window style to None, Child, and creates a CDialog dialog box to achieve the effect of the plug-in video plug-in window floating on the browser's outermost window; S5, establishing a mouse hook program in the plug-in program body; the hook program listens to all events from the mouse, that is, listens to and recognizes operations related to the outermost window of the browser; Realize the synchronous real-time movement of external video plug-in and browser; S6, making the rectangular area where the external video plug-in window and the web page menu window of the browser intersect transparent; S7, realizing the snapshot display of the plug-in video plug-in window at the plug-in video plug-in position, and hiding the plug-in video plug-in window to display the page dialog type window.

2. The method for embedding a plug-in video window into a browser according to claim 1, wherein: In step S3, the window handle obtained is the window handle inside the browser. After obtaining the window handle inside the browser, the outer window handle is obtained by recursively calling the Windows form function GetParent(HWND) until the outermost window handle is obtained.

3. The method for embedding a plug-in video window into a browser according to claim 1, wherein: In step S4, after obtaining the outermost window handle of the browser in S3, a plug-in video plug-in window is created in the plug-in program body; the outermost window handle of the plug-in video plug-in window is created using MFC's CDialog floating style; when the mouse clicks on the browser page to generate a change in Z-Order, the plug-in video plug-in will change along with the browser, that is, the plug-in video plug-in and the browser are synchronized and integrated.

4. The method for embedding a plug-in video window into a browser according to claim 1, wherein: The plug-in video plug-in window sets the style to NONE and CHILD through the MFC dialog box, and calls the CDialog::Create(nIDTemplate, CWnd *Parent); function to achieve the effect of creating a floating browser window; the Parent in the function parameter uses the outermost window handle of the browser that has just been identified.

5. The method for embedding a plug-in video window into a browser according to claim 1, wherein: The suspended external video plug-in window in step S4 will still block the web page pop-up menu window behind it, that is, the external video plug-in window and the browser's web page window will have intersecting and overlapping rectangular areas; the external program body and the page JavaScript in the browser program currently communicate via WebSocket; the page JavaScript already knows the desktop location of the external video plug-in, and it calculates and pops up the global coordinates of the web page element; in this way, the rectangular area that needs to be transparent in the external video plug-in is calculated; the coordinates of the rectangular area are sent to the external program body via WebSocket, and the external program body deducts the intersecting and overlapping rectangular area based on the original RGN area of the external video plug-in window, and sets the new RGN of the window, thereby achieving transparency of the specified rectangular area.

6. The method for embedding a plug-in video window into a browser according to claim 1, wherein: The suspended external video plug-in window in step S4 will still block the pop-up dialog window of the web page behind it; the external program body and the page JavaScript in the browser program communicate through WebSocket; the external program body sends a snapshot image of the external video plug-in window to the web page through WebSocket; the web page displays the snapshot image at the coordinates of the video plug-in window in HTML, and displays a pop-up dialog window.

Images