Browser-based video playback method, device and computer equipment

Abstract

This application relates to a browser-based video playback method, device, and computer equipment. Among them, the method includes: obtaining the display area and channel information of the video stream; creating a video playback window in the browser based on the display area; the video playback window corresponds to a first thread and a second thread; obtaining the video stream based on the channel information, and using the first thread to splice and convert the video stream to obtain target image data with a transparent background; using the second thread to load the target image data into the video playback window for playback. Through this application, the problem of relying on the communication between the browser and the video player and being unable to dynamically adjust the transparent area of the video playback window in real time is solved. This application creates a video playback window in the browser based on the display area, and the threads corresponding to the video playback window are used to realize the real-time dynamic adjustment of the position of the transparent area of the video playback window.

Description

Technical Field

[0001] The present application relates to the technical field of video processing, and particularly to a browser-based video playing method, apparatus, and computer device. Background Art

[0002] With the increasing maturity of browser-based video playing technology, the application of fusing videos onto browsers such as maps has become more and more widespread. Especially for the monitoring scenarios of large venues such as stadiums, sports fields, and airports, in order to achieve all-round and non-blind-spot real-time monitoring of the venue, users need to arrange the videos of multiple cameras around the venue in the browser for partial transparent playing.

[0003] The current local transparent video playing solution for browsers is as follows: The browser transmits the position and size of the area that needs to be transparently played to the video player, and the video player crops the corresponding area of the video playing window to achieve this. The defect of this solution is that it depends on the communication between the browser and the video player. If the transparent area is in a fast-changing scenario, the browser and the video window perform high-frequency data interaction, which will inevitably affect the response performance of the browser. Therefore, it is impossible to dynamically adjust the transparent area of the video playing window in real time.

[0004] Regarding the problem in the related technology that it depends on the communication between the browser and the video player and it is impossible to dynamically adjust the transparent area of the video playing window in real time, no effective solution has been proposed yet. Summary of the Invention

[0005] In this embodiment, a browser-based video playing method, apparatus, and computer device are provided to solve the problem in the related technology that it depends on the communication between the browser and the video player and it is impossible to dynamically adjust the transparent area of the video playing window in real time.

[0006] In a first aspect, in this embodiment, a browser-based video playing method is provided, including:

[0007] Obtain the display area and channel information of the video stream;

[0008] Create a video playing window in the browser based on the display area; the video playing window corresponds to a first thread and a second thread;

[0009] Obtain the video stream based on the channel information, and use the first thread to splice and convert the video stream to obtain target image data with a transparent background;

[0010] Use the second thread to load the target image data into the video playing window for playing.

[0011] In some of these embodiments, obtaining the display area and channel information of the video stream includes:

[0012] Establish a communication link between the video playback process and the browser, and obtain the display area and the channel information of the video stream based on the communication link.

[0013] In some of these embodiments, creating a video playback window in the browser based on the display area includes:

[0014] Obtain the handle of the main window corresponding to the browser process, where the browser process corresponds to the browser;

[0015] According to the handle and the display area, create a video playback window in the browser with the main window as the parent window; the video playback window is a child window.

[0016] In some of these embodiments, obtaining the video stream based on the channel information, and using the first thread to splice and convert the video stream to obtain target image data with a transparent background includes:

[0017] Obtain multiple paths of the video stream from the target server based on the channel information;

[0018] Use the first thread to perform three-dimensional splicing on each path of the video stream to obtain first image data with background components;

[0019] Convert the first image data with background components to obtain target image data with a transparent background.

[0020] In some of these embodiments, performing three-dimensional splicing on each path of the video stream to obtain first image data with background components includes:

[0021] Decode each path of the video stream to obtain corresponding original image data;

[0022] Perform video splicing on each path of the original image data to obtain first image data with background components.

[0023] In some of these embodiments, converting the first image data with background components to obtain target image data with a transparent background includes:

[0024] Use a first conversion algorithm to convert the first image data with background components frame by frame to obtain second image data;

[0025] Encode the second image data frame by frame to obtain target image data with a transparent background.

[0026] In some of these embodiments, loading the target image data into the video playback window for playback by using the second thread includes:

[0027] Loading the target image data into the video playback window by using the second thread;

[0028] In the display area, refreshing and playing the target image data in the video playback window.

[0029] In a second aspect, a browser-based video playback device is provided in this embodiment, including: an acquisition module, a creation module, a splicing module, and a playback module;

[0030] The acquisition module is configured to acquire the display area and channel information of the video stream;

[0031] The creation module is configured to create a video playback window in the browser based on the display area; the video playback window corresponds to a first thread and a second thread;

[0032] The splicing module is configured to acquire the video stream based on the channel information, and use the first thread to splice and convert the video stream to obtain target image data with a transparent background;

[0033] The playback module is configured to load the target image data into the video playback window for playback by using the second thread.

[0034] In a third aspect, a computer device is provided in this embodiment, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the computer program, the browser-based video playback method described in the first aspect above is implemented.

[0035] In a fourth aspect, a storage medium is provided in this embodiment, on which a computer program is stored. When the program is executed by a processor, the browser-based video playback method described in the first aspect above is implemented.

[0036] Compared with the related art, in the browser-based video playback method, apparatus, and computer device provided in this embodiment, by obtaining the display area and channel information of the video stream; creating a video playback window in the browser based on the display area; the video playback window corresponds to a first thread and a second thread; obtaining the video stream based on the channel information, and using the first thread to splice and convert the video stream to obtain target image data with a transparent background; using the second thread to load the target image data into the video playback window for playback, the problem that relying on the communication between the browser and the video player cannot achieve real-time dynamic adjustment of the transparent area of the video playback window is solved. In this application, a video playback window is created in the browser based on the display area, and the position of the transparent area of the video playback window is adjusted in real time and dynamically by the thread corresponding to the video playback window.

[0037] Details of one or more embodiments of the present application are set forth in the following drawings and description to make other features, objects, and advantages of the present application more concise and understandable. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments and descriptions of the present application are used to explain the present application and do not constitute an improper limitation of the present application. In the drawings:

[0039] Figure 1 is a hardware structure block diagram of a terminal device for a browser-based video playback method provided by an embodiment of the present application;

[0040] Figure 2 is a flowchart of a browser-based video playback method provided by an embodiment of the present application;

[0041] Figure 3 is Figure 2 a flowchart of step S230 in

[0042] Figure 4 is a structure block diagram of a browser-based video playback apparatus provided by an embodiment of the present application.

[0043] In the figure: 210, acquisition module; 220, creation module; 230, splicing module; 240, playback module. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0044] To more clearly understand the purpose, technical solution, and advantages of the present application, the present application will be described and explained below with reference to the drawings and embodiments.

[0045] Unless otherwise defined, technical terms or scientific terms involved in this application shall have the ordinary meanings understood by those with ordinary skills in the technical field to which this application belongs. In this application, words such as "a", "an", "one kind", "the", "these", etc. do not indicate a limitation in quantity, and they can be singular or plural. The terms "including", "containing", "having" and any variants thereof involved in this application are intended to cover non-exclusive inclusion; for example, a process, method, system, product or device containing a series of steps or modules (units) is not limited to the listed steps or modules (units), but may include unlisted steps or modules (units), or may include other steps or modules (units) inherent in these processes, methods, products or devices. The terms "connected", "coupled" and similar words involved in this application do not limit to physical or mechanical connections, but may include electrical connections, whether direct or indirect. The "plurality" involved in this application means two or more. "And / or" describes the association relationship of associated objects, indicating that three relationships may exist. For example, "A and / or B" may represent: A exists alone, A and B exist simultaneously, and B exists alone. Usually, the character " / " indicates that the objects associated before and after are in an "or" relationship. The terms "first", "second", "third", etc. involved in this application are only used to distinguish similar objects and do not represent a specific sorting of the objects.

[0046] The method embodiments provided in this embodiment can be executed on a terminal, a computer or a similar computing device. For example, running on a terminal, Figure 1 is a hardware structure block diagram of the terminal of the video playback method based on a browser in this embodiment. As Figure 1 shown, the terminal may include one or more ( Figure 1 only one is shown in the figure) processors 102 and a memory 104 for storing data. Among them, the processor 102 may include, but is not limited to, a processing device such as a microprocessor MCU or a programmable logic device FPGA. The above terminal may further include a transmission device 106 for communication functions and an input / output device 108. Those of ordinary skill in the art can understand that Figure 1 the structure shown in the figure is only schematic and does not limit the structure of the above terminal. For example, the terminal may further include more or fewer components than Figure 1 shown in the figure, or have a different configuration from Figure 1 shown in the figure.

[0047] The memory 104 can be used to store computer programs, such as software programs and modules of application software, such as the computer program corresponding to the browser-based video playback method in this embodiment. The processor 102 executes various functional applications and data processing by running the computer program stored in the memory 104, that is, the above-mentioned method is implemented. The memory 104 may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memories. In some instances, the memory 104 may further include a memory remotely provided with respect to the processor 102, and these remote memories can be connected to the terminal through a network. Examples of the above-mentioned network include but are not limited to the Internet, enterprise intranet, local area network, mobile communication network, and their combinations.

[0048] The transmission device 106 is used to receive or send data via a network. The above-mentioned network includes the wireless network provided by the communication provider of the terminal. In one instance, the transmission device 106 includes a network adapter (Network Interface Controller, abbreviated as NIC), which can be connected to other network devices through a base station and thus can communicate with the Internet. In one instance, the transmission device 106 may be a radio frequency (RF) module, which is used to communicate with the Internet wirelessly.

[0049] In this embodiment, a browser-based video playback method is provided. Figure 2 is the flowchart of the browser-based video playback method of this embodiment, as Figure 2 shown, this process includes the following steps:

[0050] Step S210, obtain the display area and channel information of the video stream;

[0051] Specifically, the video stream can be multiple video streams, which include encoded streams and raw streams; among them, the encoded stream is the stream data compressed by a compression algorithm; the raw stream is the uncompressed stream data, which is the decoded stream data.

[0052] Each video stream corresponds to a channel information, and the corresponding video stream can be pulled through the channel information. For example: pull the corresponding video stream from the media stream server through the channel information.

[0053] Generally, there is only one display area, which refers to the target area where the video stream is played and displayed after processing, and it includes the display position and display size; the target image data is finally adjusted and played within the range of the display area.

[0054] Step S220, create a video playback window in the browser based on the display area; the video playback window corresponds to a first thread and a second thread;

[0055] Specifically, relevant methods can be called in the browser to create a video playback window; the video playback window is within the display area; for example: call the Window.open() method to create it. After the video playback window is created, two threads that communicate with each other are generated correspondingly, namely the first thread and the second thread. There is no restriction on the specific generation method of the threads. It can be considered that the browser only needs to transmit the display area and channel information to the threads corresponding to the video playback window, and the corresponding threads can perform relevant processing to achieve real-time dynamic adjustment of the position of the transparent area of the video playback window.

[0056] Step S230, obtain the video stream based on the channel information, and use the first thread to splice and convert the video stream to obtain target image data with a transparent background;

[0057] Specifically, the first thread is mainly responsible for related processing of video splicing. For example: obtain the video stream based on the channel information, splice and convert the video stream to obtain target image data with a transparent background. Further, a splicing algorithm can be used to splice the video stream into target image data with a transparent background. The target image data includes but is not limited to PNG format image data, GIF format image data, and SVG format image data, etc. The specific format selection of the target image data can be determined by the specific usage scenario.

[0058] Step S240, use the second thread to load the target image data into the video playback window for playback.

[0059] Specifically, the second thread is mainly responsible for loading the target image data and page rendering and playback. For example: load the target image data into the video playback window for playback. Further, the SDL thread can be used to render and load the target image data for playback. Among them, SDL is an open-source cross-platform multimedia development library written in the C language.

[0060] In the related technology, the position and size that need to be transparently played are passed from the browser to the video player, and the video player crops the corresponding area of the video playback window to achieve it. The video player is responsible for communicating with the browser in real time and processing the relevant video stream in real time. This leads to a dependence on the communication between the browser and the video player. If the transparent area is in a rapidly changing scenario, and the browser and the video window perform high-frequency data interaction, it will inevitably affect the response performance of the browser. Therefore, it is impossible to achieve real-time dynamic adjustment of the transparent area of the video playback window.

[0061] The browser of the present application only needs to transmit the display area and channel information once; subsequent processing is handled by the thread corresponding to the video playback window. Based on the channel information, the video stream is obtained, and the first thread is used to splice and convert the video stream to obtain the target image data with a transparent background; the second thread is used to load the target image data into the video playback window for playback; and there is no need for the browser to transmit the display area and channel information again, realizing real-time dynamic adjustment of the position of the transparent area of the video playback window; thus solving the problem that it is impossible to achieve real-time dynamic adjustment of the transparent area of the video playback window due to relying on the communication between the browser and the video player.

[0062] The above steps are described in detail below:

[0063] In some of the embodiments, in step S210, obtaining the display area and channel information of the video stream includes the following steps:

[0064] Establish a communication link between the video playback process and the browser, and obtain the display area and channel information of the video stream based on the communication link.

[0065] Specifically, a communication link between the video playback process and the browser can be established based on the WebSocket protocol; the WebSocket protocol is implemented based on the TCP protocol, including an initial handshake process and subsequent multiple data frame bidirectional transmission processes, which can improve work efficiency and resource utilization. Then, the display area and channel information are transmitted to the video playback process through this communication link.

[0066] In some of the embodiments, in step S220, creating a video playback window in the browser based on the display area includes the following steps:

[0067] Obtain the handle of the main window corresponding to the browser process, where the browser process corresponds to the browser;

[0068] According to the handle and the display area, create a video playback window in the browser with the main window as the parent window; the video playback window is a child window.

[0069] Specifically, the video playback process obtains the browser process ID corresponding to the browser process through the communication link; then calls the API interface to obtain the handle of the main window corresponding to the browser process; in the display area of the browser, a video playback window is created with the main window as the parent window. The created video playback window covers the original window of the browser and is a child window. If the target image data in the video playback window is transparent, the content in the browser main window is displayed after the target image data is displayed. If the target image data in the video playback window is opaque, the target image data is displayed.

[0070] After creating a video playback window, a corresponding thread will be automatically created; among them, the thread can be regarded as an execution unit of the video playback process and is an internal scheduling entity of the video playback process.

[0071] In some of these embodiments, such as Figure 3 As shown, in step S230, obtaining the video stream based on the channel information and using the first thread to splice and convert the video stream to obtain the target image data with a transparent background includes the following steps:

[0072] Step S231, obtaining multiple video streams from the target server based on the channel information;

[0073] Step S232, using the first thread to perform three-dimensional splicing on each video stream to obtain the first image data with a background component;

[0074] Step S233, converting the first image data with a background component to obtain the target image data with a transparent background.

[0075] Specifically, there are various implementation methods for obtaining the video stream based on the channel information. For example: What can be actively obtained is: using the video playback process to pull the video stream from the target server based on the channel information. What can be obtained passively is: the video playback process receives the video stream sent by the target server based on the channel information, and then the video playback process distributes the video stream to the first thread. Then use the first thread to perform three-dimensional splicing on each video stream to obtain the first image data with a background component; convert the first image data with a background component to obtain the target image data with a transparent background.

[0076] Among them, it can be considered that at least two video streams are spliced into one first image data.

[0077] In this embodiment, first splice multiple video streams into one first image data with a background component through three-dimensional splicing; then convert the first image data with a background component into the target image data with a transparent background. Without relying on a video player, the adjustment of the transparent background in the target image data can be achieved. Then as long as the target image data with a transparent background is loaded frame by frame into the video playback window for playback, the transparent area of the video playback window can be adjusted in real time and dynamically.

[0078] Specifically, in step S232, performing three-dimensional splicing on each video stream to obtain the first image data with a background component includes the following steps:

[0079] Decoding each video stream respectively to obtain the corresponding original image data;

[0080] Performing video splicing on each piece of original image data to obtain the first image data with a background component.

[0081] Specifically, a decoding library can be used to decode the video streams of each channel respectively to obtain the corresponding original image data. Among them, the decoding library includes but is not limited to vaxPlayer.dll, dhplay.dll, etc. The original image data is generally image data in YUV format. Then, a three-dimensional stitching algorithm is used to perform video stitching on the original image data of each channel to obtain the first image data with background components. The specific implementation of the three-dimensional stitching algorithm is not limited.

[0082] For example: if it is necessary to decode multiple video streams respectively, then the original image data in YUV format obtained after decoding one of the video streams has the storage format as shown in Table 1. For the original image data in YUV format obtained after decoding other video streams, a similar storage format is also adopted, and no repeated examples are given here.

[0083] Table 1

[0084]

[0085] Among them, w represents the width of the original image data in YUV format for each frame in the video stream. The upper horizontal (from 0 to w - 1) respectively corresponds to the pixel points from the upper left point to the upper right point of the original image data; h represents the height of the original image data; start represents the starting address of the storage of the original image data in memory, that is, the left column is the address where the original image data is stored, and each grid occupies one byte of storage space; Yij represents the Y component of the pixel point (i, j) of the original image data; Uij represents the U component shared by the pixel points (i * 2, j * 2), (i * 2, j * 2 + 1), (i * 2 + 1, j * 2), (i * 2 + 1, j * 2 + 1) of the original image data; Vij represents the V component shared by the pixel points (i * 2, j * 2), (i * 2, j * 2 + 1), (i * 2 + 1, j * 2), (i * 2 + 1, j * 2 + 1) of the original image data.

[0086] The storage format of the first image data with background components obtained after video stitching is as shown in Table 2:

[0087] Table 2

[0088]

[0089] Wherein, w represents the width of the first image data, and the upper horizontal (from 0 to w - 1) respectively corresponds to the pixel points from the upper left point to the upper right point of the first image data; h represents the height of the first image data; start represents the starting storage address of the first image data in the memory, that is, the left column is the storage address of the first image data, and each grid occupies one byte of storage space; Yij represents the Y component of the pixel point (i, j) in the first image data; Uij represents the shared U component of the pixel points (i * 2, j * 2), (i * 2, j * 2 + 1), (i * 2 + 1, j * 2), (i * 2 + 1, j * 2 + 1) in the first image data; Vij represents the shared V component of the pixel points (i * 2, j * 2), (i * 2, j * 2 + 1), (i * 2 + 1, j * 2), (i * 2 + 1, j * 2 + 1) in the first image data; Fij represents the background component of the pixel point (i, j) in the first image data (0 represents foreground, 1 represents background).

[0090] Then, it can be seen from Table 2 that the original image data is subjected to video splicing, and multiple channels of original image data in YUV format are spliced into the first image data in YUVF format. The background component value of each pixel point in the original image data is extended, where 0 represents the video foreground and 1 represents the video background.

[0091] In this embodiment, each channel of video stream is decoded separately, and then video splicing is performed to obtain the first image data with background components; thus, the background component value can be accurately attached to each pixel point for subsequent processing.

[0092] In some of the embodiments, in step S233, converting the first image data with background components to obtain the target image data with a transparent background includes the following steps:

[0093] Using the first conversion algorithm, frame by frame, convert the first image data with background components to obtain the second image data;

[0094] Frame by frame, encode the second image data to obtain the target image data with a transparent background.

[0095] Specifically, the conversion of the first image data with background components can be implemented in multiple steps. Taking two steps as an example for illustration:

[0096] For example, using the first conversion algorithm, the first image data with background components is converted frame by frame to obtain the second image data. The first conversion algorithm can be a general conversion algorithm, which is determined by the formats of the first image data and the second image data. For example: the format of the first image data is YUVF format; the format of the second image data is RGBA format; then the first conversion algorithm is R = Y + 1.402 * (V - 128); G = Y - 0.34413 * (U - 128) - 0.71414 * (V - 128); B = Y + 1.772 * (U - 128); if F = 0, it means that the corresponding pixel point in the first image data is a video foreground pixel point and needs to be set to opaque, that is, A = 1. If F = 1, it means that the corresponding pixel point in the first image data is a background pixel point and needs to be set to completely transparent, that is, A = 0.

[0097] Among them, for the second image data in RGBA format, its storage format is shown in Table 3:

[0098] Table 3

[0099]

[0100]

[0101] After obtaining the second image data, then using the corresponding encoding algorithm or encoder, the second image data is encoded frame by frame to obtain the target image data with a transparent background. For example: the second image data is image data in RGBA format; the target image data is image data in PNG format; the encoder can be Python, etc.

[0102] In some of the embodiments, using the second thread to load the target image data into the video playback window for playback in step S240 includes the following steps:

[0103] Step S241, using the second thread to load the target image data into the video playback window;

[0104] Step S242, in the display area, refresh and play the target image data in the video playback window.

[0105] Specifically, after obtaining the target image data, the first thread will notify the second thread; after receiving the notification, the second thread will load the target image data into the video playback window and refresh the picture played in the video playback window in the display area; that is, the target image data in the video playback window will be refreshed and played frame by frame. Since the pixel points of the background in the target image data of each frame are constantly changing, the transparent area of the video picture also changes accordingly; the purpose of dynamic adjustment is achieved; the position and size of the transparent area are completely controlled by the video playback window, and no processing by the browser is required, which greatly improves the portability of the video playback window.

[0106] It should be noted that the steps shown in the above process or the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions, and although the logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in a different order than here.

[0107] In this embodiment, a browser-based video playback device is also provided. This device is used to implement the above embodiments and preferred implementation manners, and those that have been described will not be repeated here. The following terms "module", "unit", "sub-unit", etc. can be a combination of software and / or hardware that can achieve a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, implementation in hardware, or a combination of software and hardware is also possible and contemplated.

[0108] Figure 4 is the structural block diagram of the browser-based video playback device of this embodiment, as Figure 4 shown, the device includes: an acquisition module 210, a creation module 220, a splicing module 230, and a playback module 240;

[0109] The acquisition module 210 is used to acquire the display area and channel information of the video stream;

[0110] The creation module 220 is used to create a video playback window in the browser based on the display area; the video playback window corresponds to a first thread and a second thread;

[0111] The splicing module 230 is used to acquire the video stream based on the channel information, and use the first thread to splice and convert the video stream to obtain target image data with a transparent background;

[0112] The playback module 240 is used to use the second thread to load the target image data into the video playback window for playback.

[0113] With the above device, the problem that it is impossible to dynamically adjust the transparent area of the video playback window in real time due to relying on the communication between the browser and the video player is solved. In this application, a video playback window is created in the browser based on the display area, and the position of the transparent area of the video playback window is dynamically adjusted in real time by the thread corresponding to the video playback window.

[0114] In some of these embodiments, the acquisition module 210 is further configured to acquire the display area and channel information of the video stream, including:

[0115] Establish a communication link between the video playback process and the browser, and acquire the display area and channel information of the video stream based on the communication link.

[0116] In some of these embodiments, the creation module 220 is further configured to acquire the handle of the main window corresponding to the browser process, where the browser process corresponds to the browser;

[0117] According to the handle and the display area, create a video playback window in the browser with the main window as the parent window; the video playback window is a child window.

[0118] In some of these embodiments, the splicing module 230 is further configured to acquire multiple video streams from the target server based on the channel information;

[0119] Use the first thread to perform three-dimensional splicing on each video stream to obtain first image data with a background component;

[0120] Convert the first image data with a background component to obtain target image data with a transparent background.

[0121] In some of these embodiments, the splicing module 230 is further configured to decode each video stream respectively to obtain corresponding original image data;

[0122] Perform video splicing on each piece of original image data to obtain first image data with a background component.

[0123] In some of these embodiments, the splicing module 230 is further configured to use the first conversion algorithm to convert the first image data with a background component frame by frame to obtain second image data;

[0124] Encode the second image data frame by frame to obtain target image data with a transparent background.

[0125] In some of these embodiments, the playback module 240 is further configured to use the second thread to load the target image data into the video playback window;

[0126] In the display area, refresh and play the target image data in the video playback window.

[0127] It should be noted that each of the above modules can be a functional module or a program module, and can be implemented either by software or by hardware. For the modules implemented by hardware, each of the above modules can be located in the same processor; or each of the above modules can also be located in different processors in any combined form.

[0128] In this embodiment, a computer device is further provided, including a memory and a processor. A computer program is stored in the memory, and the processor is configured to run the computer program to execute the steps in any one of the above method embodiments.

[0129] Optionally, the above computer device may further include a transmission device and input / output devices. Among them, the transmission device is connected to the above processor, and the input / output devices are connected to the above processor.

[0130] Optionally, in this embodiment, the above processor may be configured to execute the following steps through a computer program:

[0131] S1, obtain the display area and channel information of the video stream;

[0132] S2, create a video playback window in the browser based on the display area; the video playback window corresponds to a first thread and a second thread;

[0133] S3, obtain the video stream based on the channel information, and splice and convert the video stream using the first thread to obtain target image data with a transparent background;

[0134] S4, use the second thread to load the target image data into the video playback window for playback.

[0135] It should be noted that the specific examples in this embodiment can refer to the examples described in the above embodiments and optional implementation manners, and will not be repeated in this embodiment.

[0136] In addition, in combination with the browser-based video playback method provided in the above embodiments, a storage medium can also be provided to implement it in this embodiment. A computer program is stored on the storage medium; when the computer program is executed by a processor, any one of the above browser-based video playback methods in the embodiments is implemented.

[0137] It should be understood that the specific embodiments described here are only used to explain this application, rather than to limit it. According to the embodiments provided in the present application, all other embodiments obtained by those of ordinary skill in the art without creative work belong to the protection scope of the present application.

[0138] Obviously, the accompanying drawings are only some examples or embodiments of the present application. For those of ordinary skill in the art, the present application can also be applied to other similar situations based on these drawings without creative efforts. Additionally, it can be understood that although the work done during the development process here may be complex and time-consuming, for those of ordinary skill in the art, certain design, manufacturing, or production changes based on the technical content disclosed in the present application are only routine technical means and should not be regarded as insufficient disclosure of the present application.

[0139] The term "embodiment" in the present application means that the specific features, structures, or characteristics described in connection with the embodiments can be included in at least one embodiment of the present application. The phrase appears in various positions in the specification and does not necessarily mean the same embodiment, nor does it mean being independent or alternative to other embodiments and mutually exclusive. Those of ordinary skill in the art can clearly or implicitly understand that the embodiments described in the present application can be combined with other embodiments without conflict.

[0140] The above-described embodiments merely represent several implementation manners of the present application, and the description thereof is relatively specific and detailed, but it should not be construed as a limitation on the scope of patent protection. It should be noted that for those of ordinary skill in the art, without departing from the concept of the present application, several modifications and improvements can still be made, and these all fall within the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the appended claims.

Claims

1. A browser-based video playback method, characterized in that, Including: Obtain the display area and channel information of the video stream; Create a video playback window in the browser based on the display area; The video playback window corresponds to a first thread and a second thread; Obtain the video stream based on the channel information, and use the first thread to splice and convert the video stream to obtain target image data with a transparent background; Use the second thread to load the target image data into the video playback window for playback; Among them, creating a video playback window in the browser based on the display area includes: Obtain the handle of the main window corresponding to the browser process, where the browser process corresponds to the browser; According to the handle and the display area, create a video playback window in the browser with the main window as the parent window; the video playback window is a child window.

2. The browser-based video playing method according to claim 1, wherein The obtaining the display area and channel information of the video stream includes: Establish a communication link between the video playback process and the browser, and obtain the display area and the channel information of the video stream based on the communication link.

3. The browser-based video playing method according to claim 1, wherein The obtaining the video stream based on the channel information, and using the first thread to splice and convert the video stream to obtain target image data with a transparent background includes: Obtain multiple paths of the video stream from the target server based on the channel information; Use the first thread to perform three-dimensional splicing on each path of the video stream to obtain first image data with a background component; Convert the first image data with a background component to obtain target image data with a transparent background.

4. The browser-based video playing method according to claim 3, wherein The performing three-dimensional splicing on each path of the video stream to obtain first image data with a background component includes: Decode each path of the video stream respectively to obtain corresponding original image data; Perform video splicing on each path of the original image data to obtain first image data with a background component.

5. The browser-based video playing method according to claim 3, wherein The converting the first image data with a background component to obtain target image data with a transparent background includes: Use a first conversion algorithm to convert the first image data with a background component frame by frame to obtain second image data; Encode the second image data frame by frame to obtain target image data with a transparent background.

6. The browser-based video playing method according to claim 1, wherein The using the second thread to load the target image data into the video playback window for playback includes: Use the second thread to load the target image data into the video playback window; In the display area, refresh and play the target image data in the video playback window.

7. A browser-based video playback device, characterized in that, Including: An obtaining module, a creating module, a splicing module, and a playing module; The obtaining module is used to obtain the display area and channel information of the video stream; The creating module is used to create a video playback window in the browser based on the display area; the video playback window corresponds to a first thread and a second thread; The creating module is further used to obtain the handle of the main window corresponding to the browser process, where the browser process corresponds to the browser; According to the handle and the display area, create a video playback window in the browser with the main window as the parent window; the video playback window is a child window. The splicing module is configured to obtain the video stream based on the channel information, and use the first thread to splice and convert the video stream to obtain target image data with a transparent background. The playback module is configured to use the second thread to load the target image data into the video playback window for playback.

8. A computer device, comprising a memory and a processor, characterized in that, A computer program is stored in the memory, and the processor is configured to run the computer program to execute the steps of the browser-based video playback method according to any one of claims 1 to 6.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, the steps of the browser-based video playback method according to any one of claims 1 to 6 are implemented.

Images