H.265 video playing system

By designing the H.265 video playback system, using the FFMPEG hard decoding interface to decode the H.265 video stream into YUV video stream, and combining WebGL and Canvas for rendering, the problem that the browser is not compatible with the H.265 video format is solved, and efficient and real-time video playback and rich user interaction experience are achieved.

CN222621086UActive Publication Date: 2025-03-14HANGZHOU EBOYLAMP ELECTRONICS CO LTD
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202421192771.0
Authority / Receiving Office
CN · China
Patent Type
Utility models(China)
Current Assignee / Owner
Filing Date
2024-05-29
Publication Date
2025-03-14
Estimated Expiration
2034-05-29

AI Technical Summary

Technical Problem

Existing browsers are not compatible with H.265 format videos, resulting in the inability to directly play videos in H.265 format.

Method used

A H.265 video playback system is designed, including the main control module, the player module and the B/S client. The player module decodes the H.265 video stream through the hard decoding interface of FFMPEG to obtain the YUV video stream. The B/S client is responsible for video rendering and conducts two-way communication through WebSocket to realize real-time video streaming transmission.

Benefits of technology

By converting the H.265 video encoding format to YUV data and combining WebGL and Canvas for real-time rendering, the problem that the browser is not compatible with the H.265 video format is solved, and the real-time video playback and user interaction experience are improved.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN222621086U_ABST
    Figure CN222621086U_ABST
Patent Text Reader

Abstract

The utility model discloses an H.265 video playing system, which comprises a master control module, a player module and a B / S (Browser / Server) client, the player module is used for receiving an H.265 video stream after a playing task is started, and decoding the H.265 video stream to obtain a YUV video stream; the B / S client is respectively connected with the main control module and the player module, and is used for receiving the YUV video stream and performing video rendering after a playing task is started; and the main control module is used for processing data interaction between a foreground and a background. The video playing system disclosed by the utility model can solve the technical problem that the browser cannot be directly compatible with the H.265 format video.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The utility model belongs to the field of video playback, and specifically relates to an H.265 video playback system. Background Art

[0002] With the continuous development of audio and video technology, the H.265 video encoding standard has appeared on the market. As the latest video compression encoding, the encoding efficiency is greatly improved compared to H.264. For the same file size, H.265 has the best video quality; for the same video quality, H.265 has the smallest size.

[0003] In the existing technology, browsers can play H.264 videos in real time by using the video (video playback) and audio (audio playback) tags in HTML5, but currently H.265 format videos cannot be played directly by browsers. Therefore, it is urgent to solve the problem that browsers are not compatible with H.265 format videos. Utility Model Content

[0004] In view of the above problems existing in the prior art, the utility model proposes an H.265 video playback system to solve the technical problem that the browser is not compatible with H.265 format videos.

[0005] The utility model adopts the following technical solutions:

[0006] An H.265 video playback system includes a main control module, a player module, and a B / S client;

[0007] The player module is used to receive the H.265 video stream after the playback task starts, and decode the H.265 video stream to obtain a YUV video stream;

[0008] The B / S client is connected to the main control module and the player module respectively, and is used to receive the YUV video stream and perform video rendering after the playback task starts;

[0009] The main control module is used to process the data interaction between the foreground and the background.

[0010] Preferably, the player module includes a video decoding module, and the video decoding module is used to decode the H.265 video stream through the hard decoding interface of FFMPEG to obtain a YUV video stream.

[0011] Preferably, the B / S client includes a Canvas video rendering module, and the Canvas video rendering module is used to perform video rendering on the YUV video stream.

[0012] Preferably, the B / S client and the player module transmit the YUV video stream via a websocket long connection.

[0013] Preferably, the B / S client is further used to notify the main control module to reserve resources.

[0014] Preferably, the B / S client further includes a cache module, and the cache module is used to cache the YUV video stream.

[0015] Preferably, the Canvas video rendering module is used to perform video rendering on the YUV video stream, including:

[0016] The Canvas video rendering module obtains video data from the cache module according to the number of frames of video playback to perform video rendering.

[0017] Preferably, the frame rate is 25fps~30fps.

[0018] Preferably, the resource is a hardware resource of the platform, and the hardware resource includes one or more of a CPU, a memory, and a disk space.

[0019] The beneficial effects of the utility model are:

[0020] (1) The utility model solves the problem that the browser is not compatible with the H.265 video format by converting the H.265 video encoding format into YUV data by the player and combining WebGL and Canvas to perform real-time rendering of the data;

[0021] (2) The utility model uses WebSocket for two-way communication, which can realize real-time video streaming transmission. Compared with traditional HTTP requests, the real-time performance is significantly improved;

[0022] (3) Powerful graphics processing capabilities can be achieved through WebGL and Canvas. For example, by writing custom shaders, highly customized rendering of videos can be achieved, and graphics processing and tagging of videos can be performed, providing a richer user interaction experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] In order to more clearly illustrate the embodiments of the utility model or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the utility model. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0024] Figure 1It is a structural schematic diagram of the H.265 video playback system provided by the utility model;

[0025] Figure 2 It is a structural schematic diagram of an H.265 video playback system provided by another embodiment of the present invention. DETAILED DESCRIPTION

[0026] The following describes the implementation of the present invention through specific embodiments, and those skilled in the art can easily understand other advantages and effects of the present invention from the contents disclosed in this specification. The present invention can also be implemented or applied through other different specific implementations, and the details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present invention. It should be noted that the following embodiments and features in the embodiments can be combined with each other without conflict.

[0027] H.265, also known as the High Efficiency Video Coding (HEVC) encoding format, is a new standard launched 10 years after the current H.264 standard was standardized in 2003. It will become the video compression technology that supports video services and products in the next decade. Its characteristics are that it supports 4K×2K and 8K×4K resolutions above 1080p, and increases the video compression rate to about twice that of H.264. In other words, the same quality video can be sent at half the original encoding speed. For example, H.264 format video content sent at 20Mbit / second can be transmitted at only 10Mbit / second using the HEVC format under the same quality conditions.

[0028] However, due to the high licensing fees of the H.265 encoding format, current mainstream browsers (chrome, Firefox, IE, edge, etc.) do not support direct software decoding of H.265 format video files. In view of this, the utility model proposes an H.265 video playback system to solve the problem that the browser cannot directly be compatible with H.265 encoding format videos.

[0029] like Figure 1 As shown, the utility model provides an H.265 video playback system, including a main control module, a player module, and a B / S client;

[0030] The player module is used to receive the H.265 video stream after the playback task starts, and decode the H.265 video stream to obtain a YUV video stream;

[0031] The B / S client is connected to the main control module and the player module respectively, and is used to receive the YUV video stream and perform video rendering after the playback task starts;

[0032] The main control module is used to process the data interaction between the foreground and the background.

[0033] Preferably, the player module includes a video decoding module, and the video decoding module is used to decode the H.265 video stream through the hard decoding interface of ffmpeg to obtain a YUV video stream.

[0034] Preferably, the B / S client includes a Canvas video rendering module, and the Canvas video rendering module is used to perform video rendering on the YUV video stream.

[0035] Preferably, the B / S client and the player module transmit the YUV video stream via a websocket long connection.

[0036] Preferably, the B / S client is further used to notify the main control module to reserve resources.

[0037] Preferably, the B / S client further includes a cache module, and the cache module is used to cache the YUV video stream.

[0038] Preferably, the Canvas video rendering module is used to perform video rendering on the YUV video stream, including:

[0039] The Canvas video rendering module obtains video data from the cache module according to the number of frames of video playback to perform video rendering.

[0040] Preferably, the frame rate is 25fps~30fps.

[0041] Preferably, the resource is a hardware resource of the platform, and the hardware resource includes one or more of a CPU, a memory, and a disk space.

[0042] In the embodiment of the utility model, the user first needs to download the FFMPEG decoder through the network. FFmpeg can call the decoding capability of the graphics card to realize the decoding of audio and video. It mainly includes 8 libraries: avcodec (code), avformat (encapsulation format processing), avfilter (filter special effects processing), avdevice (input and output of various devices), avutil (tool library), postproc (post-processing), swresample (audio sampling data format conversion), swscale (video pixel data format conversion). After downloading and completing the configuration of environment variables, the FFMPEG decoder can be used to realize the format conversion of audio and video in the operating system; then configure the H.265 video data source address and related playback parameters on the H.265 video playback system.

[0043] Figure 2 It is a structural diagram of the H.265 video playback system provided by another embodiment of the utility model. After completing the configuration of the above-mentioned playback environment, the user sends a start playback instruction to the player module through the play button on the B / S client. The player module composes an RTSP address according to the channel number, bitstream type and video data source address and requests an H.265 format video stream from the video data source address; after obtaining the H.265 format video stream, the player module calls the local FFMPEG decoder to decode and transcode the video stream, and converts the H.265 format video stream into a YUV format video stream.

[0044] After the B / S client successfully sends the start video command to the player, it creates a WebSocket long connection and shakes hands with the player to continuously obtain YUV video data. In order to optimize the video playback effect, the video data received by WebSocket is not drawn immediately, but is placed in the cache area. The drawing tool obtains the video data from the cache area according to the number of frames played by the video, and then draws the video data on the playback interface through the drawing tool.

[0045] The above-mentioned drawing action is mainly performed through the drawing tool Canvas. Canvas API (canvas) is a new tag in HTML5 that is used to generate images in real time on web pages and can operate image content. Canvas provides rich extension functions. Developers can achieve more advanced graphics effects through custom drawing algorithms and rendering engines. At the same time, Canvas also supports seamless integration with other Web technologies, so developers can achieve highly customized rendering of videos by writing custom shaders. During the video rendering process, the video is processed with graphics and marked, etc., providing a richer user interaction experience. In the embodiment of the utility model, Canvas will traverse and assign the received video data to a pre-set canvas area according to the number of frames played by the video, that is, the browser will process the video data as true color, simulating the film effect to display real-time video.

[0046] The frame rate of video playback refers to the number of image frames transmitted per second. The frame rate should not be set too high or too low. Too low a frame rate can easily cause video playback to freeze, while too high a frame rate can easily cause a surge in video data volume, which will bring a large processing burden to the network bandwidth and processor. In the embodiment of the utility model, the frame rate of video playback is set to 25fpg~30fps.

[0047] The main control module includes a FT2000-4 self-controllable domestic embedded processor to run related executable files and driver software. In the embodiment of the utility model, the main control module is mainly responsible for completing the data exchange between the front and back ends. At the same time, when the user sends a start-play instruction to the player module through the play button on the B / S client, the play instruction will also be sent to the main control module synchronously to notify the main control module to reserve hardware resources for video playback. The above hardware resources include one or more of CPU, memory and disk space.

[0048] The embodiments described above are merely descriptions of preferred implementation modes of the present invention, and are not intended to limit the scope of the present invention. Without departing from the design spirit of the present invention, various modifications and improvements made to the technical solutions of the present invention by ordinary technicians in this field should fall within the protection scope of the present invention.

Claims

1. An H.265 video playback system, characterized in that: Including main control module, player module, B / S client; The player module is used to receive the H.265 video stream after the playback task starts, and decode the H.265 video stream to obtain a YUV video stream; The B / S client is connected to the main control module and the player module respectively, and is used to receive the YUV video stream and perform video rendering after the playback task starts; The main control module is used to process the data interaction between the foreground and the background.

2. The H.265 video playback system according to claim 1, characterized in that: The player module includes a video decoding module, which is used to decode the H.265 video stream through the hard decoding interface of FFMPEG to obtain a YUV video stream.

3. The H.265 video playback system according to claim 1, characterized in that: The B / S client includes a Canvas video rendering module, and the Canvas video rendering module is used to perform video rendering on the YUV video stream.

4. The H.265 video playback system according to claim 1, characterized in that: The B / S client and the player module transmit the YUV video stream via a websocket long connection.

5. The H.265 video playback system according to claim 1, characterized in that: The B / S client is also used to notify the main control module to reserve resources.

6. The H.265 video playback system according to claim 3, characterized in that: The B / S client further includes a cache module, and the cache module is used to cache the YUV video stream.

7. The H.265 video playback system according to claim 6, characterized in that: The Canvas video rendering module is used to perform video rendering on the YUV video stream, including: The Canvas video rendering module obtains video data from the cache module according to the number of frames of video playback to perform video rendering.

8. The H.265 video playback system according to claim 7, characterized in that: The frame rate is 25fps~30fps.

9. The H.265 video playback system according to claim 5, characterized in that: The resource is a hardware resource of the platform, and the hardware resource includes one or more of a CPU, a memory, and a disk space.