Video stream playing method and device, electronic equipment and storage medium

Abstract

The embodiment of the invention provides a video stream playing method and device, electronic equipment and a storage medium, and relates to the technical field of desktop application, and the method comprises the steps: responding to a video playing instruction through a browser end, determining a corresponding video playing request, and transmitting the video playing request to a desktop end through websocket communication connection; the method comprises the following steps: in response to a video playing request through a desktop end, acquiring a video playing parameter corresponding to the video playing request, setting a second display window corresponding to the desktop end as a topmost layer, and mapping the second display window to a video playing area according to the video playing parameter; and in response to mapping the second display window to the video playing area, playing the target video corresponding to the video playing request through the desktop end, so as to play the target video in the video playing area, thereby ensuring the playing fluency of the video stream.

Description

Technical Field

[0001] The present invention relates to the field of desktop application technology, and in particular to a video stream playback method, a video stream playback device, an electronic device and a computer-readable storage medium. Background Art

[0002] With the development and deepening of computer technology and network technology in the Internet, video playback and the playback of multiple video streams in security systems have gradually shifted from desktop applications to Web APPs at the browser level. In this period of rapid development of the Web front-end, Web front-end technology is not only more efficient in development and iteration than traditional desktop applications, but also more convenient in user experience and interaction. However, with the increasing business demand for massive video stream data, when it is necessary to process multiple or even dozens of video streams, the browser often freezes, freezes, crashes, and other situations due to the limitations of browser memory and JavaScript decoding capabilities, resulting in loss of operation data. Summary of the invention

[0003] The embodiments of the present invention provide a method, device, electronic device and computer-readable storage medium for playing a video stream, so as to solve or partially solve the problem of lag when playing multiple video streams.

[0004] The embodiment of the present invention discloses a video stream playback method, which is applied to a video playback system, wherein the video playback system at least includes a browser end and a desktop end that establishes a websocket communication connection with the browser end, and a video playback area is configured on a first display window corresponding to the browser end. The method includes:

[0005] The browser side responds to the video play instruction, determines a corresponding video play request, and transmits the video play request to the desktop side through the websocket communication connection;

[0006] In response to the video play request, the desktop terminal obtains video play parameters corresponding to the video play request, sets the second display window corresponding to the desktop terminal as the top layer, and maps the second display window to the video play area according to the video play parameters;

[0007] In response to mapping the second display window to the video playback area, the target video corresponding to the video playback request is played through the desktop end to play the target video in the video playback area.

[0008] In an optional embodiment, determining a corresponding video playback request in response to the video playback instruction includes:

[0009] Obtaining display parameters of the current video playback area relative to the first display window;

[0010] Obtain the video stream channel corresponding to the video playback instruction;

[0011] The display parameter and the video stream channel are used to generate a video play request corresponding to the video play instruction.

[0012] In an optional embodiment, the display parameter includes at least a position parameter and a size parameter, and obtaining the display parameter of the current video playback area relative to the first display window includes:

[0013] Acquire a current display ratio of the first display window and a current display position of a graphical user interface of a terminal device running the video playback system;

[0014] A first position parameter of the video playback area relative to the first display window is calculated based on the current display position, and a first size parameter corresponding to the current display ratio is obtained.

[0015] In an optional embodiment, the calculating, based on the current display position, a first position parameter of the video playback area relative to the first display window includes:

[0016] Extracting a first horizontal offset and a first vertical offset of the first display window relative to the graphical user interface from the current display position;

[0017] Obtaining a second horizontal offset and a second vertical offset of the video playback area relative to the first display window;

[0018] The first horizontal offset, the first vertical offset, the second horizontal offset, and the second vertical offset are used to construct the position parameters of the video playback area equivalent to the first display window.

[0019] In an optional embodiment, the size parameter includes at least a window height and a window width corresponding to the video playback area.

[0020] In an optional embodiment, it also includes:

[0021] In response to the window adjustment instruction for the browser, obtaining a target display ratio and a target display position corresponding to the first display window after adjustment;

[0022] A second position parameter of the video playback area relative to the first display window is calculated based on the target display position, and a second size parameter corresponding to the target display ratio is obtained.

[0023] In an optional embodiment, it also includes:

[0024] If the browser detects that a window pops up, and the location of the target pop-up window is located in the video playback area, a transparency parameter for the target pop-up window is obtained, and the target pop-up window is displayed according to the transparency parameter.

[0025] The embodiment of the present invention further discloses a video stream playback device, which is applied to a video playback system, wherein the video playback system at least includes a browser end and a desktop end that establishes a websocket communication connection with the browser end, and a video playback area is configured on a first display window corresponding to the browser end. The device includes:

[0026] The request generation module located at the browser end is used to respond to the video playback instruction, determine the corresponding video playback request, and transmit the video playback request to the desktop end through the websocket communication connection;

[0027] A window processing module located on the desktop end is used to respond to the video playback request, obtain video playback parameters corresponding to the video playback request, set the second display window corresponding to the desktop end as the topmost layer, and map the second display window to the video playback area according to the video playback parameters;

[0028] The playback module located on the desktop end is used to play the target video corresponding to the video playback request through the desktop end in response to mapping the second display window to the video playback area, so as to play the target video in the video playback area.

[0029] In an optional embodiment, the request generation module is specifically used to:

[0030] Obtaining display parameters of the current video playback area relative to the first display window;

[0031] Obtain the video stream channel corresponding to the video playback instruction;

[0032] The display parameter and the video stream channel are used to generate a video play request corresponding to the video play instruction.

[0033] In an optional embodiment, the display parameter includes at least a position parameter and a size parameter, and the request generation module is specifically used to:

[0034] Acquire a current display ratio of the first display window and a current display position of a graphical user interface of a terminal device running the video playback system;

[0035] A first position parameter of the video playback area relative to the first display window is calculated based on the current display position, and a first size parameter corresponding to the current display ratio is obtained.

[0036] In an optional embodiment, the request generation module is specifically used to:

[0037] Extracting a first horizontal offset and a first vertical offset of the first display window relative to the graphical user interface from the current display position;

[0038] Obtaining a second horizontal offset and a second vertical offset of the video playback area relative to the first display window;

[0039] The first horizontal offset, the first vertical offset, the second horizontal offset, and the second vertical offset are used to construct the position parameters of the video playback area equivalent to the first display window.

[0040] In an optional embodiment, the size parameter includes at least a window height and a window width corresponding to the video playback area.

[0041] In an optional embodiment, it also includes:

[0042] A window adjustment module, configured to respond to a window adjustment instruction for the browser end and obtain a target display ratio and a target display position corresponding to the first display window after adjustment;

[0043] The parameter adjustment module is used to calculate the second position parameter of the video playback area relative to the first display window based on the target display position, and obtain a second size parameter corresponding to the target display ratio.

[0044] In an optional embodiment, it also includes:

[0045] The transparency processing module is used to obtain the transparency parameters for the target pop-up window if the browser detects a window pop-up and the position of the target pop-up window is located in the video playback area, and display the target pop-up window according to the transparency parameters.

[0046] The embodiment of the present invention further discloses an electronic device, comprising a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other via the communication bus;

[0047] The memory is used to store computer programs;

[0048] The processor is used to implement the method described in the embodiment of the present invention when executing the program stored in the memory.

[0049] The embodiment of the present invention further discloses a computer-readable storage medium having instructions stored thereon, which, when executed by one or more processors, enables the processors to execute the method described in the embodiment of the present invention.

[0050] The embodiments of the present invention include the following advantages:

[0051] In an embodiment of the present invention, applied to a video playback system, the system may at least include a browser end and a desktop end that establishes a websocket communication connection with the browser end, a video playback area is configured on a first display window corresponding to the browser end, and during the operation of the system, when it is necessary to play a corresponding video stream, the browser end can respond to a video playback instruction, determine a corresponding video playback request, transmit the video playback request to the desktop end through a websocket communication connection, the desktop end responds to the video playback request, obtains video playback parameters corresponding to the video playback request, sets a second display window corresponding to the desktop end to the topmost layer, and maps the second display window to the video playback area according to the video playback parameters. , and then in response to mapping the second display window to the video playback area, the target video corresponding to the video playback request is played through the desktop end to play the target video in the video playback area, thereby integrating the browser end and the desktop end, and the user only needs to operate on the browser end to control the two systems at the same time, which greatly simplifies the efficiency of user operations and improves the convenience of operation. At the same time, the system combines the high efficiency of browser front-end development, so that users can complete various business operations more quickly and conveniently, and integrates the desktop end technology to make up for the limitations of the browser end in the video playback process, which can not only effectively improve work efficiency, but also bring users a smoother and more efficient video playback experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0052] Figure 1 is a flowchart of a method for playing a video stream provided in an embodiment of the present invention;

[0053] Figure 2 is a schematic diagram of a graphical user interface provided in an embodiment of the present invention;

[0054] Figure 3 is a schematic diagram of a process of video stream playback provided in an embodiment of the present invention;

[0055] Figure 4 is a structural block diagram of a video stream playback device provided in an embodiment of the present invention;

[0056] Figure 5It is a block diagram of an electronic device provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0057] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, the present invention is further described in detail below with reference to the accompanying drawings and specific embodiments.

[0058] As an example, by taking advantage of the high running efficiency, fast decoding capability, and large memory of desktop applications, a video stream player is developed to support the simultaneous playback of multiple video streams, and the high iterative efficiency of Web-side development is used to develop other business needs. However, this solution has the problem that users need to log in to the browser system and the desktop application at the same time to complete their daily work.

[0059] In this regard, in the present invention, by constructing a corresponding video playback system, the system may at least include a browser end and a desktop end that establishes a websocket communication connection with the browser end, a video playback area is configured on a first display window corresponding to the browser end, and during the operation of the system, when it is necessary to play a corresponding video stream, the browser end may respond to a video playback instruction, determine a corresponding video playback request, transmit the video playback request to the desktop end through a websocket communication connection, the desktop end responds to the video playback request, obtains video playback parameters corresponding to the video playback request, sets a second display window corresponding to the desktop end as the topmost layer, and maps the second display window to the video playback according to the video playback parameters. area, and then in response to mapping the second display window to the video playback area, the target video corresponding to the video playback request is played through the desktop side to play the target video in the video playback area, thereby integrating the browser side with the desktop side, and the user only needs to operate on the browser side to control the two systems at the same time, which greatly simplifies the efficiency of user operations and improves the convenience of operation. At the same time, the system combines the high efficiency of browser front-end development, so that users can complete various business operations more quickly and conveniently, and integrates the desktop technology to make up for the limitations of the browser side in the video playback process, which can not only effectively improve work efficiency, but also bring users a smoother and more efficient video playback experience.

[0060] Reference Figure 1 , shows a flowchart of the steps of a video stream playback method provided in an embodiment of the present invention, which is applied to a video playback system, wherein the video playback system at least includes a browser end and a desktop end that establishes a websocket communication connection with the browser end, and a video playback area is configured on the first display window corresponding to the browser end, and specifically may include the following steps:

[0061] Step 101, determining a corresponding video play request in response to a video play instruction through the browser end, and transmitting the video play request to the desktop end through the websocket communication connection;

[0062] In an embodiment of the present invention, a video playback system (hereinafter referred to as the system) can be used to process multiple video streams. The system may include a browser end and a desktop end that establishes a websocket communication connection with the browser end. During operation, a user can download a corresponding installation package through a browser, and install the video playback system on a terminal device through the installation package. Then, the system can be used by logging in to a corresponding user account in the opened browser end during operation.

[0063] During the operation of the system, the browser side serves as a window for user interaction, while the desktop side is hidden by default. When the user opens the system, a corresponding video playback area can be reserved in the first display window corresponding to the browser side, and the video playback area can be used to play the video stream. Therefore, by integrating the browser side with the desktop side, the user only needs to operate on the browser side to control the two systems at the same time, which greatly simplifies the efficiency of user operations and improves the convenience of operation. At the same time, the system combines the high efficiency of browser front-end development, allowing users to complete various business operations more quickly and conveniently, and integrates desktop technology to make up for the limitations of the browser side in the video playback process. It can not only effectively improve work efficiency, but also bring users a smoother and more efficient video playback experience.

[0064] During the user's use of the system, if video playback is involved, the system can respond to the video playback instruction through the browser, determine the corresponding video playback request, and transmit the video playback request to the desktop through the websocket communication connection, so as to call the desktop to obtain the corresponding video stream based on the video playback request, and play the corresponding video stream in the video playback area. Optionally, if the system operation is unrelated to video playback, the desktop can be hidden. For example, when using the Qt framework, the this->hide() method can be called to hide the desktop window, thereby integrating the browser with the desktop and using the browser as a window for user interaction, which greatly simplifies the efficiency of user operations and improves operational convenience.

[0065] It should be noted that during the operation of the system, the browser itself cannot directly detect the device parameters of the terminal device. After the browser communicates with the desktop through websocket, it can obtain the corresponding device parameters through the desktop and display the corresponding device parameters in the first display window, such as memory usage information, bandwidth, network delay, etc. Therefore, based on the browser and combined with the relevant functions of the desktop, complex business logic and system-level interaction that the browser itself cannot complete can be realized, thereby expanding more business functions.

[0066] In some feasible implementations, when the corresponding video stream needs to be played, the browser side can respond to the video playback instruction, obtain the display parameters of the current video playback area relative to the first display window, and obtain the video stream channel corresponding to the video playback instruction, and then use the display parameters and the video stream channel to generate a video playback request corresponding to the video playback instruction. Among them, the display parameters can be used to determine the position, size, etc. of the video playback area relative to the first display window. After determining the display parameters corresponding to the video playback area, the browser side can transmit the display parameters to the desktop side through the websocket communication connection, so that the desktop side determines the playback position corresponding to the video stream based on the display parameters.

[0067] It should be noted that, for the desktop side, on the one hand, it is used to play the corresponding video stream. During the playback process, the output path is the video playback area in the browser side. Therefore, when the video stream needs to be played, the browser side needs to pass the display parameters corresponding to the video playback area to the desktop side, so that the desktop side can determine the output path corresponding to the video stream; on the other hand, it can also be used to obtain the corresponding device parameters of the terminal device and transmit them to the browser side through the websocket communication connection, so that the browser side can display the corresponding device status in the first display window.

[0068] Among them, the display parameters include at least position parameters and size parameters. The browser side can first obtain the current display ratio of the first display window and the current display position relative to the graphical user interface of the terminal device running the video playback system, and then calculate the first position parameter of the video playback area relative to the first display window based on the current display position, and obtain the first size parameter corresponding to the current display ratio.

[0069] In a specific implementation, the browser can extract the first horizontal offset and the first vertical offset of the first display window relative to the graphical user interface from the current display position, and obtain the second horizontal offset and the second vertical offset of the video playback area relative to the first display window, and then construct the position parameters of the video playback area equivalent to the first display window by the first horizontal offset, the first vertical offset, the second horizontal offset and the second vertical offset. Among them, the size parameters at least include the window height and the window width corresponding to the video playback area.

[0070] In one example, referring to Figure 2 , shows a schematic diagram of a graphical user interface provided in an embodiment of the present invention, the terminal device runs a video playback system, and displays a corresponding first display window and a desktop through a graphical user interface. In a specific implementation, the desktop window is hidden by default. When a user opens a video preview interface on a browser, the system can reserve a blank area corresponding to the video playback area on the page. <div class＝”client-preview-container”> , and calculate the corresponding position and size of the area. The size is the size of the video playback area, and the position can be calculated by the browser method to calculate the horizontal offset and vertical offset. Among them, for the horizontal offset, it can be the current browser offset from the left side of the screen outterX and the left side of the browser from the preview window <div class＝”client-preview-container”> The sum of the offset innerX on the left; similarly, the vertical offset is calculated by the browser method as the browser's current offset outterY from the top of the screen and the browser's top distance preview window The sum of the upper offset innerY is calculated, so that the video playback area can be located in the first display window corresponding to the browser end by calculating the corresponding offset parameter, so that the desktop end can determine the output path of the video stream.

[0071] In addition, the size parameter represents the area size of the video playback area in the first display window. As the display ratio of the first display window changes, the size parameters of the video playback area are also adjusted accordingly. A mapping relationship between the display ratio of the first display window and the size parameters of the video playback area can be constructed. After the display ratio of the first display window is determined, the size parameters corresponding to the video playback area can be read through the mapping relationship, such as determining the window height and window width corresponding to the video playback area based on the target display ratio. The present invention does not impose any restrictions on this.

[0072] For example, assuming that the original display ratio of the first display window corresponding to the browser end is 100%, and the video playback area has a display ratio of 100% in the first display window, and the size is width = 800px, height = 600px, then the corresponding mapping relationship can be constructed as shown in the following Table 1:

[0073] Display ratio (%) Window width (px) Window height (px) 50％ 400 300 75％ 600 450 100％ 800 600 125％ 1000 750 150％ 1200 900

[0074] Table 1

[0075] By constructing an upload mapping relationship, during the operation of the system, as the display ratio of the first display window corresponding to the browser changes, the size parameters corresponding to the video playback area can be quickly determined. It should be noted that the parameters in the above Table 1 are only examples. In actual applications, they can be adjusted according to actual needs, and the present invention does not limit this.

[0076] Step 102, in response to the video play request, the desktop terminal obtains video play parameters corresponding to the video play request, sets the second display window corresponding to the desktop terminal as the topmost layer, and maps the second display window to the video play area according to the video play parameters;

[0077] In an embodiment of the present invention, after the desktop side receives the video playback request sent by the browser side, the corresponding video playback parameters can be extracted from the video playback request, and then the second display window corresponding to the desktop side can be set to the top layer, and the second display window can be mapped to the video playback area according to the video playback parameters, so that the video screen played on the desktop side can be mapped to the video playback area of ​​the browser side. Therefore, on the basis of the browser side, by integrating the technology of the desktop side, the memory size limitation and decoding operation efficiency limitation of the browser side in video stream playback can be effectively compensated, so that users can smoothly play high-definition video streams in this system without worrying about insufficient browser memory or low decoding efficiency.

[0078] In the specific implementation, after the desktop receives the video playback request sent by the browser through the websocket communication connection, it can extract relevant data from the video playback request, such as hannelId: the video stream channel passed in by the B end; x: the horizontal position of the window; y: the vertical position of the window; width: the width of the window; height: the height of the window, etc., and then the second display window can be displayed based on the relevant function method this->show() in the Qt framework, and the Qt::WindowStaysOnTopHint function in the Qt framework is called to set the second display window as the topmost layer, and at the same time set the display position and size of the second display window to the parameters passed in by the browser, so that the second display window can be perfectly covered in the video playback area in the browser.

[0079] Step 103, in response to mapping the second display window to the video playback area, playing the target video corresponding to the video playback request through the desktop end, so as to play the target video in the video playback area.

[0080] After the desktop maps the second display window to the video playback area based on the video playback parameters, the video screen played on the desktop can be played directly in the video playback area. By integrating the browser and the desktop, the user only needs to operate on the browser to control the two systems at the same time, which greatly simplifies the efficiency of user operations and improves the convenience of operation. At the same time, the system combines the high efficiency of browser front-end development, allowing users to complete various business operations more quickly and conveniently, and integrates desktop technology to make up for the limitations of the browser in the video playback process. It can not only effectively improve work efficiency, but also bring users a smoother and more efficient video playback experience.

[0081] In addition, when the user adjusts the first display window corresponding to the browser, the browser can respond to the window adjustment instruction for the browser, obtain the target display ratio and target display position corresponding to the adjusted first display window, and calculate the second position parameter of the video playback area relative to the first display window based on the target display position, and obtain the second size parameter corresponding to the target display ratio, and then transmit the adjusted display parameters to the desktop in real time through the websocket communication connection, so that the desktop can adjust the corresponding output path in real time, so that the video playback area can adaptively adjust the display position and display size, etc. as the window of the first display window changes (size changes or position changes, etc.).

[0082] In addition, for the browser side, it can be configured with corresponding components, such as pop-up windows, drawers, etc. For such components, they need to be displayed in the video playback area, and the video playback area belongs to the desktop side and is set to be displayed at the top level. In an embodiment of the present invention, if the browser side detects that a window pops up, and the position of the target pop-up window is located in the video playback area, the transparency parameters for the target pop-up window are obtained, and the target pop-up window is displayed according to the transparency parameters. Thus, through the transparency processing, the occlusion of the video picture can be reduced while ensuring the normal display of the component, so as to ensure the visual experience of video playback.

[0083] For example, you can use the relevant functions in the Qt framework: painter.setCompositionMode(QPainter::CompositionMode_DestinationIn); painter.fillRect(QRect(x, y, width, height), QColor(0, 0, 0, 0)); make the corresponding position of the pop-up window or drawer partially transparent, so that the interactive interface of the B side can be displayed normally.

[0084] In one example, referring to Figure 3 , shows a schematic diagram of the process of video stream playback provided in an embodiment of the present invention. The user can log in to the system in the browser. During the operation of the system, the client application is pulled up and initialized, and then a websocket connection is established between the browser and the client application. Then the browser can notify the client to display and play the video stream through websocket communication. The client application displays the window of the corresponding position and size according to the parameters passed by the browser, and plays the video. In addition, other interactive services can be carried out between the browser and the client application through websocket communication, which is not limited by the present invention.

[0085] It should be noted that the embodiments of the present invention include but are not limited to the above examples. It is understandable that those skilled in the art can also make settings according to actual needs under the guidance of the ideas of the embodiments of the present invention, and the present invention is not limited to this.

[0086] In an embodiment of the present invention, applied to a video playback system, the system may at least include a browser end and a desktop end that establishes a websocket communication connection with the browser end, a video playback area is configured on a first display window corresponding to the browser end, and during the operation of the system, when it is necessary to play a corresponding video stream, the browser end can respond to a video playback instruction, determine a corresponding video playback request, transmit the video playback request to the desktop end through a websocket communication connection, the desktop end responds to the video playback request, obtains video playback parameters corresponding to the video playback request, sets a second display window corresponding to the desktop end to the topmost layer, and maps the second display window to the video playback area according to the video playback parameters. , and then in response to mapping the second display window to the video playback area, the target video corresponding to the video playback request is played through the desktop end to play the target video in the video playback area, thereby integrating the browser end and the desktop end, and the user only needs to operate on the browser end to control the two systems at the same time, which greatly simplifies the efficiency of user operations and improves the convenience of operation. At the same time, the system combines the high efficiency of browser front-end development, so that users can complete various business operations more quickly and conveniently, and integrates the desktop end technology to make up for the limitations of the browser end in the video playback process, which can not only effectively improve work efficiency, but also bring users a smoother and more efficient video playback experience.

[0087] In order to enable those skilled in the art to better understand the technical solutions in the embodiments of the present invention, the following examples are used for exemplary description:

[0088] The browser-layer application is referred to as the B-side, and the desktop-level application is referred to as the C-side. In this solution, the C-side is developed using the Qt development framework to ensure its powerful functions and efficient performance. Through this technical solution, we aim to achieve seamless docking and collaborative work between the B-side and the C-side, providing users with a more convenient and efficient experience. Specifically:

[0089] (1) Prerequisites: You need to download the C-side installation package from the B-side and install it. If it is not installed, you will be prompted to install it when you enter the video preview.

[0090] (2) Communication mechanism: Use websocket technology to achieve real-time communication and data interaction between the C-end and the B-end.

[0091] (3) Login and connection: Log in uniformly from the browser. After logging in, the B side launches the C side application through the browser protocol, and the two sides establish a websocket connection.

[0092] (4) Video preview interface:

[0093] The C-side desktop application window is hidden by default. When the B-side user opens the video preview interface, a blank area corresponding to the video preview interface will be reserved on the page. <div class＝”client-preview-container”> , and calculate the corresponding position and size of the area. The size is the size of the preview area, and the position is calculated by the browser method. The horizontal offset is the current offset of the browser from the left side of the screen outterX and the distance from the left side of the browser to the preview window <div class＝”client-preview-container”> The sum of the left offset innerX. Similarly, the vertical offset calculated by the browser method is the current offset of the browser from the top of the screen outterY and the browser's top distance preview window. The sum of the upper offset innerY.

[0094] Communicate to the C-end through Websoket, where the relevant data is {channelId: video stream channel passed in by the B-end; x: window horizontal position; y: window vertical position; width: window width; height: window height}. The C-end calls the qt framework related method this->show(); displays the application window and calls the qt framework Qt::WindowStaysOnTopHint to set the window to the top layer. When the window is set to the top layer and the position and size are set to the parameters passed in by the B-end, the C-end window will perfectly cover the div class="client-preview-container" in the area previewed by the B-end to the C-end for displaying the video preview.

[0095] (5) The user's browser-related operations need to be synchronized to the C-end:

[0096] 1. When the user switches menus on the B-side platform, if the video window is involved, the C-side is displayed; if the switched menu does not involve the video window, the C-side should be hidden. When using the Qt framework, call this->hide() method to achieve hiding.

[0097] 2. When the user minimizes the browser, the C-end window should be hidden synchronously, which is also done by calling the this->hide() method.

[0098] 3. When the user adjusts or moves the browser window, the size and position of the video preview area must be recalculated and the information must be passed to the C-end.

[0099] 4. Considering that some components in the B-side platform, such as pop-ups and drawers, need to be displayed above the video preview window, and the video preview window belongs to the C-side and is set to the top layer, use qt: painter.setCompositionMode(QPainter::CompositionMode_DestinationIn); painter.fillRect(QRect(x,y,width,height),QColor(0,0,0,0)); local transparency at the position corresponding to the pop-up window or drawer can display the B-side interactive interface normally.

[0100] (6) C-end extended browser functions:

[0101] The browser itself cannot directly detect the memory usage of the operating system, but through C-end technology, memory information can be obtained and displayed in the browser to assist users in making better work decisions. Although the browser provides some basic network status APIs (Application Programming Interface), the C-end can provide more in-depth network usage monitoring, including advanced data such as bandwidth and latency. Through C-end technology, complex business logic and system-level interactions that the browser itself cannot complete can be implemented, thereby expanding more business functions.

[0102] By integrating the browser and desktop, users only need to operate on the browser to control both systems at the same time, which greatly simplifies the efficiency of user operations and improves operational convenience. At the same time, the system combines the high efficiency of browser front-end development, allowing users to complete various business operations more quickly and conveniently, and integrates desktop technology to make up for the limitations of the browser during video playback. It can not only effectively improve work efficiency, but also bring users a smoother and more efficient video playback experience.

[0103] It should be noted that, for the sake of simplicity, the method embodiments are described as a series of action combinations, but those skilled in the art should be aware that the embodiments of the present invention are not limited by the order of the actions described, because according to the embodiments of the present invention, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions involved are not necessarily required by the embodiments of the present invention.

[0104] Reference Figure 4, shows a structural block diagram of a video stream playback device provided in an embodiment of the present invention, which is applied to a video playback system, wherein the video playback system at least includes a browser end and a desktop end that establishes a websocket communication connection with the browser end, and a video playback area is configured on the first display window corresponding to the browser end, which may specifically include the following modules:

[0105] The request generation module 401 located at the browser end is used to respond to the video playback instruction, determine the corresponding video playback request, and transmit the video playback request to the desktop end through the websocket communication connection;

[0106] The window processing module 402 located at the desktop end is used to respond to the video playback request, obtain the video playback parameters corresponding to the video playback request, set the second display window corresponding to the desktop end as the top layer, and map the second display window to the video playback area according to the video playback parameters;

[0107] The playback module 403 located on the desktop side is used to play the target video corresponding to the video playback request through the desktop side in response to mapping the second display window to the video playback area, so as to play the target video in the video playback area.

[0108] In an optional embodiment, the request generation module 401 is specifically used for:

[0109] Obtaining display parameters of the current video playback area relative to the first display window;

[0110] Obtain the video stream channel corresponding to the video playback instruction;

[0111] The display parameter and the video stream channel are used to generate a video play request corresponding to the video play instruction.

[0112] In an optional embodiment, the display parameter includes at least a position parameter and a size parameter, and the request generation module 401 is specifically used to:

[0113] Acquire a current display ratio of the first display window and a current display position of a graphical user interface of a terminal device running the video playback system;

[0114] A first position parameter of the video playback area relative to the first display window is calculated based on the current display position, and a first size parameter corresponding to the current display ratio is obtained.

[0115] In an optional embodiment, the request generation module 401 is specifically used for:

[0116] Extracting a first horizontal offset and a first vertical offset of the first display window relative to the graphical user interface from the current display position;

[0117] Obtaining a second horizontal offset and a second vertical offset of the video playback area relative to the first display window;

[0118] The first horizontal offset, the first vertical offset, the second horizontal offset, and the second vertical offset are used to construct the position parameters of the video playback area equivalent to the first display window.

[0119] In an optional embodiment, the size parameter includes at least a window height and a window width corresponding to the video playback area.

[0120] In an optional embodiment, it also includes:

[0121] A window adjustment module, configured to respond to a window adjustment instruction for the browser end and obtain a target display ratio and a target display position corresponding to the first display window after adjustment;

[0122] The parameter adjustment module is used to calculate the second position parameter of the video playback area relative to the first display window based on the target display position, and obtain a second size parameter corresponding to the target display ratio.

[0123] In an optional embodiment, it also includes:

[0124] The transparency processing module is used to obtain the transparency parameters for the target pop-up window if the browser detects a window pop-up and the position of the target pop-up window is located in the video playback area, and display the target pop-up window according to the transparency parameters.

[0125] As for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0126] In addition, an embodiment of the present invention further provides an electronic device, including: a processor, a memory, and a computer program stored in the memory and executable on the processor. When the computer program is executed by the processor, the various processes of the above-mentioned video stream playback method embodiment are implemented, and the same technical effect can be achieved. To avoid repetition, it will not be described here.

[0127] The embodiment of the present invention further provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, each process of the above-mentioned video stream playback method embodiment is implemented, and the same technical effect can be achieved. To avoid repetition, it is not repeated here. The computer-readable storage medium is, for example, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0128] Figure 5 A schematic diagram of the hardware structure of an electronic device for implementing various embodiments of the present invention.

[0129] The electronic device 500 includes but is not limited to: a radio frequency unit 501, a network module 502, an audio output unit 503, an input unit 504, a sensor 505, a display unit 506, a user input unit 507, an interface unit 508, a memory 509, a processor 510, and a power supply 511. Those skilled in the art will appreciate that the electronic device structure involved in the embodiments of the present invention does not constitute a limitation on the electronic device, and the electronic device may include more or fewer components than shown in the figure, or combine certain components, or arrange components differently. In the embodiments of the present invention, the electronic device includes but is not limited to a mobile phone, a tablet computer, a laptop computer, a PDA, a vehicle-mounted terminal, a wearable device, and a pedometer.

[0130] It should be understood that in the embodiment of the present invention, the radio frequency unit 501 can be used for receiving and sending signals during information transmission or communication. Specifically, after receiving downlink data from the base station, it is sent to the processor 510 for processing; in addition, uplink data is sent to the base station. Generally, the radio frequency unit 501 includes but is not limited to an antenna, at least one amplifier, a transceiver, a coupler, a low noise amplifier, a duplexer, etc. In addition, the radio frequency unit 501 can also communicate with the network and other devices through a wireless communication system.

[0131] The electronic device provides users with wireless broadband Internet access through the network module 502, such as helping users to send and receive emails, browse web pages, and access streaming media.

[0132] The audio output unit 503 can convert the audio data received by the RF unit 501 or the network module 502 or stored in the memory 509 into an audio signal and output it as sound. Moreover, the audio output unit 503 can also provide audio output related to a specific function performed by the electronic device 500 (for example, a call signal reception sound, a message reception sound, etc.). The audio output unit 503 includes a speaker, a buzzer, a receiver, etc.

[0133] The input unit 504 is used to receive audio or video signals. The input unit 504 may include a graphics processor (GPU) 5041 and a microphone 5042. The graphics processor 5041 processes the image data of a static picture or video obtained by an image capture device (such as a camera) in a video capture mode or an image capture mode. The processed image frame can be displayed on the display unit 506. The image frame processed by the graphics processor 5041 can be stored in the memory 509 (or other storage medium) or sent via the radio frequency unit 501 or the network module 502. The microphone 5042 can receive sound and can process such sound into audio data. The processed audio data can be converted into a format output that can be sent to a mobile communication base station via the radio frequency unit 501 in the case of a telephone call mode.

[0134] The electronic device 500 also includes at least one sensor 505, such as a light sensor, a motion sensor, and other sensors. Specifically, the light sensor includes an ambient light sensor and a proximity sensor, wherein the ambient light sensor can adjust the brightness of the display panel 5061 according to the brightness of the ambient light, and the proximity sensor can turn off the display panel 5061 and / or the backlight when the electronic device 500 is moved to the ear. As a type of motion sensor, the accelerometer sensor can detect the magnitude of acceleration in each direction (generally three axes), and can detect the magnitude and direction of gravity when stationary, which can be used to identify the posture of the electronic device (such as horizontal and vertical screen switching, related games, magnetometer posture calibration), vibration recognition related functions (such as pedometer, tapping), etc.; the sensor 505 can also include a fingerprint sensor, a pressure sensor, an iris sensor, a molecular sensor, a gyroscope, a barometer, a hygrometer, a thermometer, an infrared sensor, etc., which will not be repeated here.

[0135] The display unit 506 is used to display information input by the user or information provided to the user. The display unit 506 may include a display panel 5061, which may be configured in the form of a liquid crystal display (LCD), an organic light-emitting diode (OLED), or the like.

[0136] The user input unit 507 can be used to receive input digital or character information, and to generate key signal input related to user settings and function control of the electronic device. Specifically, the user input unit 507 includes a touch panel 5071 and other input devices 5072. The touch panel 5071, also known as a touch screen, can collect the user's touch operation on or near it (such as the user's operation on the touch panel 5071 or near the touch panel 5071 using any suitable object or accessory such as a finger, stylus, etc.). The touch panel 5071 may include two parts: a touch detection device and a touch controller. Among them, the touch detection device detects the user's touch orientation, detects the signal brought by the touch operation, and transmits the signal to the touch controller; the touch controller receives the touch information from the touch detection device, converts it into the contact point coordinates, and then sends it to the processor 510, receives the command sent by the processor 510 and executes it. In addition, the touch panel 5071 can be implemented using multiple types such as resistive, capacitive, infrared and surface acoustic waves. In addition to the touch panel 5071, the user input unit 507 may also include other input devices 5072. Specifically, other input devices 5072 may include but are not limited to a physical keyboard, function keys (such as volume control keys, switch keys, etc.), a trackball, a mouse, and a joystick, which are not described in detail here.

[0137] Further, the touch panel 5071 may be covered on the display panel 5061. When the touch panel 5071 detects a touch operation on or near it, it is transmitted to the processor 510 to determine the type of the touch event, and then the processor 510 provides a corresponding visual output on the display panel 5061 according to the type of the touch event. It can be understood that in one embodiment, the touch panel 5071 and the display panel 5061 are used as two independent components to implement the input and output functions of the electronic device, but in some embodiments, the touch panel 5071 and the display panel 5061 can be integrated to implement the input and output functions of the electronic device, which is not limited here.

[0138] The interface unit 508 is an interface for connecting an external device to the electronic device 500. For example, the external device may include a wired or wireless headset port, an external power supply (or battery charger) port, a wired or wireless data port, a memory card port, a port for connecting a device with an identification module, an audio input / output (I / O) port, a video I / O port, a headphone port, etc. The interface unit 508 may be used to receive input (e.g., data information, power, etc.) from an external device and transmit the received input to one or more elements within the electronic device 500 or may be used to transmit data between the electronic device 500 and an external device.

[0139] The memory 509 can be used to store software programs and various data. The memory 509 can mainly include a program storage area and a data storage area, wherein the program storage area can store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc.; the data storage area can store data created according to the use of the mobile phone (such as audio data, a phone book, etc.), etc. In addition, the memory 509 can include a high-speed random access memory, and can also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage devices.

[0140] The processor 510 is the control center of the electronic device. It uses various interfaces and lines to connect various parts of the entire electronic device. By running or executing software programs and / or modules stored in the memory 509 and calling data stored in the memory 509, it performs various functions of the electronic device and processes data, thereby monitoring the electronic device as a whole. The processor 510 may include one or more processing units; preferably, the processor 510 may integrate an application processor and a modem processor, wherein the application processor mainly processes the operating system, user interface, and application programs, and the modem processor mainly processes wireless communications. It is understandable that the above-mentioned modem processor may not be integrated into the processor 510.

[0141] The electronic device 500 may also include a power supply 511 (such as a battery) for supplying power to each component. Preferably, the power supply 511 may be logically connected to the processor 510 through a power management system, thereby implementing functions such as charging, discharging, and power consumption management through the power management system.

[0142] In addition, the electronic device 500 includes some functional modules not shown, which will not be described in detail here.

[0143] It should be noted that, in this article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or device including the element.

[0144] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for enabling a terminal (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the methods described in each embodiment of the present invention.

[0145] The embodiments of the present invention are described above in conjunction with the accompanying drawings, but the present invention is not limited to the above-mentioned specific implementation modes, which are merely illustrative rather than restrictive. Under the guidance of the present invention, ordinary technicians in this field can also make many forms without departing from the scope of protection of the present invention and the claims, all of which are within the protection of the present invention.

[0146] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed in the embodiments of the present invention can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0147] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0148] In the embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0149] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0150] In addition, each functional unit in each embodiment of the present invention may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0151] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium, including several instructions for a computer device (which can be a personal computer, server, or network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: various media that can store program codes, such as USB flash drives, mobile hard disks, ROM, RAM, magnetic disks, or optical disks.

[0152] The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art can easily think of changes or substitutions within the technical scope disclosed by the present invention, which should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention should be based on the protection scope of the claims.

Claims

1. A method for playing a video stream, characterized in that: Applied to a video playback system, the video playback system at least includes a browser end and a desktop end that establishes a websocket communication connection with the browser end, and a video playback area is configured on a first display window corresponding to the browser end, and the method includes: The browser side responds to the video play instruction, determines a corresponding video play request, and transmits the video play request to the desktop side through the websocket communication connection; In response to the video play request, the desktop terminal obtains video play parameters corresponding to the video play request, sets the second display window corresponding to the desktop terminal as the top layer, and maps the second display window to the video play area according to the video play parameters; In response to mapping the second display window to the video playback area, the target video corresponding to the video playback request is played through the desktop end to play the target video in the video playback area.

2. The method according to claim 1, characterized in that The step of determining a corresponding video playback request in response to the video playback instruction includes: Obtaining display parameters of the current video playback area relative to the first display window; Obtain the video stream channel corresponding to the video playback instruction; The display parameter and the video stream channel are used to generate a video play request corresponding to the video play instruction.

3. The method according to claim 2, characterized in that The display parameters include at least a position parameter and a size parameter, and obtaining the display parameters of the current video playback area relative to the first display window includes: Acquire a current display ratio of the first display window and a current display position of a graphical user interface of a terminal device running the video playback system; A first position parameter of the video playback area relative to the first display window is calculated based on the current display position, and a first size parameter corresponding to the current display ratio is obtained.

4. The method according to claim 3, characterized in that The calculating, based on the current display position, a first position parameter of the video playback area relative to the first display window comprises: Extracting a first lateral offset and a first longitudinal offset of the first display window relative to the graphical user interface from the current display position; Obtaining a second horizontal offset and a second vertical offset of the video playback area relative to the first display window; The first horizontal offset, the first vertical offset, the second horizontal offset, and the second vertical offset are used to construct the position parameters of the video playback area equivalent to the first display window.

5. The method according to claim 3 or 4, characterized in that: The size parameters include at least a window height and a window width corresponding to the video playback area.

6. The method according to claim 3 or 4, characterized in that: Also includes: In response to the window adjustment instruction for the browser, obtaining a target display ratio and a target display position corresponding to the first display window after adjustment; A second position parameter of the video playback area relative to the first display window is calculated based on the target display position, and a second size parameter corresponding to the target display ratio is obtained.

7. The method according to claim 1, characterized in that Also includes: If the browser detects that a window pops up, and the location of the target pop-up window is located in the video playback area, a transparency parameter for the target pop-up window is obtained, and the target pop-up window is displayed according to the transparency parameter.

8. A video stream playback device, characterized in that: Applied to a video playback system, the video playback system at least includes a browser end and a desktop end that establishes a websocket communication connection with the browser end, a video playback area is configured on a first display window corresponding to the browser end, and the device includes: The request generation module located at the browser end is used to respond to the video playback instruction, determine the corresponding video playback request, and transmit the video playback request to the desktop end through the websocket communication connection; A window processing module located at the desktop end is used to respond to the video playback request, obtain video playback parameters corresponding to the video playback request, set the second display window corresponding to the desktop end as the top layer, and map the second display window to the video playback area according to the video playback parameters; The playback module located on the desktop end is used to play the target video corresponding to the video playback request through the desktop end in response to mapping the second display window to the video playback area, so as to play the target video in the video playback area.

9. An electronic device, characterized in that: It includes a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other through the communication bus; The memory is used to store computer programs; The processor is used to implement the method according to any one of claims 1 to 7 when executing the program stored in the memory.

10. A computer-readable storage medium having instructions stored thereon, which, when executed by one or more processors, cause the processors to perform the method according to any one of claims 1 to 7.

Images