Method, device, medium and equipment for browser client to play RTSP (Real Time Streaming Protocol) video stream data

Abstract

The invention discloses a method, a device, a medium and equipment for a browser client to play RTSP (Real Time Streaming Protocol) video stream data. The invention belongs to the technical field of computers. The method comprises the following steps: acquiring configuration information of a front-end configuration interface on a camera through a preset interface; pulling an RTSP video stream from the camera according to the configuration information; capturing the RTSP video stream frame by frame, and obtaining compressed data based on an inter-frame compression technology; performing Base64 coding conversion on the compressed data to obtain coded data in a picture format; and pushing the coded data to a video playing device so as to dynamically display the coded data through a browser client of the video playing device. By adopting the technical scheme, the 1t can be used in the browser; imgt, imgt; according to the method for playing the RTSP video through the browser and the tag, the direct support limitation of the browser on the RTSP video stream is ingeniously bypassed, additional plug-ins are not needed, and a high-efficiency, low-delay and low-cost real-time RTSP video stream data playing scheme is achieved.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular, to a method, apparatus, medium, and device for playing RTSP video stream data on a browser client. Background Art

[0002] With the development of modern cameras, computers, and network technologies, the demand for viewing video surveillance footage is increasing.

[0003] In current video surveillance systems and network streaming media technologies, RTSP (Real Time Streaming Protocol), as a standard network control protocol, is widely used in the transmission and control of video streams. The RTSP protocol provides flexible control functions for the transmission of real-time video streams, especially in application scenarios that require real-time video stream playback, such as remote monitoring and video conferencing, showing strong advantages. However, traditional web browsers do not directly support the playback of RTSP protocol video stream data, which limits the direct display of RTSP video streams on web pages. Especially with the popularization of modern web applications, web browsers have become the main platform for information display and interaction. Therefore, how to achieve RTSP video playback within a browser has become an urgent technical problem to be solved.

[0004] Currently, the methods to solve this problem mainly include the following: using plugins or third-party libraries, transcoding servers, and innovative encoding and decoding technologies. Among them, plugins or third-party libraries, such as Flash Player, Silverlight, or dedicated JavaScript libraries like Video.js combined with specific plugins, etc. The use of these plugins is gradually restricted. Technologies like Flash Player and Silverlight are too old to adapt to most browser environments. Although third-party JavaScript libraries can provide a certain degree of support, they still rely on specific plugins and browser environments. Moreover, with the upgrade of browser security policies, plugin support is weakening day by day, resulting in serious compatibility problems. Transcoding servers transcode RTSP streams into Web-friendly formats such as HLS, DASH, etc., and then transmit them to the browser via the HTTP protocol. Although this method can break through the native support limit of browsers for the RTSP protocol and support a wider range of devices and platforms, it also has certain disadvantages. First of all, the transcoding process itself will increase additional system complexity and computational overhead, and a dedicated transcoding server needs to be configured, which undoubtedly increases the deployment and maintenance costs. More importantly, the transcoding process will introduce latency, affecting the real-time performance of the video stream. Especially in monitoring applications that require high real-time performance, it may not meet the strict timeliness requirements. Others, such as attempts based on technologies like JavaScript and Web RTC, implement the playback of RTSP streams by adopting different protocols and architectures. Although these solutions provide new ideas, they often require developers to invest a high amount of technology, and still face challenges in terms of network environment, browser compatibility, performance, etc.

[0005] Therefore, how to smoothly, efficiently, and at low cost implement the playback of RTSP video stream data on the browser client is a technical problem that urgently needs to be solved in this field. Summary of the Invention

[0006] This application proposes a method, device, medium, and device for playing RTSP video stream data on a browser client to solve the problems of poor compatibility, high latency, and large technical investment in traditional RTSP video stream data playback. The technical solution provided by this application proposes an innovative method of using tags to play RTSP videos in the browser. This method cleverly bypasses the direct support limit of browsers for RTSP video streams, eliminates the need for additional plugins, and realizes an efficient, low-latency, and low-cost real-time RTSP video stream data playback solution.

[0007] An embodiment of this application provides a method for playing RTSP video stream data on a browser client. The method is executed by a background server and includes:

[0008] Obtain the configuration information of the camera from the front-end configuration interface through a preset interface;

[0009] Pull the RTSP video stream from the camera according to the configuration information;

[0010] Grab each frame of the RTSP video stream and obtain the compressed data by using the inter-frame compression technology;

[0011] Perform Base64 encoding conversion on the compressed data to obtain the encoded data in image format;

[0012] Push the encoded data to the video playback device to dynamically display the encoded data through the browser client of the video playback device.

[0013] Further, pushing the encoded data to the video playback device to dynamically display the encoded data through the browser client of the video playback device includes:

[0014] Push the encoded data to the video playback device through the WebSocket protocol, so that the browser client of the video playback device uses the src attribute of the tag in HTML to dynamically update the image and realize the dynamic display of the encoded data.

[0015] Further, grabbing each frame of the RTSP video stream includes:

[0016] Grab each frame of the RTSP video stream through the Java CV tool.

[0017] Further, obtaining the configuration information of the camera from the front-end configuration interface through a preset interface includes:

[0018] Obtain the configuration information of the IP address, ONVIF username and password of the camera from the front-end configuration interface through a preset interface;

[0019] Or,

[0020] Obtain the configuration information of the RTSP video stream address of the camera from the front-end configuration interface through a preset interface.

[0021] Further, after obtaining the configuration information of the IP address, ONVIF username and password of the camera from the front-end configuration interface through a preset interface, the method further includes:

[0022] Store the received configuration information of the IP address, ONVIF username and password of the camera in the database, so as to obtain the configuration information from the database when a preview request is received.

[0023] The embodiments of the present application further provide a method for a browser client to play RTSP video stream data. The method is executed by a video playing device and includes:

[0024] Receiving the encoded data of the RTSP video stream pushed by the background server; wherein, the encoded data is in the picture format obtained by the background server through Base64 encoding conversion;

[0025] Using the browser client to dynamically update the picture by using the src attribute of the tag in HTML to realize the dynamic display of the encoded data.

[0026] The embodiments of the present application further provide a device for a browser client to play RTSP video stream data. The device is configured in the background server and includes:

[0027] A configuration information acquisition module, configured to acquire the configuration information of the camera from the front-end configuration interface through a preset interface;

[0028] A stream pulling module, configured to pull the RTSP video stream from the camera according to the configuration information;

[0029] A processing module, configured to grab each frame of the RTSP video stream and obtain the compressed data by using the inter-frame compression technology;

[0030] An encoding conversion module, configured to perform Base64 encoding conversion on the compressed data to obtain the encoded data in the picture format;

[0031] A pushing module, configured to push the encoded data to the video playing device for the dynamic display of the encoded data through the browser client of the video playing device.

[0032] The embodiments of the present application further provide a device for a browser client to play RTSP video stream data. The device is configured in the video playing device and includes:

[0033] An encoded data receiving module, configured to receive the encoded data of the RTSP video stream pushed by the background server; wherein, the encoded data is in the picture format obtained by the background server through Base64 encoding conversion;

[0034] A playing module, configured to use the browser client to dynamically update the picture by using the src attribute of the tag in HTML to realize the dynamic display of the encoded data.

[0035] The embodiments of the present application further provide a computer-readable storage medium, on which a computer program is stored. When the program is executed by a processor, the method for a browser client to play RTSP video stream data as described above is implemented.

[0036] An embodiment of the present application also provides an electronic device, 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 method for playing RTSP video stream data by a browser client as described above is implemented.

[0037] The embodiment of the present application adopts the following technical solutions: obtaining configuration information of a camera from a front-end configuration interface through a preset interface; pulling an RTSP video stream from the camera according to the configuration information; performing frame-by-frame capture on the RTSP video stream, and obtaining compressed data by using an inter-frame compression technology; performing Base64 encoding conversion on the compressed data to obtain encoded data in a picture format; pushing the encoded data to a video playback device to perform dynamic display of the encoded data through a browser client of the video playback device.

[0038] The above at least one technical solution adopted by the embodiment of the present application can achieve the following beneficial effects:

[0039] Strong compatibility: Through efficient WebSocket transmission and Base64 encoding processing, this solution enables the technology to run seamlessly in various modern browsers (such as Chrome, Firefox, Safari, etc.) and mobile devices (such as smart phones, tablets, etc.), and no longer depends on high-end hardware devices. This makes this solution have extremely strong scalability and universality, and can support a wide range of application scenarios.

[0040] Low cost: There is no need to deploy an additional transcoding server, reducing system complexity and deployment costs.

[0041] High real-time performance: By pushing picture data in real time through WebSocket, the transmission delay is reduced, and the real-time performance of video playback is improved.

[0042] Easy to implement and maintain: The technical solution is simple and clear. The front end only involves basic knowledge of HTML and JavaScript, and the back end can be implemented based on common Web development frameworks, reducing the development difficulty and maintenance costs. Description of the Drawings

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

[0044] Figure 1 It is a schematic flowchart of the method for playing RTSP video stream data by a browser client provided in Embodiment 1 of the present application;

[0045] Figure 2 It is a schematic flowchart of the method for a browser client to play RTSP video stream data provided in Embodiment 2 of this application;

[0046] Figure 3 It is a signaling diagram of a browser client playing RTSP video stream data provided in Embodiment 3 of this application;

[0047] Figure 4 It is a schematic structural diagram of the device for a browser client to play RTSP video stream data provided in Embodiment 4 of this application;

[0048] Figure 5 It is a schematic structural diagram of the device for a browser client to play RTSP video stream data provided in Embodiment 5 of this application;

[0049] Figure 6 It is a schematic structural diagram of an electronic device provided in Embodiment 6 of this application. Detailed implementation manners

[0050] To make the objectives, technical solutions, and advantages of this application clearer, the technical solutions of this application will be clearly and completely described below in conjunction with the specific embodiments of this application and the corresponding drawings. Obviously, the described embodiments are only a part rather than all of the embodiments of this application. All other embodiments obtained by those of ordinary skill in the art based on the embodiments in this application without creative efforts shall fall within the protection scope of this application.

[0051] The following will, with reference to the drawings, elaborate on the technical solutions provided in each embodiment of this application.

[0052] Embodiment 1

[0053] Figure 1 It is a schematic flowchart of the method for a browser client to play RTSP video stream data provided in Embodiment 1 of this application. The method is executed by a background server. As Figure 1 shown, the method includes:

[0054] S11, obtaining the configuration information of the camera from the front-end configuration interface through a preset interface;

[0055] Among them, the background server can be a server that provides various services and data processing at the back end in a network application. It is responsible for receiving requests from the front end and performing operations such as data processing and storage. In this solution, the background server is the main body that executes the entire video processing method. The distributed server cluster technology can be adopted to connect multiple servers through a network to work together, improving the processing ability and reliability.

[0056] A preset interface can be a pre-set channel for data interaction between different systems or modules. It can be a RESTful API interface, following the REST architectural style, using the HTTP protocol for data transmission, and having good scalability and cross-platform capabilities.

[0057] A front-end configuration interface can be a visual interface for users to perform configuration operations, usually presented in a browser. Responsive design technology can be adopted to make it adaptable to different screen sizes, such as computers, tablets, and mobile phones.

[0058] A camera can be a device for collecting video images. Here, it can be a network camera for real-time monitoring and video recording, supporting the RTSP protocol, and capable of transmitting the collected video in the form of an RTSP video stream.

[0059] In this solution, the background server can obtain the configuration information of the camera from the front-end configuration interface, send a request to the preset interface through an HTTP request, and receive the configuration information.

[0060] S12, pull the RTSP video stream from the camera according to the configuration information;

[0061] Configuration information can be the setting information about the camera obtained from the front-end configuration interface, such as the IP address, port number, username, and password of the camera, used to establish a connection with the camera.

[0062] An RTSP video stream is a video stream of the Real-Time Streaming Protocol, which is a protocol for real-time transmission of audio and video data over a network. The video can be encoded using the H.264 or H.265 coding standard to improve the video compression ratio and transmission efficiency.

[0063] In this solution, according to the configuration information, the background server can send a request to the camera and obtain the RTSP video stream from the camera. An open-source RTSP client library, such as Live555, can be used to implement the operation of pulling the video stream. Pulling the RTSP video stream according to the configuration information ensures that the background server can accurately obtain real-time video data from the specified camera, providing a basis for subsequent processing.

[0064] S13, perform frame-by-frame capture on the RTSP video stream and obtain compressed data using inter-frame compression technology;

[0065] Among them, the inter-frame compression technology is a video compression technology that analyzes the differences between adjacent video frames and only stores and transmits this difference information, thereby reducing the data volume. Motion estimation and compensation techniques, such as those used in the MPEG series of standards, can be adopted to efficiently compress video frames.

[0066] The compressed data is the video data obtained after being processed by the inter-frame compression technology, and the data volume is significantly reduced compared to the original video stream.

[0067] Frame-by-frame capture can be to sequentially extract each frame of image data from the RTSP video stream. The OpenCV library can be used to implement the operation of capturing video frames. OpenCV is a powerful computer vision library that provides rich video processing functions. Through frame-by-frame capture and inter-frame compression technology, the storage space and transmission bandwidth of video data are reduced, the efficiency of data processing and transmission is improved, and at the same time, the basic quality of the video is ensured.

[0068] S14, perform Base64 encoding conversion on the compressed data to obtain encoded data in picture format;

[0069] Base64 encoding can be a coding method that uses 64 characters to represent any binary data. In network transmission, it is often used to convert binary data into printable ASCII characters for convenient transmission in text protocols.

[0070] The encoded data in picture format can be the data after Base64 encoding conversion, existing in the form of a picture format, and can be used for display in a browser.

[0071] This solution can use the Base64 encoding function provided by the programming language, such as the base64 module in Python, to implement the encoding conversion. Specifically, the compressed data can be converted from binary format to a Base64-encoded string format.

[0072] Performing Base64 encoding conversion on the compressed data enables it to be conveniently transmitted and displayed in a browser, solves the problem of transmitting binary data in text protocols, and improves the compatibility and transportability of the data.

[0073] S15, push the encoded data to the video playback device to dynamically display the encoded data through the browser client of the video playback device.

[0074] The video playback device can be a device for playing videos, such as a computer, mobile phone, and tablet, etc., which usually has a browser client.

[0075] The browser client can be browser software installed on a video playback device, which is used to display web content and process video data. WebRTC technology can be adopted to achieve real-time audio and video communication and data transmission between browsers.

[0076] Pushing can be sending encoded data from a background server to a video playback device. The WebSocket protocol can be used to achieve real-time two-way communication between the server and the client, ensuring the timely push of data. The encoded data is dynamically displayed in the browser client to form the effect of video playback. Pushing the encoded data to the browser client of the video playback device for dynamic display realizes the real-time transmission and playback of video data from the camera to the user terminal, providing users with a convenient video viewing experience.

[0077] This technical solution completes a series of operations such as obtaining a video stream from a camera, compressing, encoding, and pushing for display through a background server, realizing the efficient processing and real-time transmission of video data. Using a distributed server cluster improves the processing capacity, adopting inter-frame compression technology reduces the data volume, and Base64 encoding and WebSocket pushing ensure the compatibility and real-time nature of the data, ultimately providing users with a smooth and convenient video viewing experience.

[0078] The technical solution provided in this embodiment obtains the configuration information of the camera from the front-end configuration interface through a preset interface; pulls the RTSP video stream from the camera according to the configuration information; grabs each frame of the RTSP video stream and uses inter-frame compression technology to obtain compressed data; performs Base64 encoding conversion on the compressed data to obtain encoded data in image format; pushes the encoded data to the video playback device for dynamic display of the encoded data through the browser client of the video playback device. This technical solution proposes an innovative method of using tags to play RTSP videos in a browser. This method cleverly bypasses the direct support limitation of browsers for RTSP video streams, and without additional plugins, realizes an efficient, low-latency, and low-cost real-time RTSP video stream data playback solution.

[0079] In one embodiment, optionally, pushing the encoded data to the video playback device for dynamic display of the encoded data through the browser client of the video playback device includes:

[0080] Pushing the encoded data to the video playback device through the WebSocket protocol, so that the browser client of the video playback device uses the src attribute of the tag to dynamically update the image, realizing the dynamic display of the encoded data.

[0081] Among them, the encoded data is the picture format data encoded in Base64 obtained after the previous steps of processing. This kind of data represents the binary picture content in text form, which is convenient for transmission and processing in the network.

[0082] The WebSocket protocol is a protocol for full-duplex communication over a single TCP connection. Different from the traditional HTTP request-response mode, WebSocket allows real-time two-way data transmission between the server and the client, which is very suitable for scenarios that require real-time data updates, such as real-time push of video streams. In this solution, using the WebSocket protocol can ensure that the encoded data can be pushed from the background server to the video playback device in a timely and efficient manner.

[0083] A video playback device is an electronic device that can receive and process video data, such as a computer, a smart phone, and a tablet. These devices usually install a browser client to display web page content and process multimedia data.

[0084] The browser client can be a browser software used by users on the video playback device, such as Chrome, Firefox, Safari, etc. The browser client is responsible for parsing web page codes such as HTML, CSS, and JavaScript and presenting the web page content to the user. In this scenario, it is used to receive and display the encoded data pushed from the server.

[0085] The tag in HTML is a tag used to display pictures on a web page. The tag has an src attribute, which is used to specify the source of the picture to be displayed. By dynamically updating the value of the src attribute, the dynamic switching and display of pictures can be achieved. The src attribute is an important attribute of the tag, which specifies the URL of the picture file or the Base64-encoded data. When the value of the src attribute changes, the browser will automatically load the new picture and display it on the page.

[0086] In this solution, the encoded data is sent from the background server to the video playback device through the WebSocket protocol. The server, as the sender, actively sends data to the client to ensure that the data can reach the client in a timely manner. In the browser client, use JavaScript code to continuously change The value of the src attribute of the tag. Each time the src attribute is updated, the browser will load and display a new image according to the new value, thus achieving the dynamic display effect of the image. This solution achieves the goal of dynamically displaying encoded data through a series of operations and technical means. Here, it involves the collaborative work of multiple aspects such as data transmission of the WebSocket protocol, the use of HTML tags, and the writing of JavaScript code.

[0087] This technical solution uses the WebSocket protocol to push encoded data to the video playback device, and through the tag of the browser client to dynamically update the image, realizing the dynamic display of encoded data. This method has the following several significant beneficial effects:

[0088] Strong real-time performance: The full-duplex communication feature of the WebSocket protocol enables the server to push encoded data to the client in real time, ensuring the timely update and display of video data, reducing latency, and providing users with a smooth viewing experience.

[0089] Good compatibility: Using HTML's tags and JavaScript to achieve dynamic display, almost all modern browsers support these standard technologies, eliminating the need for users to install additional plugins or software, and improving the compatibility and universality of the solution.

[0090] Easy to implement: Utilizing existing Web technologies such as HTML, JavaScript, and WebSocket, the development and maintenance costs are relatively low. Developers can use mature development tools and frameworks to quickly implement the dynamic display function of video data.

[0091] Less resource consumption: Adopting the method of Base64-encoded image data and dynamically updating the tag avoids the large amount of caching and complex video decoding processes required by traditional video playback, reduces the resource consumption of the device, and improves the performance and stability of the system.

[0092] In one embodiment, optionally, frame-by-frame capture of the RTSP video stream includes:

[0093] Performing frame-by-frame capture of the RTSP video stream through the Java CV tool.

[0094] Among them, the RTSP video stream (Real-Time Streaming Protocol) is an application layer protocol used to control the media server to transmit real-time data to the client. The RTSP video stream is a continuous sequence of video data transmitted in the network following this protocol, usually generated by devices such as network cameras, and contains a series of video frames arranged in chronological order.

[0095] Java CV is a Java interface library based on OpenCV and FFmpeg. It encapsulates the powerful functions of OpenCV and FFmpeg into Java classes and methods, enabling Java developers to conveniently use the functions of these open-source computer vision and multimedia processing libraries. In terms of video processing, Java CV provides a series of tools and APIs that can implement operations such as video reading, decoding, and frame extraction.

[0096] In this solution, each frame of image data is extracted from the RTSP video stream. When using Java CV tools, relevant APIs provided by it are called to sequentially extract each video frame in the video stream according to the time order of the video stream for subsequent processing of these frames, such as compression, encoding, and other operations.

[0097] This solution has the following beneficial effects in grabbing frames from the RTSP video stream frame by frame using Java CV tools:

[0098] Cross-platform compatibility: Java CV is developed based on Java, enabling this video frame grabbing solution to run on different operating systems, such as Windows, Linux, and MacOS, without the need for a large amount of code modification and adaptation work for different platforms, reducing development and maintenance costs.

[0099] Powerful functions: Java CV integrates the functions of OpenCV and FFmpeg. OpenCV is an open-source library widely used in the field of computer vision, providing rich image processing and computer vision algorithms; FFmpeg is a powerful open-source multimedia processing tool that supports the encoding and decoding of various video and audio formats. With the functions of these libraries, subsequent processing operations such as image enhancement, object detection, and video compression can be conveniently performed after grabbing video frames.

[0100] High development efficiency: Java CV encapsulates the complex underlying operations of OpenCV and FFmpeg into simple and easy-to-use Java APIs. Java developers can use their familiar Java language and development environment for video processing development without having to deeply understand the underlying C or C++ code, greatly improving development efficiency and shortening the development cycle.

[0101] In one embodiment, optionally, the configuration information of the camera is obtained from the front-end configuration interface through a preset interface, including:

[0102] The configuration information of the IP address, ONVIF username, and password of the camera is obtained from the front-end configuration interface through a preset interface;

[0103] Or,

[0104] Obtain the configuration information of the RTSP video stream address of the camera through a preset interface from the front-end configuration interface.

[0105] Among them, the IP address, that is, the Internet Protocol address, is a digital label assigned to a network device (such as a camera) to uniquely identify the device in the network. Through the IP address, the background server can locate the specific camera device, establish a network connection with it, and thus obtain the video data collected by the camera.

[0106] The ONVIF username and password are for a global open industry forum dedicated to promoting the interoperability of network video surveillance products. Many cameras that support the ONVIF standard require the use of a username and password for authentication to ensure that only authorized users or devices can access their functions and data. After the background server obtains this information, it must provide the correct username and password when establishing a connection with the camera to access the camera normally.

[0107] The RTSP video stream address is the access path of the RTSP video stream, which includes the protocol type (RTSP), the IP address of the camera, the port number, and possibly other parameters. Through this address, the background server can directly access the RTSP video stream of the camera without having to go through other complex configuration steps to obtain the video data.

[0108] In this solution, the specified configuration information can be obtained from the front-end configuration interface through a preset interface. The preset interface will transfer the relevant configuration information to the background server according to the content input or set by the user in the front-end configuration interface. During this process, the background server will send a request to the preset interface, and the interface will return the corresponding configuration information, such as the IP address, the ONVIF username and password, or the RTSP video stream address.

[0109] This solution obtains different configuration information of the camera from the front-end configuration interface through a preset interface, providing two different ways to obtain configuration information. It can obtain the IP address of the camera, the ONVIF username and password, or directly obtain the RTSP video stream address. This flexible configuration method can adapt to cameras of different types and different configuration requirements, meeting the needs of diverse application scenarios. For example, for cameras that support the ONVIF standard, a connection can be established by obtaining the IP address and authentication information; for cameras whose RTSP video stream address is already known, this address can be directly used for access. Through the preset interface, users can easily input and manage the configuration information of the camera in the front-end configuration interface, while the background server can automatically obtain this information from the interface without manual intervention. This greatly simplifies the configuration and management process of the camera and improves the usage efficiency of the system. For cameras that require authentication, by obtaining the ONVIF username and password, the background server can perform authentication when establishing a connection with the camera, ensuring that only authorized devices can access the camera data, thus guaranteeing the security and privacy of the video data. This solution can be compatible with cameras from different manufacturers and different models. As long as these cameras support the ONVIF standard or can provide the RTSP video stream address, they can be configured and accessed through this solution, improving the versatility and compatibility of the system.

[0110] In one embodiment, optionally, after obtaining the configuration information of the IP address, ONVIF username and password of the camera from the front-end configuration interface through the preset interface, the method further includes:

[0111] Storing the received configuration information of the IP address, ONVIF username and password of the camera in a database, so as to obtain the configuration information from the database when a preview request is received.

[0112] Among them, a database can be a repository that organizes, stores, and manages data according to a data structure. In this scenario, the database is used to store the configuration information of the camera, such as the IP address, ONVIF username and password. Common database types include relational databases such as MySQL and Oracle, and non-relational databases such as MongoDB, which can be selected according to specific requirements. The database provides the function of persistent data storage, ensuring that data will not be lost when the system restarts or in case of an exception.

[0113] This solution writes the configuration information of the received camera's IP address, ONVIF username, and password into the database. This process usually involves an insert operation in the database. The background server will encapsulate the configuration information into an appropriate data format according to the database interface specification and then send it to the database for storage. For example, when using a MySQL database, the SQL INSERT statement will be used to insert data into the corresponding table. When a preview request is received, the previously stored camera configuration information is read from the database. This requires a query operation in the database according to the conditions specified in the preview request (such as the camera identifier). Taking MySQL as an example, the SQL SELECT statement will be used to find the matching configuration information.

[0114] This solution stores the camera configuration information in the database and retrieves it when needed. The database provides a reliable data storage mechanism to ensure that the camera configuration information will not be lost due to system failures, server restarts, etc. This enables the system to still access and use this configuration information normally after restart, ensuring the stability and continuity of the system. Centralizing the storage of configuration information in the database facilitates the unified management and maintenance of the configuration information of a large number of cameras. Administrators can conveniently view, modify, and delete configuration information through the database management tool without having to operate in multiple places, improving the management efficiency. When a preview request is received, the configuration information is directly retrieved from the database, avoiding the cumbersome process of retrieving configuration information from the front-end configuration interface every time, reducing the response time, and improving the system's response speed and user experience. The database's transaction processing mechanism can ensure data consistency. During the process of storing and retrieving configuration information, if an abnormal situation occurs, the database can perform a rollback operation to ensure data integrity and consistency, avoiding system errors caused by inconsistent data.

[0115] Embodiment 2

[0116] Figure 2 It is a schematic flowchart of the method for a browser client to play RTSP video stream data provided in Embodiment 2 of this application. The method is executed by a video playback device, which is connected to the background server provided in the previous embodiment and the execution steps correspond. As Figure 2 shown, the method includes:

[0117] S21, receiving the encoded data of the RTSP video stream pushed by the background server; wherein, the encoded data is in the image format obtained by the background server through Base64 encoding conversion;

[0118] Among them, the video playback device can be an electronic device capable of receiving, processing, and playing video data, such as a smartphone, tablet, smart TV, computer, etc. These devices have the corresponding hardware and software environments to support the video decoding and display functions. Devices with a high-performance GPU (graphics processing unit) can be adopted to utilize its powerful graphics processing ability to accelerate the video rendering and display.

[0119] The background server can be a server-side device responsible for processing and managing video data. It receives the front-end configuration information, pulls the RTSP video stream, performs operations such as compression and encoding, and then pushes the encoded data to the video playback device. A distributed server architecture can be adopted, and multiple servers work together to improve the efficiency of data processing and pushing.

[0120] The RTSP video stream is the video stream of the Real-Time Streaming Protocol, which is a protocol for real-time transmission of audio and video data over the network. The RTSP video stream contains continuous video frames and is the original source of video data.

[0121] The encoded data can be the data after being converted by Base64 encoding and exists in the form of pictures. Base64 encoding is a way of encoding binary data into printable ASCII characters, which is convenient for transmission in text protocols. This encoded data can be directly displayed in the browser.

[0122] In this solution, the video playback device obtains the pushed encoded data from the background server. The WebSocket protocol can be used to establish a real-time connection with the background server, and data is received through this connection to ensure the real-time and stability of the data. The background server sends the encoded data to the video playback device. The server actively sends data to the client to achieve real-time data transmission.

[0123] By encoding and converting the RTSP video stream by the background server and pushing it to the video playback device, the real-time transmission of video data from the server to the client is realized, and the use of Base64 encoding facilitates the transmission and processing of data in the network, improving the compatibility and transportability of the data.

[0124] S22, use the browser client to dynamically update the picture by using the src attribute of the tag in HTML to achieve dynamic display of the encoded data.

[0125] The browser client can be browser software installed on the video playback device, such as Chrome, Firefox, Safari, etc. The browser client is responsible for parsing web page codes such as HTML, CSS, and JavaScript and presenting the web page content to the user.

[0126] Of HTML The tag can be a tag in HTML used to display images on a web page. The tag has an src attribute used to specify the source of the image to be displayed.

[0127] The src attribute is An important attribute of the tag, which specifies the URL of the image file or Base64-encoded data. When the value of the src attribute changes, the browser automatically loads the new image and displays it on the page.

[0128] In this solution, the video playback device calls the browser client to perform subsequent operations and uses the functions of the browser to display video data. In the browser client, JavaScript code is used to continuously change The value of the src attribute of the tag. Each time the src attribute is updated, the browser loads and displays a new image according to the new value, thus achieving the dynamic display effect of the image. Through a series of operations and technical means, the goal of dynamically displaying the encoded data is achieved. This involves the coordinated work of multiple aspects such as the use of the browser client, the operation of HTML tags, and the writing of JavaScript code.

[0129] The technical solution provided in this embodiment receives the encoded data of the RTSP video stream pushed by the background server; wherein, the encoded data is in the image format obtained by the background server through Base64 encoding conversion; the browser client is used to dynamically update the image using the src attribute of the HTML tag, achieving the dynamic display of the encoded data. This technical solution uses the browser client and the src attribute of the HTML tag to dynamically update the image, achieving the dynamic display of the encoded data and providing users with a smooth video viewing experience. This method does not require additional plugins or complex video players, has good compatibility and versatility, and can run on a variety of devices and browsers.

[0130] Embodiment 3

[0131] To enable those skilled in the art to understand this solution more clearly, this application also provides a preferred embodiment. Figure 3 A signaling diagram for a browser client to play RTSP video stream data provided for Embodiment 3 of this application.

[0132] The technical solution of this solution provides a solution without plugins and transcoding servers by combining the WebSocket protocol with the HTML tag. The specific steps are as follows:

[0133] Step 1: Configuration of Video Devices: In this solution, by providing a simplified front-end configuration interface, the user first configures the IP address, ONVIF username, and password of the camera through this interface according to the protocols supported by the video device. If the user knows the RTSP video stream address of the video device, they can directly configure the RTSP stream address. The front-end submits the device configuration, including information such as the RTSP stream address, to the background server through an HTTPS request. This step ensures the secure transmission of device information and provides a basic interface for device configuration and management.

[0134] Step 2: RTSP Stream Acquisition: After receiving the configuration information, the background server uses the ONVIF protocol to establish a connection with the camera and requests to obtain the RTSP video stream address and other necessary device information of the video device (if the RTSP video stream address has been configured for the video device to be played, this step can be skipped directly). On this basis, parameters such as the video frame rate, video stream quality, and resolution are set according to requirements to ensure that in the case of low-demand video playback, the video resolution and frame rate are reduced as much as possible to reduce bandwidth occupancy, ensure smooth video playback, and avoid video stuttering.

[0135] Step 3: Real-time Frame Extraction and Conversion of Video Stream: The background server grabs frames from the RTSP video stream frame by frame through JavaCV. By adopting real-time encoding technology based on inter-frame compression, it dynamically analyzes the redundant parts between video frames, reduces the data transmission volume through a compression algorithm, and at the same time maintains the video quality. After compressing and processing the data, it is encoded and converted to Base64 to make it into a picture format. This step ensures that the data format can be directly parsed by the Web browser for quick transmission through the WebSocket protocol.

[0136] Step 4: WebSocket Push: Different from the traditional HTTP protocol transmission, this solution realizes two-way communication through WebSocket to ensure the real-time nature and low latency of data. At the same time, the binary data format transmitted by WebSocket has higher transmission efficiency compared to the traditional text format. The converted picture data is pushed to the browser client in real time through the WebSocket protocol.

[0137] Step 5: Display on Browser Client: After receiving the picture data, the browser WebSocket client uses the src attribute of the tag in HTML to dynamically update the picture, thus simulating the video playback effect.

[0138] The technical solution of this solution has the following technical effects:

[0139] Strong compatibility: Through efficient WebSocket transmission and Base64 encoding processing, this solution enables the technology to run seamlessly in various modern browsers (such as Chrome, Firefox, Safari, etc.) and mobile devices (such as smartphones, tablets, etc.), without relying on high-end hardware devices. This gives this solution extremely strong scalability and universality, and can support a wide range of application scenarios.

[0140] Low cost: There is no need to deploy additional transcoding servers, reducing system complexity and deployment costs.

[0141] High real-time performance: By pushing image data in real time through WebSocket, the transmission delay is reduced, and the real-time performance of video playback is improved.

[0142] Easy to implement and maintain: The technical solution is simple and clear. The front end only involves basic knowledge of HTML and JavaScript, and the back end can be implemented based on common Web development frameworks, reducing the development difficulty and maintenance costs.

[0143] In this solution, ONVIF (Open Network Video Interface Forum) is an open international standard for defining the interfaces of network video devices. It provides a standardized method for different video surveillance devices to communicate with each other and share data, including video streams. Obtaining the RTSP (Real Time Streaming Protocol) stream address is part of the ONVIF protocol. The implementation of this solution is mainly based on: ONVIF devices will provide a WSDL file, which describes information such as the services, interfaces, and message formats of the devices. This solution uses this WSDL file to call the SOAP service through JAX-WS (Java API for XML Web Services) to process this WSDL file, so as to obtain information such as the services, interfaces, and messages of the devices. Among them, from the Media service, a device can define one or more Profiles, and each Profile contains one or more Stream URIs. These URIs are the addresses of the RTSP streams. From the Media Profile, the URL of the RTSP stream can be extracted. This URL is usually an RTSP or HTTP URI, pointing to the real-time video stream of the device. Then this RTSP stream address can be used to establish a connection with the device through the RTSP protocol to obtain the video stream.

[0144] For the real-time extraction and Base64 encoding conversion of RTSP video streams, the specific implementation process is as follows:

[0145] JavaCV is a Java library that provides interfaces for Java and Android to access libraries such as OpenCV and FFmpeg. It uses the FFmpeg library as its backend. FFmpeg is a powerful multimedia processing framework that supports a variety of audio and video formats, including capturing and decoding from RTSP streams. This solution obtains video from an RTSP stream through JavaCV and grabs frames one by one. At the same time, combined with real-time encoding technology based on inter-frame compression, it effectively reduces the amount of data transmission and improves the efficiency of video stream transmission. The specific steps are as follows:

[0146] 1. Initialize FFmpegFrameGrabber: In JavaCV, first create an FFmpegFrameGrabber object and pass in the URL of the RTSP stream. This starts an FFmpeg process, establishes a connection with the RTSP server, and prepares to start receiving stream data. FFmpegFrameGrabber will allocate a decoder for the video stream and initialize the network connection to prepare for subsequent frame grabbing. At this time, through the FFmpegFrameGrabber object, the system starts to establish an interactive link with the RTSP video stream.

[0147] Code: FFmpegFrameGrabber grabber = FFmpegFrameGrabber.createDefault("RTSP address");

[0148] 2. Start grabbing: The start() method starts the process of grabbing frames from the RTSP stream. This includes setting the decoder, initializing the network connection, and starting data transmission.

[0149] Code: grabber.start();

[0150] 3. Obtain frames: The grabImage() method. This method is similar to grab(), but only focuses on the video part. If your stream contains audio and video, grab() will process both, while grabImage() will only process the video. It will skip the audio data and directly return a Frame object containing the video frame. In the case of processing a pure video stream or only needing video frames, grabImage() may be more appropriate because it is faster and can improve efficiency, avoiding unnecessary audio processing and occupying less resources.

[0151] Code: Frame frame = grabber.grabImage();

[0152] 4. Process Frames and Apply Inter-Frame Compression: The captured Frame object contains the data of the video frame. During this process, this solution combines real-time encoding technology based on inter-frame compression. By analyzing the redundant parts between video frames, the system only encodes the parts that have changed and represents the unchanged areas by referring to the content of the previous or next frame. This greatly reduces the volume of video data and improves the video transmission efficiency. After processing, the video data will be converted from the Frame object to a BufferedImage object through Java2DFrameConverter, then converted to a byte array, and encoded into a format suitable for direct parsing by a web browser using Base64 encoding. The image data after Base64 encoding conversion is transmitted through the WebSocket protocol for quick transmission to the browser client for display.

[0153] Core Code:

[0154]

[0155]

[0156] 5. Stop Grabbing: Finally, use the stop() method to close the connection and stop grabbing frames. At this time, all stream data and decoder resources will be released to ensure the effective management of system resources.

[0157] Code: grabber.stop();

[0158] Redraw or Mark Video Frames According to Business Requirements:

[0159] For the BufferedImage object converted from the Frame object through Java2DFrameConverter, Graphics2D can be used to redraw or mark the current frame. For example, if a fixed area has been drawn as an electronic fence area for a certain video device, then from the obtained video frames, the specified position of the video frame can be marked with an electronic fence through Graphics2D, and some text or image prompts can be made. Finally, after a series of processing, the picture is encoded as a Base64 string again for the BufferedImage and pushed to the front end for display. In this way, the previously prefabricated electronic fence marks or other marks can be seen in real time when previewing the video on the front end.

[0160] Real-time Push and Multiple Push of Image Data via WebSocket:

[0161] WebSocket is a protocol that establishes a long - term connection between the client and the server. Different from the traditional HTTP protocol, WebSocket allows full - duplex (two - way) communication between both parties. This means that both the server and the client can send data at any time without waiting for the other party's response, greatly improving the efficiency of data transmission. Moreover, the WebSocket protocol allows the sending of binary data, which is very effective for transmitting large - data types such as images, audio, and video. And because the binary format is usually more compact than the text format, the transmission speed is faster. Therefore, this solution uses WebSocket transmission. Its real - time, low - latency, and efficient data - transmission features ensure the real - time and smooth video playback, which is also one of the keys to the implementation of this solution. At the same time, a websocket link management mechanism is introduced. For the same rtsp video stream, by reasonably managing the websocket links, the effect of pulling once and pushing and playing in multiple places can be achieved, greatly reducing the consumption of pulling the video stream.

[0162] The browser side uses The generality of the tag:

[0163] The tag is one of the most commonly used elements in HTML and is used to insert images into web pages. It is widely supported by all modern browsers, including Chrome, Firefox, Safari, Edge, and Internet Explorer, etc. This ensures that no matter which browser the user uses, the image can be seen, and The src attribute of the tag can not only point to a URL but also directly contain Base64 - encoded image data. In this way, the image data pushed by WebSocket can be directly embedded into the HTML code, which also ensures that no additional plugins are required for real - time video playback, achieving an efficient and low - cost solution.

[0164] This solution utilizes the WebSocket protocol and HTML's tag to achieve the real - time playback of RTSP video streams in the browser.

[0165] Obtaining RTSP video stream through ONVIF protocol: SOAP service is called through JAX-WS (Java API for XML Web Services) to process the WSDL file provided by the ONVIF device. From this WSDL file, information such as the device's services, interfaces, and message formats can be obtained. In this solution, from the Media service, the device can define one or more Profiles, and each Profile contains one or more Stream URIs. These URIs are the addresses of the RTSP streams. In this way, we obtain the main RTSP address, facilitating the unified processing of the subsequent RTSP video stream playback process in the browser.

[0166] By initially adjusting the quality, frame rate, and resolution of the video stream during pulling, to ensure smooth playback of the video in different bandwidth environments, appropriately adjusting the configuration of FFmpeg and setting an appropriate cache can effectively reduce the impact of network latency on video playback smoothness. This ensures the stability and smoothness of the video.

[0167] Application of real-time extraction and Base64 encoding conversion of RTSP video stream: Using javaCV to obtain the video stream from the RTSP stream address, grab, process, and perform Base64 encoding conversion frame by frame. This mechanism ensures the correct order of video pictures and facilitates subsequent WebSocket pushing and browser tag display.

[0168] For the BufferedImage object converted from the Frame object through Java2DFrameConverter, Graphics2D can be used to redraw or mark the current frame, and the video frame can be redrawn. When it is convenient to preview the video of a certain device in multiple places, it can be drawn and displayed in multiple places at one time, reducing the overhead of pulling the stream and marking.

[0169] Real-time pushing of picture data through WebSocket: By reasonably managing each WebSocket channel and accurately controlling the real-time pushing of picture data through WebSocket, the transmission delay is reduced, and the real-time performance of video playback is improved.

[0170] The technical solution is simple and clear. The front end only involves basic knowledge of HTML and JavaScript, and the back end can be implemented based on common Web development frameworks, reducing the development difficulty and maintenance cost.

[0171] The innovation of the inventive concept of this solution lies in:

[0172] Implementation mechanism for obtaining RTSP video stream address through ONVIF protocol: It includes how to call SOAP services through JAX-WS (Java API for XML Web Services) in a Java project to process the WSDL file provided by ONVIF devices, and obtain the real-time RTSP video stream address and other device information from the WSDL file, so as to ensure that video frames can be captured frame by frame from the RTSP video stream subsequently.

[0173] Real-time extraction and Base64 encoding conversion mechanism of RTSP video stream: It includes how to capture video stream frame by frame through the RTSP stream address in a Java project, including how to convert the captured frames into pictures, then into byte arrays, and perform Base64 encoding conversion on these arrays to ensure that the captured video pictures are correct and in order.

[0174] Using WebSocket for real-time push of picture data: It includes how to manage each WebSocket channel, when to trigger the system to pull the extraction and Base64 encoding conversion mechanism of the RTSP stream, and when to close the real-time push of WebSocket, so as to achieve the interaction with the browser for real-time display of tags.

[0175] Data interaction process: It includes the optimization and collaborative working mechanism of the data processing, transmission and display processes involved in the whole system, as well as details such as data conversion and error handling that may be involved in this process.

[0176] In summary, this solution implements a method for real-time playing of RTSP video streams in a browser with strong compatibility, low cost, high real-time performance and easy development and maintenance.

[0177] Embodiment 4

[0178] Figure 4 is a schematic structural diagram of a device for playing RTSP video stream data by a browser client provided in Embodiment 4 of this application. The device is configured in a background server, such as Figure 4 shown, the device includes:

[0179] A configuration information acquisition module 410, configured to acquire the configuration information of the camera from the front-end configuration interface through a preset interface;

[0180] A stream pulling module 420, configured to pull an RTSP video stream from the camera according to the configuration information;

[0181] A processing module 430, configured to capture the RTSP video stream frame by frame and obtain compressed data by using an inter-frame compression technology;

[0182] The encoding conversion module 440 is used to perform Base64 encoding conversion on the compressed data to obtain encoded data in the form of a picture.

[0183] The pushing module 450 is used to push the encoded data to a video playing device for dynamically displaying the encoded data through the browser client of the video playing device.

[0184] This device can execute the method for playing RTSP video stream data by a browser client provided in each of the above embodiments, and has corresponding functional units and beneficial effects, which will not be elaborated here.

[0185] Embodiment 5

[0186] Figure 5 FIG. is a schematic structural diagram of a device for playing RTSP video stream data by a browser client provided in Embodiment 5 of the present application. The device is configured in a video playing device, such as Figure 5 shown, the device includes:

[0187] The encoded data receiving module 510 is used to receive the encoded data of the RTSP video stream pushed by a background server; wherein, the encoded data is in the form of a picture obtained by the background server through Base64 encoding conversion.

[0188] The playing module 520 is used to use the browser client to dynamically update the picture by using the src attribute of the tag in HTML to realize the dynamic display of the encoded data.

[0189] This device can execute the method for playing RTSP video stream data by a browser client provided in each of the above embodiments, and has corresponding functional units and beneficial effects, which will not be elaborated here.

[0190] Embodiment 6

[0191] Those skilled in the art should understand that the embodiments of the present solution can provide methods, systems, or computer program products. Therefore, the present solution can be implemented in the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present solution can be implemented in the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk memories, CD-ROMs, optical memories, etc.) containing computer-usable program codes.

[0192] Therefore, the present application also proposes a computer-readable storage medium, on which a computer program is stored, and when the program is executed by a processor, it realizes the method described in any one of the embodiments of the present application.

[0193] This solution is described with reference to the flowcharts and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the solution. It should be understood that each flow and / or block in the flowchart and / or block diagram can be implemented by computer program instructions, as well as the combination of flows and / or blocks in the flowchart and / or block diagram. These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing devices to generate a machine, such that the instructions executed by the processor of the computer or other programmable data processing devices generate means for implementing the functions specified in one flow Figure 1 one flow or multiple flows and / or blocks Figure 1 or means for implementing the functions specified in one block or multiple blocks.

[0194] These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, such that the instructions stored in the computer-readable memory generate a manufactured article including instruction means that implement the functions specified in one flow Figure 1 one flow or multiple flows and / or blocks Figure 1 or means for implementing the functions specified in one block or multiple blocks.

[0195] These computer program instructions can also be loaded onto a computer or other programmable data processing device, such that a series of operation steps are executed on the computer or other programmable device to generate a computer-implemented process, and thus the instructions executed on the computer or other programmable device provide steps for implementing the functions specified in one flow Figure 1 one flow or multiple flows and / or blocks Figure 1 or means for implementing the functions specified in one block or multiple blocks.

[0196] Furthermore, Figure 6 is a schematic structural diagram of an electronic device provided for Embodiment 6 of this application. As Figure 6 shown, this application also proposes an electronic device (or computing device), including a processor 11, a memory 12, and a computer program stored on the memory 12 and executable on the processor 11. When the processor 11 executes the computer program, it implements the method described in any embodiment of this application.

[0197] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory. Memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. Memory is an example of a computer-readable medium. Computer-readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. According to the definition in this article, computer-readable media does not include temporary computer-readable media (transitory media), such as modulated data signals and carrier waves.

[0198] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity 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, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0199] The above is only an embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims

1. A method for a browser client to play RTSP video stream data, characterized in that, The method is executed by a background server, and the method includes: Obtaining configuration information of a camera from a front-end configuration interface through a preset interface; Pulling an RTSP video stream from the camera according to the configuration information; Performing frame-by-frame capture on the RTSP video stream, and obtaining compressed data by using an inter-frame compression technology; Performing Base64 encoding conversion on the compressed data to obtain encoded data in a picture format; Pushing the encoded data to a video playback device for dynamically displaying the encoded data through a browser client of the video playback device.

2. The method according to claim 1, wherein Pushing the encoded data to a video playback device for dynamically displaying the encoded data through a browser client of the video playback device, including: Push the encoded data to the video playback device via the WebSocket protocol, so as to dynamically update the picture by using the src attribute of the tag of HTML through the browser client of the video playback device, and realize the dynamic display of the encoded data.

3. The method according to claim 1, wherein Performing frame-by-frame capture on the RTSP video stream, including: Performing frame-by-frame capture on the RTSP video stream through a Java CV tool.

4. The method according to claim 1, wherein Obtaining configuration information of a camera from a front-end configuration interface through a preset interface, including: Obtaining configuration information of the IP address, ONVIF username, and password of the camera from the front-end configuration interface through a preset interface; Or, Obtaining configuration information of the RTSP video stream address of the camera from the front-end configuration interface through a preset interface.

5. The method according to claim 4, wherein After obtaining the configuration information of the IP address, ONVIF username, and password of the camera from the front-end configuration interface through a preset interface, the method further includes: Storing the received configuration information of the IP address, ONVIF username, and password of the camera in a database, so as to obtain the configuration information from the database when a preview request is received.

6. A method for a browser client to play RTSP video stream data, characterized in that, The method is executed by a video playback device, and the method includes: Receiving encoded data of an RTSP video stream pushed by a background server; wherein, the encoded data is in a picture format obtained by the background server through Base64 encoding conversion; Using a browser client to dynamically update images using the src attribute of the tag to achieve dynamic display of encoded data.

7. A device for playing RTSP video stream data on a browser client, characterized in that, The device is configured in the background server, and the device includes: A configuration information acquisition module, configured to obtain configuration information of a camera from a front-end configuration interface through a preset interface; A stream pulling module, configured to pull an RTSP video stream from the camera according to the configuration information; A processing module, configured to perform frame-by-frame capture on the RTSP video stream, and obtain compressed data by using an inter-frame compression technology; An encoding conversion module, configured to perform Base64 encoding conversion on the compressed data to obtain encoded data in a picture format; A pushing module, configured to push the encoded data to a video playback device for dynamically displaying the encoded data through a browser client of the video playback device.

8. A device for playing RTSP video stream data on a browser client, characterized in that, The device is configured in a video playback device, and the device includes: An encoded data receiving module, configured to receive encoded data of an RTSP video stream pushed by a background server; wherein, the encoded data is in a picture format obtained by the background server through Base64 encoding conversion; A playback module for using a browser client to dynamically update an image by using the src attribute of the tag in HTML, so as to realize the dynamic display of encoded data. tag to dynamically update the image and achieve dynamic display of the encoded data.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by a processor, it implements the method described in any one of claims 1-5 or implements the method described in claim 6.

10. An electronic device, comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the method described in any one of claims 1-5 or implements the method described in claim 6.

Images