Web-based backendless video stream pulling implementation method and device

Abstract

The application relates to the technical field of video playing, and provides a backend-free video stream pulling implementation method and device based on Web. Protocol conversion adaptation layers are used for protocol compatibility in a connection process, so that protocols of different video stream sources are converted into formats that can be directly analyzed by browsers, compatibility of various video stream protocols is realized, a video stream analysis module is arranged at a Web front end, video stream analysis processing is performed by using a Web Worker, the main thread is prevented from being blocked, and the fluency of video playing is improved. The Web front end is directly connected with the video stream source, a backend server is not needed to be deployed, the system architecture complexity is reduced, the backend server is not needed, backend forwarding is not needed, and computing resources and network bandwidth are saved. Meanwhile, a connection management module is used for monitoring a connection state in real time, connection state abnormalities can be detected in time and reconnection can be performed, and the video playing effect is effectively maintained.

Description

Technical Field

[0001] This application relates to the field of video playback technology, and in particular to a web-based method and apparatus for pulling backend video streams without a backend. Background Technology

[0002] With the rapid development of Web technology, browsers have become an important carrier for various applications. Video streaming, as a key function of Web applications, has attracted much attention regarding its implementation. In existing technologies, retrieving video streams from the Web client typically relies on dedicated backend services for relaying or processing. This requires deploying backend servers as video stream forwarding nodes, increasing the complexity of the system architecture and raising deployment and maintenance costs. Furthermore, backend servers consume significant computing resources and network bandwidth during video stream forwarding, easily becoming performance bottlenecks. Simultaneously, since the implementation of Web-based video stream retrieval functionality is highly dependent on the availability and performance of backend services, video stream transmission will be interrupted when backend services fail, impacting user experience. On the other hand, different backend services interact with the Web frontend in different ways, resulting in poor versatility of video stream retrieval solutions and difficulty in adapting to diverse Web application scenarios.

[0003] Therefore, there is an urgent need for a technical solution to address the problems of complex architecture, high cost, and strong dependence in existing technologies. Summary of the Invention

[0004] Therefore, it is necessary to provide a web-based method and apparatus for backend-free video stream retrieval that can reduce system architecture complexity by eliminating the need to deploy a backend server and addressing the aforementioned technical issues.

[0005] A web-based method for retrieving backend-free video streams is provided, which is applied to a video playback system mounted on a browser. The system includes a web frontend, a video stream source, a video stream source adaptation module, a video rendering module, and a connection management module. The web frontend is equipped with a video stream parsing module. The method includes the following steps: The video stream source adaptation module and the video stream parsing module are initialized. The video stream source adaptation module is configured with the configuration information of the video stream source to be connected. The configuration information includes the protocol type and authentication information. The video stream parsing module creates a video playback container and sets the parameters of the video playback container. The web front-end establishes a connection with the video stream source in a stateless connection mode according to the configuration information. After the connection is established, the video stream source pushes video stream data to the web front-end. During the connection process, a protocol conversion and adaptation layer is used to ensure protocol compatibility. After receiving the video stream data, the video stream parsing module parses and extracts the video frame data, and transmits the video frame data to the video rendering module. The video rendering module renders the video frame data onto the web front-end page in real time to achieve video stream playback. The connection management module monitors the connection status between the web front-end and the video stream source in real time. When an abnormal connection status is detected, the connection between the web front-end and the video stream source is re-established, and the video stream is continued to be received and played.

[0006] In one embodiment, the configuration information also includes the video stream source address.

[0007] In one embodiment, the video playback container includes a Canvas element or a Video element; the relevant parameters include resolution and frame rate.

[0008] In one embodiment, the web frontend establishes a connection with the video stream source using a stateless connection mode based on configuration information. After the connection is established, the video stream source pushes video stream data to the web frontend. During the connection process, a protocol conversion and adaptation layer is used for protocol compatibility, including: The video stream source adaptation module establishes a connection with the video stream source in a stateless connection mode according to the configuration information and uses the corresponding protocol. The connection request is encrypted. The video stream source adaptation module sends authentication information to the video stream source for identity verification. After successful verification, the video stream source pushes video stream data to the web front-end. During the connection process, the protocol conversion and adaptation layer uses Web Assembly technology to convert the protocol of the video stream source into a format that the browser can directly parse, thereby achieving protocol standardization.

[0009] In one embodiment, the connection management module monitors the connection status between the web front-end and the video stream source in real time through a heartbeat detection mechanism.

[0010] In one embodiment, after receiving video stream data, the video stream parsing module parses and extracts video frame data, and transmits the video frame data to the video rendering module. The video rendering module renders the video frame data onto the web front-end page in real time to achieve video stream playback, including: After receiving video stream data, the video stream parsing module parses and extracts video frame data according to the corresponding protocol format, and transmits the video frame data to the video rendering module. The video rendering module renders video frame data to the web front-end page in real time through the Canvas API interface, enabling video stream playback.

[0011] A web-based backendless video stream retrieval device includes a web frontend, a video stream source, a video stream source adaptation module, a video rendering module, and a connection management module. The web frontend is equipped with a video stream parsing module. The video stream source adaptation module configures the configuration information of the video stream source to be connected, including the protocol type and authentication information. The video stream parsing module creates a video playback container and sets the parameters of the video playback container. The web front-end establishes a connection with the video stream source in a stateless connection mode according to the configuration information. After the connection is established, the video stream source pushes video stream data to the web front-end. During the connection process, a protocol conversion and adaptation layer is used to ensure protocol compatibility. After receiving the video stream data, the video stream parsing module parses and extracts the video frame data, and transmits the video frame data to the video rendering module. The video rendering module renders the video frame data onto the web front-end page in real time to achieve video stream playback. The connection management module monitors the connection status between the web front-end and the video stream source in real time. When an abnormal connection status is detected, the connection between the web front-end and the video stream source is re-established, and the video stream is continued to be received and played.

[0012] The aforementioned web-based backendless video stream retrieval method and apparatus achieves protocol compatibility by employing a protocol conversion and adaptation layer during the connection process. This converts the protocols of different video stream sources into a format that browsers can directly parse, enabling compatibility with multiple video stream protocols and adapting to diverse web application scenarios. A video stream parsing module is set up in the web frontend, utilizing Web Workers for video stream parsing processing, avoiding blocking the main thread and improving video playback smoothness. By directly connecting the web frontend and the video stream source, there is no need to deploy a backend server, reducing system architecture complexity. Furthermore, the absence of a backend server and backend forwarding saves computing resources and network bandwidth. The integration of Web Workers for video stream parsing further enhances video playback smoothness. Simultaneously, a stateless connection mode is adopted, with the web frontend independently maintaining the connection state with the video stream source and monitoring the connection state in real time through a connection management module. This allows for timely detection of connection anomalies and reconnection, effectively maintaining video playback quality. Attached Figure Description

[0013] Figure 1 This is an application scenario diagram of a web-based backend-less video stream retrieval method in one embodiment; Figure 2 This is a flowchart illustrating a web-based method for fetching backend-less video streams in one embodiment. Detailed Implementation

[0014] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0015] The web-based, backend-less video stream retrieval method provided in this application can be applied to, for example... Figure 1 In the application environment shown, the web front-end 102 is connected to the video stream source 104, and the video stream source 104 pushes video stream data to the web front-end 102.

[0016] In one embodiment, such as Figure 2 As shown, a web-based method for fetching backend-less video streams is provided, applied to a video playback system on a browser. The system includes a web frontend, a video stream source, a video stream source adaptation module, a video rendering module, and a connection management module. The web frontend includes a video stream parsing module. The method includes the following steps: Step 201: Initialize the video stream source adaptation module and the video stream parsing module. The video stream source adaptation module configures the configuration information of the video stream source to be connected. The configuration information includes the protocol type and authentication information. The video stream parsing module creates a video playback container and sets the parameters of the video playback container.

[0017] Step 202: The Web frontend establishes a connection with the video stream source using a stateless connection mode based on the configuration information. After the connection is established, the video stream source pushes video stream data to the Web frontend. During the connection process, a protocol conversion and adaptation layer is used to ensure protocol compatibility.

[0018] Step 203: After receiving the video stream data, the video stream parsing module parses and extracts the video frame data, and transmits the video frame data to the video rendering module. The video rendering module renders the video frame data onto the web front-end page in real time to achieve video stream playback.

[0019] Step 204: The connection management module monitors the connection status between the Web frontend and the video stream source in real time. When an abnormal connection status is detected, the connection between the Web frontend and the video stream source is re-established, and the video stream is received and played again.

[0020] The aforementioned web-based backendless video stream retrieval method employs a protocol conversion and adaptation layer during the connection process to ensure protocol compatibility. This converts the protocols of different video stream sources into formats that browsers can directly parse, achieving compatibility with multiple video stream protocols and adapting to diverse web application scenarios. A video stream parsing module is set up in the web frontend, utilizing Web Workers for video stream parsing processing, avoiding blocking the main thread and improving video playback smoothness. By directly connecting the web frontend and the video stream source, there is no need to deploy a backend server, reducing system architecture complexity. Furthermore, the absence of a backend server and backend forwarding saves computing resources and network bandwidth. The integration of Web Workers for video stream parsing further enhances video playback smoothness. Simultaneously, a stateless connection mode is adopted, with the web frontend independently maintaining the connection state with the video stream source and monitoring the connection state in real time through a connection management module. This allows for timely detection of connection anomalies and reconnection, effectively maintaining video playback quality.

[0021] In one embodiment, step 201, the configuration information also includes the video stream source address.

[0022] In one embodiment, in step 201, the video playback container includes a Canvas element or a Video element; the relevant parameters include resolution and frame rate.

[0023] In this embodiment, a Canvas element or a Video element is created as a video playback container.

[0024] In one embodiment, step 202 involves the web frontend establishing a connection with the video stream source using a stateless connection mode based on configuration information. After the connection is established, the video stream source pushes video stream data to the web frontend. During the connection process, a protocol conversion and adaptation layer is used for protocol compatibility, including: According to the configuration information, the video stream source adaptation module establishes a connection with the video stream source in a stateless connection mode using the corresponding protocol, and encrypts the connection request. The video stream source adaptation module sends the authentication information to the video stream source for identity verification. After successful verification, the video stream source pushes video stream data to the web front-end.

[0025] During the connection process, the protocol conversion and adaptation layer uses Web Assembly technology to convert the protocol of the video stream source into a format that the browser can directly parse, thereby achieving protocol standardization.

[0026] In this embodiment, an access permission verification mechanism is set up at the front end to authenticate the identity of the video stream source using authentication information, ensuring the security of video stream access. Simultaneously, data transmission encryption is employed to encrypt the retrieved video stream data, preventing it from being stolen or tampered with during transmission, thus enhancing data security. Furthermore, in this embodiment, the protocol conversion and adaptation layer uses Web Assembly technology to convert the video stream source's protocol into a format that the browser can directly parse, achieving protocol standardization and adapting to different video stream source protocols, thereby improving the applicability of this method. In one embodiment, a protocol conversion adaptation layer is used to convert protocols such as RTSP, which are not natively supported by the browser, into HLS or WebSocket protocols, thereby ensuring that the browser can process them directly.

[0027] In one embodiment, the connection management module monitors the connection status between the web frontend and the video stream source in real time through a heartbeat detection mechanism.

[0028] In one embodiment, step 203 involves the video stream parsing module receiving video stream data, parsing and extracting video frame data, and transmitting the video frame data to the video rendering module. The video rendering module then renders the video frame data onto the web front-end page in real time to achieve video stream playback, including: After receiving the video stream data, the video stream parsing module parses and extracts the video frame data according to the corresponding protocol format, and then transmits the video frame data to the video rendering module.

[0029] The video rendering module renders video frame data to the web front-end page in real time through the Canvas API interface, enabling video stream playback.

[0030] In this embodiment, the GPU acceleration function of Canvas is used to improve the rendering efficiency of video frames, supporting real-time playback of high-resolution, high-frame-rate videos.

[0031] In one embodiment, the video rendering module can also render video frame data to the web front-end page in real time through the interface of the Video tag, so as to realize video stream playback.

[0032] It should be understood that, although Figure 2 The steps in the flowchart are shown sequentially as indicated by the arrows, but these steps are not necessarily executed in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order in which these steps are executed, and they can be performed in other orders. Figure 2At least some of the steps in the process may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these sub-steps or stages is not necessarily sequential, but can be executed in turn or alternately with other steps or at least some of the sub-steps or stages of other steps.

[0033] In one embodiment, a web-based backendless video stream retrieval device is provided, including a web frontend, a video stream source, a video stream source adaptation module, a video rendering module, and a connection management module. The web frontend includes a video stream parsing module. The video stream source adaptation module needs to configure the configuration information of the video stream source to be connected. The configuration information includes the protocol type and authentication information. The video stream parsing module creates a video playback container and sets the parameters of the video playback container. The web frontend establishes a connection with the video stream source using a stateless connection mode based on the configuration information. After the connection is established, the video stream source pushes video stream data to the web frontend. During the connection process, a protocol conversion and adaptation layer is used to ensure protocol compatibility. After receiving the video stream data, the video stream parsing module parses and extracts the video frame data, and then transmits the video frame data to the video rendering module. The video rendering module renders the video frame data onto the web front-end page in real time to enable video stream playback. The connection management module monitors the connection status between the web frontend and the video stream source in real time. When an abnormal connection status is detected, the connection between the web frontend and the video stream source is re-established, and the video stream continues to be received and played.

[0034] Specific limitations regarding the web-based backendless video stream retrieval implementation device can be found in the limitations of the web-based backendless video stream retrieval implementation method described above, and will not be repeated here. Each module in the aforementioned web-based backendless video stream retrieval implementation device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in the computer device in hardware form, or stored in the memory of the computer device in software form, so that the processor can call and execute the corresponding operations of each module.

[0035] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0036] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of the invention. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this application should be determined by the appended claims.

Claims

1. A web-based method for backend-less video stream retrieval, characterized in that, A video playback system applied to a browser includes a web front-end, a video stream source, a video stream source adaptation module, a video rendering module, and a connection management module. The web front-end is equipped with a video stream parsing module. The method includes the following steps: The video stream source adaptation module and the video stream parsing module are initialized. The video stream source adaptation module is configured with the configuration information of the video stream source to be connected. The configuration information includes the protocol type and authentication information. The video stream parsing module creates a video playback container and sets the parameters of the video playback container. The web frontend establishes a connection with the video stream source using a stateless connection mode based on configuration information. After the connection is established, the video stream source pushes video stream data to the web frontend. During the connection process, a protocol conversion and adaptation layer is used to ensure protocol compatibility, including: The video stream source adaptation module establishes a connection with the video stream source in a stateless connection mode according to the configuration information and uses the corresponding protocol. The connection request is encrypted. The video stream source adaptation module sends authentication information to the video stream source for identity verification. After successful verification, the video stream source pushes video stream data to the web front-end. During the connection process, the protocol conversion and adaptation layer uses Web Assembly technology to convert the protocol of the video stream source into a format that the browser can directly parse, thereby achieving protocol standardization. After receiving the video stream data, the video stream parsing module parses and extracts the video frame data, and transmits the video frame data to the video rendering module. The video rendering module renders the video frame data onto the web front-end page in real time to achieve video stream playback. The connection management module monitors the connection status between the web front-end and the video stream source in real time. When an abnormal connection status is detected, the connection between the web front-end and the video stream source is re-established, and the video stream is continued to be received and played.

2. The web-based backend-less video stream retrieval method according to claim 1, characterized in that, The configuration information also includes the video stream source address.

3. The web-based backend-less video stream retrieval method according to claim 2, characterized in that, The video playback container includes a Canvas element or a Video element; the parameters of the video playback container include resolution and frame rate.

4. The web-based backend-less video stream retrieval method according to claim 1, characterized in that, The connection management module monitors the connection status between the web front-end and the video stream source in real time through a heartbeat detection mechanism.

5. The web-based backend-less video stream retrieval method according to claim 3, characterized in that, The video stream parsing module receives video stream data, parses and extracts video frame data, and transmits the video frame data to the video rendering module. The video rendering module renders the video frame data onto the web front-end page in real time to achieve video stream playback, including: After receiving video stream data, the video stream parsing module parses and extracts video frame data according to the corresponding protocol format, and transmits the video frame data to the video rendering module. The video rendering module renders video frame data to the web front-end page in real time through the Canvas API interface, enabling video stream playback.

6. An apparatus for implementing the Web-based backend-less video stream retrieval method according to any one of claims 1 to 5, characterized in that, It includes a web front-end, a video stream source, a video stream source adaptation module, a video rendering module, and a connection management module. The web front-end is equipped with a video stream parsing module. The video stream source adaptation module configures the configuration information of the video stream source to be connected, including the protocol type and authentication information. The video stream parsing module creates a video playback container and sets the parameters of the video playback container. The web frontend establishes a connection with the video stream source using a stateless connection mode based on configuration information. After the connection is established, the video stream source pushes video stream data to the web frontend. During the connection process, a protocol conversion and adaptation layer is used to ensure protocol compatibility, including: The video stream source adaptation module establishes a connection with the video stream source in a stateless connection mode according to the configuration information and uses the corresponding protocol. The connection request is encrypted. The video stream source adaptation module sends authentication information to the video stream source for identity verification. After successful verification, the video stream source pushes video stream data to the web front-end. During the connection process, the protocol conversion and adaptation layer uses Web Assembly technology to convert the protocol of the video stream source into a format that the browser can directly parse, thereby achieving protocol standardization. After receiving the video stream data, the video stream parsing module parses and extracts the video frame data, and transmits the video frame data to the video rendering module. The video rendering module renders the video frame data onto the web front-end page in real time to achieve video stream playback. The connection management module monitors the connection status between the web front-end and the video stream source in real time. When an abnormal connection status is detected, the connection between the web front-end and the video stream source is re-established, and the video stream is continued to be received and played.

Images