Plug-in-free webpage video preview method

Abstract

The invention relates to the field of video playing, in particular to a plug-in-free webpage video previewing method. According to the method, firstly, a websocket protocol is adopted as a control protocol and a pull stream protocol, when the websocket protocol is adopted as the control protocol, a control instruction is packaged into a specified format, then a main control server A with a fixed port is created based on libwebsocket, a first channel video stream server B is created to monitor the validity of a pull stream client handle, a WebSocket client is created at a webpage end to be connected with the server, and the pull stream client handle is connected with the WebSocket client. And after the client and the server are connected, video transmission is started. According to the method and the device, the video equipment can perform video preview on the browser without depending on a plug-in or streaming media service, so that the dependence of browser video preview on a traditional plug-in is relieved, and the real-time performance of webpage video preview is improved.

Description

Technical Field

[0001] The invention relates to the field of video playback, in particular to a plug-in-free web page video preview method. Background Art

[0002] Streaming media services are becoming increasingly popular, and streaming media technology is widely used in online live broadcasting, e-commerce, video on demand, real-time video, etc. Although streaming media is currently widely used, in the embedded field, the performance of the device is far less powerful than that of a complete system, so a small Web server is generally deployed, and the video preview of the web page is mainly based on ActiveX controls. Although ActiveX controls are stable, they are only suitable for IE browsers that support flash plug-ins. Websocket is a protocol for full-duplex communication on a single TCP connection. It makes data exchange between the client and the server simpler, allowing the server to actively push data to the client. In the WebSocket API, the browser and the server only need to complete a handshake, and a persistent connection can be directly created between the two, and two-way data transmission can be performed. The method of the present invention is based on WebSocket to complete the technical design. Summary of the invention

[0003] The technical problem to be solved by the present invention is to provide a plug-in-free web page video preview method, so that the video device can perform video preview in the browser without relying on plug-ins or streaming media services, eliminate the dependence of browser video preview on traditional plug-ins, and improve the real-time performance of web page video preview.

[0004] In order to solve the technical problem, the technical solution adopted by the present invention is: a plug-in-free web page video preview method, comprising the following steps: S01. Protocol customization. Websocket protocol is used as the control protocol and streaming protocol. When used as the control protocol, the control instructions are encapsulated into the websocket format, including request instructions and reply instructions. Both request instructions and reply instructions include instruction type and instruction content. The instruction type defines the direction of this communication. The instruction content is determined by the instruction type. The instruction content includes the client ID and operation code. The client ID is unique. A unique ID is generated when the client is created. All subsequent communications carry the client ID to help the server distinguish different clients when multiple clients access at the same time. S02. Build a server on the monitoring device, create a main control server A with a fixed port based on libwebsockets, the main control server A is used to control the number of users and analyze the communication protocol instructions, assign different client requests to the designated server for processing, and complete the client's keep-alive monitoring, create a channel-video stream server B to monitor the validity of the stream client handle, determine whether the client joins or leaves the video queue, and start or stop transmitting the video stream; create a stream handle management thread D on the server side, monitor the video queue in thread D, and then control server B to transmit the video stream; S03. Create a WebSocket client to connect to the server on the web page. Each channel has two WebSocket clients, a protocol communication client 1 and a client 2 for processing the video stream of channel 1. Configure the HTML page Tag, used to update the video data received by client 2 in real time.

[0005] Furthermore, the process of implementing video preview based on the client and server is as follows: S11, client 1 initiates a connection request to server A; S12. After step S11 succeeds, client 1 sends a login protocol to server A, and the login protocol carries the unique ID of the client; S13, server A parses the communication protocol sent by client I, confirms that the instruction is a login, then traverses and compares the ID in the user queue, and allows the connection after confirming that the ID is not repeated. At the same time, the ID is saved in the user queue as a credential for subsequent judgment. Otherwise, the connection is disconnected, and then an operation code is returned to the client; S14, client 1 parses the response of the server in the previous step, and if the login is successful, sends a channel-1 streaming protocol; S15, server A receives the streaming protocol, then encapsulates the address port of server B into the communication protocol, and replies to client 1; S16, client 1 parses the URL in the reply packet and creates a new Websocket client 2 according to the URL; at this time, client 2 initiates a connection request to server B, and at the same time, client 2 opens the data callback interface, and unpacks and plays the video data when it arrives; S17, after receiving the request from client 2, server B adds the handle of client 2 to the Video queue. When thread D determines that the Video queue has a client, it sends video data to the client. S18, after receiving the video data, the callback function of client 2 converts the original video data into Blob data, and then stores the Blob data in the HTML page. Video preview is realized when the tag is loaded.

[0006] Furthermore, the original video data is in jpeg format.

[0007] Furthermore, the control instructions include starting and stopping the video, keeping the client alive, and reconnecting.

[0008] Furthermore, the monitoring device has two channels, and a channel two video stream server C is provided to monitor the validity of the stream pulling client handle.

[0009] Furthermore, the server is connected to multiple clients.

[0010] Beneficial effects of the present invention: The present invention sets up the server on the device side. When the user opens the device webpage, the server will directly push the stream to the user's browser after receiving the pull stream request. The user does not need to download and install plug-ins, which is convenient to use. Therefore, there is no need to create a streaming media service on the user's computer for secondary transcoding, and one less video processing process, so it has high real-time performance, low overhead, and supports major mainstream browsers. This solution does not use conventional H264 or H265 encoding when encoding on the device front end, but JPEG encoding, and the browser can directly use The tag displays JPEG data, so it does not rely on plugins. The tag can directly display JPEG data, so there is no need to do any decoding processing on the web page, saving client resources. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] Figure 1 Processing flow chart for the server side; Figure 2 Processing flow chart for the client. DETAILED DESCRIPTION

[0012] The present invention will be further described below in conjunction with the accompanying drawings and specific embodiments.

[0013] Example 1 This embodiment discloses a plug-in-free web page video preview method, including: 1. Protocol customization, using websocket protocol as control protocol and streaming protocol. When used as control protocol, control instructions are encapsulated into websocket format, including request instructions and reply instructions. Both request instructions and reply instructions include instruction type and instruction content. The instruction type defines the direction of this communication. The instruction content is determined by the instruction type. The instruction content includes client ID and operation code. The client ID is unique. A unique ID is generated when the client is created. All subsequent communications carry the client ID to help the server distinguish different clients when multiple clients access at the same time. Control instructions include video start and stop control, client keep alive, and reconnect.

[0014] 2. Build a server on the monitoring device. There are many WebSocket communication libraries, including uWebSockets, libwebsockets, websocketpp, Beast, etc. Libwebsockets has the advantages of small size, high performance, and good flexibility. It is implemented in pure C and has good portability, which is very suitable for the development of embedded systems. Therefore, this method builds a server based on libwebsockets.

[0015] Based on libwebsockets, create a main control server A with a fixed port. Main control server A is used to control the number of users and analyze the communication protocol instructions, assign different client requests to the designated server for processing, and complete the client's keep-alive monitoring. Create channel one video stream server B and channel two video stream server C to monitor the validity of the stream client handle, determine whether the client joins or leaves the video queue, and start or stop transmitting the video stream. In order to improve the quality of the video when multiple users are previewing at the same time, create a stream handle management thread D on the server side, monitor the video queue in thread D, and then control servers B and C to transmit the video stream.

[0016] In this embodiment, the significance of creating server A based on websocket is: 1. Ensuring the fluency of the video; because the video stream and communication control are carried out simultaneously in this scheme, if there is only one websocket server, the transmission of the video stream cannot be guaranteed when the client communicates and interacts with the server. Therefore, in order to ensure the simultaneous execution of the control protocol and the video stream, this scheme chooses to create a dedicated control server A separately. 2. Convenient processing; because the video stream is binary data and occupies a large amount of network resources, and the control protocol is in a string format, using different servers to process the two is not only convenient for management, but also can reduce the network pressure of the video stream server to a certain extent. 3. The server chooses the websocket protocol instead of the http protocol commonly used on the web page because the http protocol is one-way, and is not as flexible as websocket in terms of video control protocol interaction or keep-alive interaction. This also reflects the real-time and bidirectional nature of the websocket protocol.

[0017] 3. Create a WebSocket client to connect to the server on the web page. Each channel has two WebSocket clients, protocol communication client 1, client 3, client 2 for processing channel 1 video stream, and client 4 for processing channel 2 video stream. Configure two on the HTML page. Tag, used to update the video data received by client 2 and client 4 in real time.

[0018] When implementing this method, first deploy the four threads A, B, C, and D of the server, create Websocket services in threads A, B, and C respectively (hereinafter collectively referred to as servers A, B, and C), and wait for the client to connect; in thread D, loop to determine the client connection status, and send video data when there is a client connection. The HTML web page needs to write two Tags to display the video. Figure 1 , 2 As shown, when a user visits a web page, the web page displays the video stream according to the following steps.

[0019] S11, client 1 initiates a connection request to server A; S12. After step S11 succeeds, client 1 sends a login protocol to server A, and the login protocol carries the unique ID of the client; S13, server A parses the communication protocol sent by client I, confirms that the instruction is a login, then traverses and compares the ID in the user queue, and allows the connection after confirming that the ID is not repeated. At the same time, the ID is saved in the user queue as a credential for subsequent judgment. Otherwise, the connection is disconnected, and then an operation code is returned to the client; S14, client 1 parses the response of the server in the previous step, and if the login is successful, sends a channel-1 streaming protocol; S15, server A receives the streaming protocol, then encapsulates the address port of server B into the communication protocol, and replies to client 1; S16, client 1 parses the URL in the reply packet and creates a new Websocket client 2 according to the URL; at this time, client 2 initiates a connection request to server B, and at the same time, client 2 opens the data callback interface, and unpacks and plays the video data when it arrives; S17, after receiving the request from client 2, server B adds the handle of client 2 to the Video queue. When thread D determines that the Video queue has a client, it sends video data to the client. S18, after receiving the video data, the callback function of client 2 converts the original video data into Blob data, and then stores the Blob data in the HTML page. Video preview is realized when the tag is loaded.

[0020] The above description is only the basic principle and preferred embodiments of the present invention. Improvements and substitutions made by those skilled in the art based on the present invention belong to the protection scope of the present invention.

Claims

1. A method for previewing a webpage video without a plug-in, characterized in that: The following steps are involved: S01. Protocol customization. Websocket protocol is used as the control protocol and streaming protocol. When used as the control protocol, the control instructions are encapsulated into a specified format, including request instructions and reply instructions. Both request instructions and reply instructions include instruction type and instruction content. The instruction type defines the direction of this communication. The instruction content is determined by the instruction type. The instruction content includes the client ID and operation code. The client ID is unique. A unique ID is generated when the client is created. All subsequent communications carry the client ID to help the server distinguish different clients when multiple clients access at the same time. S02. Build a server on the monitoring device, and create a main control server A with a fixed port based on libwebsockets. The main control server A is used to control the number of users and analyze the communication protocol instructions, assign different client requests to the designated server for processing, and complete the client's keep-alive monitoring. Create a channel-1 video stream server B to monitor the validity of the stream client handle, determine whether the client joins or leaves the video queue, and start or stop transmitting the video stream; Create a stream handle management thread D on the server side, monitor the video queue in thread D, and then control server B to transmit the video stream; S03. Create a WebSocket client to connect to the server on the web page. Each channel has two WebSocket clients, a protocol communication client 1 and a client 2 for processing the video stream of channel 1. Configure the HTML page Tag, used to update the video data received by client 2 in real time.

2. The plug-in-free web page video preview method according to claim 1, characterized in that: The process of implementing video preview based on the client and server is as follows: S11, client 1 initiates a connection request to server A; S12. After step S11 succeeds, client 1 sends a login protocol to server A, and the login protocol carries the unique ID of the client; S13, server A parses the communication protocol sent by client I, confirms that the instruction is a login, then traverses and compares the ID in the user queue, and allows the connection after confirming that the ID is not repeated. At the same time, the ID is saved in the user queue as a credential for subsequent judgment. Otherwise, the connection is disconnected, and then an operation code is returned to the client; S14, client 1 parses the response of the server in the previous step, and if the login is successful, sends a channel-1 streaming protocol; S15, server A receives the streaming protocol, then encapsulates the address port of server B into the communication protocol, and replies to client 1; S16, client 1 parses the URL in the reply packet and creates a new Websocket client 2 according to the URL; at this time, client 2 initiates a connection request to server B, and at the same time, client 2 opens the data callback interface, and unpacks and plays the video data when it arrives; S17, after receiving the request from client 2, server B adds the handle of client 2 to the Video queue. When thread D determines that the Video queue has a client, it sends video data to the client. S18, after receiving the video data, the callback function of client 2 converts the original video data into Blob data, and then stores the Blob data in the HTML page. Video preview is realized when the tag is loaded.

3. The plug-in-free web page video preview method according to claim 1, characterized in that: Control instructions include video start and stop control, client keep alive and reconnect.

4. The plug-in-free web page video preview method according to claim 1, characterized in that: The monitoring device has two channels, and a channel two video stream server C is provided to monitor the validity of the stream pulling client handle.

5. The plug-in-free web page video preview method according to claim 1, characterized in that: The server connects to multiple clients.

Images