CN112788431A - Video playing method, device, system, medium and browser based on HTML5 - Google Patents
Video playing method, device, system, medium and browser based on HTML5 Download PDFInfo
- Publication number
- CN112788431A CN112788431A CN202011552405.8A CN202011552405A CN112788431A CN 112788431 A CN112788431 A CN 112788431A CN 202011552405 A CN202011552405 A CN 202011552405A CN 112788431 A CN112788431 A CN 112788431A
- Authority
- CN
- China
- Prior art keywords
- video
- data
- image format
- video frames
- decoding
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 70
- 230000005540 biological transmission Effects 0.000 claims abstract description 49
- 238000005538 encapsulation Methods 0.000 claims abstract description 13
- 238000004806 packaging method and process Methods 0.000 claims description 22
- 238000006243 chemical reaction Methods 0.000 claims description 18
- 238000012544 monitoring process Methods 0.000 claims description 13
- 238000012806 monitoring device Methods 0.000 claims description 9
- 238000009877 rendering Methods 0.000 claims description 6
- 230000006870 function Effects 0.000 description 11
- 238000012545 processing Methods 0.000 description 9
- 238000010586 diagram Methods 0.000 description 6
- 238000004590 computer program Methods 0.000 description 5
- 230000000694 effects Effects 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 4
- 238000004891 communication Methods 0.000 description 3
- 230000007547 defect Effects 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000005070 sampling Methods 0.000 description 2
- 238000006467 substitution reaction Methods 0.000 description 2
- 238000012795 verification Methods 0.000 description 2
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 1
- 241000023320 Luma <angiosperm> Species 0.000 description 1
- 108010001267 Protein Subunits Proteins 0.000 description 1
- 230000003321 amplification Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000003139 buffering effect Effects 0.000 description 1
- 238000012937 correction Methods 0.000 description 1
- 230000004069 differentiation Effects 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 239000011159 matrix material Substances 0.000 description 1
- OSWPMRLSEDHDFF-UHFFFAOYSA-N methyl salicylate Chemical compound COC(=O)C1=CC=CC=C1O OSWPMRLSEDHDFF-UHFFFAOYSA-N 0.000 description 1
- 238000003199 nucleic acid amplification method Methods 0.000 description 1
- 230000008520 organization Effects 0.000 description 1
- 238000000926 separation method Methods 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
Images
Classifications
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs
- H04N21/4402—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/47—End-user applications
- H04N21/478—Supplemental services, e.g. displaying phone caller identification, shopping application
- H04N21/4782—Web browsing, e.g. WebTV
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
- H04N21/85—Assembly of content; Generation of multimedia applications
- H04N21/854—Content authoring
- H04N21/8543—Content authoring using a description language, e.g. Multimedia and Hypermedia information coding Expert Group [MHEG], eXtensible Markup Language [XML]
Landscapes
- Engineering & Computer Science (AREA)
- Multimedia (AREA)
- Signal Processing (AREA)
- Computer Security & Cryptography (AREA)
- Two-Way Televisions, Distribution Of Moving Picture Or The Like (AREA)
Abstract
The invention relates to the technical field of video playing, in particular to a video playing method, device, system, medium and browser based on HTML 5. The invention aims to solve the technical problem of how to realize simple and efficient playing of media data in more encoding formats on a browser supporting HTML 5. To this end, the video playing method of the present invention includes: acquiring media data in any coding format, and splitting video data from the media data to decode the video data to obtain a plurality of video frames in a first image format; carrying out custom protocol encapsulation on a plurality of video frames in a first image format, and sending a plurality of encapsulated data packets into a data transmission channel which is established with a front-end HTML5 component of a browser in advance; the front-end HTML5 component takes a plurality of packets from the data transmission channel and unpacks them to draw a plurality of video frames on the support browser frame by frame. The application can enable the browser supporting the HTML5 to realize the simple and efficient playing of the media data in more encoding formats.
Description
Technical Field
The invention relates to the technical field of video playing, in particular to a video playing method, device, system, medium and browser based on HTML 5.
Background
In a security application scene, real-time monitoring videos need to be previewed and videos need to be played back at the front end of each security system, and a browser is generally used in the industry to achieve the function. The current browser adopts an ActiveX plug-in technology to realize the playing of corresponding videos, but the ActiveX technology has very high limitation and can only be applied to a Windows IE browser, and other browsers cannot watch the videos. In addition, the ActiveX plug-in is always displayed on the topmost layer in the IE browser, so that the difficulty of design, integration and verification of the monitoring interface is very high, and the actual use effect is not ideal.
With the advent of HTML5(Hyper Text Markup Language), this situation was improved to some extent. Browsers that support the HTML5 framework can enable the playback of audio and video without relying on external plug-ins. On the other hand, in the security field, high quality and low delay are required in the video preview process, the video transmission usually adopts protocols such as GB/T28181, RTSP, factory private stream, etc., and the video encoding formats also usually include multiple formats such as H264, H265, MPEG, MJPEG, etc. The currently decodable audio and video coding formats of the browser supporting the HTML5 frame are very limited, so that the browser supporting the HTML5 frame cannot decode the audio and video of the other coding formats except for the individual coding formats, and therefore video playing cannot be realized.
Accordingly, there is a need in the art for a new video playback method based on HTML5 to solve the above problems.
Disclosure of Invention
In order to solve at least one of the above-mentioned problems in the prior art, namely, to solve the technical problem of how to implement simple and efficient playing of media data in more encoding formats on a browser supporting an HTML5 framework, in a first aspect of the present invention, there is provided a video playing method based on HTML5, the video playing method including:
acquiring media data in any coding format according to a specified transmission protocol, and splitting video data from the media data;
decoding the video data to obtain a plurality of video frames in a first image format;
carrying out custom protocol encapsulation on the video frames in the first image formats to obtain a plurality of encapsulated data packets;
sending the data packets into a data transmission channel which is established with a front-end HTML5 component of the browser in advance;
and the front-end HTML5 component acquires the data packets from the data transmission channel, unpacks the data packets, and draws the unpacked video frames in the first image format on a webpage in a browser frame by frame.
In the above preferred technical solution of the video playing method based on HTML5, the step of "decoding the video data to obtain a plurality of video frames in the first image format" further includes:
when the video data can be directly decoded into the video frames of the first image format, directly decoding the video data to obtain a plurality of video frames of the first image format;
when the video data cannot be directly decoded into the video frames of the first image format, the video data is decoded to obtain a plurality of video frames of a second image format, and then the video frames of the second image format are subjected to format conversion to obtain a plurality of video frames of the first image format.
In a preferred embodiment of the above-mentioned video playing method based on HTML5, the step of "decoding the video data" further includes:
firstly, decoding the video data by adopting a GPU;
when the GPU is adopted for decoding successfully, outputting a plurality of decoded video frames;
and when the decoding by the GPU is unsuccessful, decoding the video data by the CPU and obtaining a plurality of decoded video frames.
In the above preferred embodiment of the video playing method based on HTML5, the step of "encapsulating the plurality of video frames in the first image format with the custom protocol" further includes:
and packaging the video frames of the plurality of first image formats by adopting a binary format in combination with the time stamps and the video width information.
In the above preferred technical solution of the video playing method based on HTML5, the step of "drawing the unpacked video frames in the first image format on the web page in the browser frame by frame" further includes:
and calling a WebGL interface, and rendering a plurality of video frames in the first image format obtained after unpacking on a canvas of a webpage in the browser frame by frame.
In a preferred technical solution of the above video playing method based on HTML5, the first image format is YUV420 format; the second image format is a YUV format or an RGB format.
In a second aspect of the present invention, there is provided a video playback apparatus based on HTML5, the video playback apparatus including:
the data unpacking module is used for acquiring media data in any coding format according to a specified transmission protocol and splitting video data from the media data;
a decoding module for decoding the video data to obtain a plurality of video frames in a first image format;
the packaging module is used for packaging the video frames in the first image formats by a user-defined protocol to obtain a plurality of packaged data packets, and sending the data packets to a data transmission channel which is established in advance with a front-end HTML5 component of the browser;
and the HTML5 component is used for establishing the data transmission channel, acquiring the plurality of data packets from the data transmission channel, unpacking the data packets, and drawing the unpacked video frames in the first image format on a webpage in a browser frame by frame.
In the above preferred technical solution of the video playing apparatus based on HTML5, the video playing apparatus further includes a conversion module, and the decoding module and the conversion module decode the video data to obtain a plurality of video frames in the first image format by:
when the video data can be directly decoded into the video frames of the first image format, the decoding module directly decodes the video data to obtain the video frames of the plurality of first image formats;
when the video data cannot be directly decoded into the video frames in the first image format, the decoding module first decodes the video data to obtain a plurality of video frames in the second image format, and then the conversion module performs format conversion on the plurality of video frames in the second image format to obtain a plurality of video frames in the first image format.
In the above preferred technical solution of the video playing apparatus based on HTML5, the decoding module decodes the video data by:
firstly, decoding the video data by adopting a GPU;
when the GPU is adopted for decoding successfully, outputting a plurality of decoded video frames;
and when the decoding by the GPU is unsuccessful, decoding the video data by the CPU and obtaining a plurality of decoded video frames.
In the above preferred technical solution of the video playing apparatus based on HTML5, the encapsulating module encapsulates the plurality of video frames in the first image format by the following steps:
and packaging the video frames of the plurality of first image formats by adopting a binary format in combination with the time stamps and the video width information.
In the above preferred technical solution of the video playing apparatus based on HTML5, the video playing module draws the unpacked video frames in the first image format on the web page in the browser frame by the following means:
and calling a WebGL interface, and rendering a plurality of video frames in the first image format obtained after unpacking on a canvas of a webpage in the browser frame by frame.
In a preferred embodiment of the above video playing apparatus based on HTML5, the first image format is YUV420 format; the second image format is a YUV format or an RGB format.
In a third aspect of the present invention, there is provided a video playback apparatus based on HTML5, the video playback apparatus includes a processor and a memory, the memory is adapted to store a plurality of program codes, the program codes are adapted to be loaded and executed by the processor to execute the video playback method based on HTML5 according to any of the above-mentioned preferred technical solutions; or a computer readable storage medium, in which a plurality of program codes are stored, wherein the program codes are adapted to be loaded and executed by a processor to execute the video playing method based on HTML5 according to any of the above preferred embodiments.
In a fourth aspect of the present invention, there is provided a video playback system based on HTML5, the video playback system including: monitoring equipment, a server and the video playing device based on the HTML5 in any one of the above preferred technical solutions; the monitoring device is configured to collect media data near a target area and send the collection results to the server; the server is configured to encode and package the media data and then send the media data to the video playing device.
In a fifth aspect of the present invention, a browser is provided, where the browser includes the video playing method based on HTML5 described in any of the above preferred technical solutions; or a browser device, wherein the browser device includes the video playing device based on HTML5 described in any of the above preferred technical solutions.
One or more technical schemes of the invention at least have one or more of the following beneficial effects:
according to the technical scheme of video playing based on HTML5, media data in different coding formats are decoded outside a browser in advance to obtain video frames in a first image format supported by the browser, then a plurality of video frames are subjected to custom protocol packaging and sent to a data transmission channel established with an HTML5 component at the front end of the browser, and finally, an HTML5 component is used for obtaining a packaged data packet from the data transmission channel and unpacking the data packet and then directly drawing the data packet on a webpage of the browser, so that the browser supporting an HTML5 frame can play the media data in different coding formats after being decoded in advance under the condition that a plug-in is not required to be additionally installed for decoding, and the technical problem of how to realize simple and efficient playing of the media data in more coding formats on the browser supporting the HTML5 frame is solved. And because the processes of video streaming, decoding, packaging and the like are independent of the browser, the technical scheme of the application can be very conveniently integrated in a client machine provided with the browser supporting the HTML5 framework, not only is compatible with various transmission protocols and coding formats, but also supports cross-platform application, and covers most of the video playing requirements in the current security industry. In addition, by carrying out custom protocol encapsulation on the video frame, the defect that compatible processing is required by adopting common protocol encapsulation is avoided, the data transmission efficiency can be improved, and simple and efficient playing is realized.
Furthermore, by adopting GPU decoding and using CPU decoding when the decoding is unsuccessful, the method can realize dynamic switching of hardware decoding/software decoding, fully utilizes the client to decode and display the video, and has very high transcoding performance.
Further, the video frame in the first image format is encapsulated by adopting the binary format, so that the video data is prevented from being compatible with other common protocols when being transmitted in the program, and the transmission efficiency is high. And the binary format is adopted for packaging and unpacking, so that the packaging and unpacking speed of the data packet is greatly improved, the high-quality preview of the video is realized, the delay can be reduced, and the media data can be simply and efficiently played.
Drawings
The HTML 5-based video playback method, apparatus, system, medium, and browser of the present invention are described below with reference to the accompanying drawings. In the drawings:
FIG. 1 is a main flow chart of one embodiment of the video playing method based on HTML5 of the present invention;
FIG. 2 is a logic diagram of one embodiment of a video playback method based on HTML5 in accordance with the present invention;
FIG. 3 is a block diagram of an embodiment of a video playback device based on HTML 5;
fig. 4 is a block diagram of an embodiment of a video playback system based on HTML5 according to the present invention.
Detailed Description
For the purpose of facilitating understanding of the present invention, the present invention will be described more fully and in detail below with reference to the accompanying drawings and examples, but it will be understood by those skilled in the art that these embodiments are merely illustrative of the technical principles of the present invention and are not intended to limit the scope of the present invention.
In the description of the present invention, a "module" or "processor" may include hardware, software, or a combination of both. A module may comprise hardware circuitry, various suitable sensors, communication ports, memory, may comprise software components such as program code, or may be a combination of software and hardware. The processor may be a central processing unit, microprocessor, image processor, digital signal processor, or any other suitable processor. The processor has data and/or signal processing functionality. The processor may be implemented in software, hardware, or a combination thereof. Non-transitory computer readable storage media include any suitable medium that can store program code, such as magnetic disks, hard disks, optical disks, flash memory, read-only memory, random-access memory, and the like. The term "a and/or B" denotes all possible combinations of a and B, such as a alone, B alone or a and B. The term "at least one A or B" or "at least one of A and B" means similar to "A and/or B" and may include only A, only B, or both A and B. The singular forms "a", "an" and "the" may include the plural forms as well.
As described in the background, in application scenarios such as security monitoring, real-time monitoring video needs to be previewed and video playback video needs to be recorded at the front end of each security system, and a browser is generally used in the industry to implement this function. However, the current browser adopting the ActiveX plug-in has great selection limitation on the browser, only supports the Windows IE browser, and the ActiveX plug-in also causes the integrated verification work of the monitoring section design to be very large. Although the browser supporting the HTML5 frame has a wider selection range and can play audio and video without depending on an external plug-in, the browser supporting the HTML5 frame has limited video coding and audio coding formats which can be decoded, and cannot meet the audio and video playing requirements of various coding formats in the security industry.
The method comprises the steps of decoding media data in different coding formats outside a browser in advance to obtain video frames in a first image format supported by the browser, then packaging a plurality of video frames by a self-defined protocol, sending the video frames into a data transmission channel established with a front-end HTML5 component of the browser, finally obtaining a packaged data packet from the data transmission channel by using an HTML5 component, unpacking the data packet, and drawing the data packet frame by frame on a webpage 539 page in the browser supporting an HTML5 frame, so that the browser supporting the HTML 2 frame can simply and efficiently play the decoded media data without additionally installing a plug-in. And because the processes of fetching, decoding, transcoding and the like of the video are independent of the browser, the technical scheme of the application can be very conveniently integrated in a client provided with the browser supporting the HTML5 framework, not only is compatible with various transmission protocols and coding formats, but also supports cross-platform application, and covers most of the video playing requirements in the current security industry. In addition, by carrying out custom protocol encapsulation on the video frame, the defect that compatible processing is required by adopting common protocol encapsulation is avoided, the data transmission efficiency can be improved, and simple and efficient playing is realized.
The video playback method based on HTML5 of the present invention will be described in detail with reference to fig. 1 and 2. FIG. 1 is a main flowchart of an embodiment of a video playing method based on HTML5 according to the present invention; fig. 2 is a logic diagram of an embodiment of the video playing method based on HTML5 of the present invention.
As shown in fig. 1, to solve the technical problem of how to enable a browser using an HTML5 framework to support more video encoding formats, the video playing method based on HTML5 of the present application mainly includes the following steps:
s101, media data in any coding format is obtained according to a specified transmission protocol, and video data are split from the media data.
In a possible implementation manner, the encoded media data may be video data or audio/video data, and the data is acquired by a monitoring device of the security system and transmitted to the client through a specified transmission protocol. The monitoring equipment can be a Network Video Recorder (NVR), a monitoring camera and the like, the client can be a desktop computer, a mobile phone, a tablet computer and the like of a user, the monitoring equipment is connected with the client through a server, the monitoring equipment uploads collected media data of a monitoring area to the server, and the server codes the media data and then sends the coded media data to the client through a specified streaming media transmission protocol for the client to decode and play. A plurality of application programs are installed in the client, including a browser supporting an HTML5 framework, a decoding program in which a plurality of decoders can be preset, and an HTML5 component, and the plurality of decoders can be used for performing decoding processing on video data encoded in different types of codec formats. The HTML5 component can be written based on Shader, and the program is embedded in a browser supporting an HTML5 framework after writing, so that the video frame after decoding processing of the decoding program is drawn on the browser for playing. The streaming media transport protocol may be GB/T28181, RTSP, or other proprietary protocols of the manufacturer, and the like, which is not limited in this application. For the video coding and decoding supported by the server and the decoder, there are many algorithms and standards, and there are h.264 and h.265 video coding and decoding standards of the international telecommunications union, M-JPEG video coding and decoding standards proposed by the moving still image experts group, and MPEG series video coding and decoding standards proposed by the international organization for standardization moving picture experts group, etc. which are commonly used, the present application does not specifically limit this. Of course, in other embodiments, the functions of the server may be integrated into the monitoring device, and the monitoring device may be directly connected to the client.
In one embodiment, the format of an original image shot by a monitoring camera is a YUV image format, a server encodes received media data in the YUV image format and sends the encoded media data to a decoding program of a client through a specified streaming media transmission protocol RTSP, and after receiving the encoded media data, the decoding program firstly checks the media data and splits video data from the media data. The checking process mainly checks the correctness of the received media data according to the streaming media protocol, and discards the received data if the received data is incorrect or incomplete. The splitting process mainly judges whether the video data is the video data according to the data type in the streaming media protocol, and if the video data is the video data, the video data is put into a video decoding queue to wait for decoding.
S103, decoding the video data to obtain a plurality of video frames in the first image format.
In one possible implementation, after the video data is placed in the video decoding queue, a decoder corresponding to the encoding format of the video data in the decoding program performs a decoding operation on the video data, and obtains a plurality of video frames in the first image format. And putting the decoded video frames in the first image format into a packaging and sending queue to wait for packaging and sending.
In one possible implementation, the first image format may be a YUV420 format. The YUV420 format is a sampling mode of the YUV image format. The YUV image format has three sampling modes, which are YUV444, YUV422 and YUV420, respectively, wherein YUV444 is YUV in the general sense. In YUV, "Y" represents brightness (Luma) i.e. a gray scale value; and "U" and "V" represent Chroma (Chroma or Chroma). YUV is a color coding method adopted by european television systems, and is a color space adopted by PAL and SECAM analog color television systems. In modern color television systems, a three-tube color camera or a color CCD camera is usually used for image capture, then the obtained color image signals are subjected to color separation and respective amplification and correction to obtain RGB, and then a luminance signal Y and two color difference signals B-Y (i.e., U) and R-Y (i.e., V) are obtained through a matrix conversion circuit, and finally a transmitting end respectively encodes the luminance signal and the color difference signals and transmits the encoded signals through the same channel. This color representation is called YUV color space representation. The importance of using the YUV color space is that its luminance signal Y and chrominance signal U, V are separate. Of course, in addition to YUV420 format, other image formats may be used by those skilled in the art, such as YUV422 format, RGB format, and the like.
In a preferred embodiment, the decoding process can be performed by dynamically switching between hardware decoding and software decoding. Specifically, the GPU is preferentially adopted to decode the video data (i.e., hardware decoding); when the GPU is adopted for decoding successfully, outputting a plurality of decoded video frames; and when the decoding by the GPU is unsuccessful, decoding the video data by the CPU (namely software decoding), and obtaining a plurality of decoded video frames. It should be noted that, it is determined whether the GPU can decode the video data, and it can be determined usually when the GPU obtains the video data, and if there is a situation of hardware incompatibility, that is, the GPU cannot decode the video data in the current encoding format, the GPU may give feedback information that cannot be decoded, and at this time, the CPU is used to decode the video data. The gpu (graphic Processing unit) is a graphics processor on the client, and the cpu (central Processing unit) is a central Processing unit on the client. Since the compatibility of GPU decoding is not strong enough, there is a possibility that decoding cannot be performed. At the moment, the decoding program internally judges that if the GPU decoding is unsuccessful, the CPU decoding is automatically converted and used.
In a possible implementation manner, the step S103 further includes: when the video data can be directly decoded into video frames of a first image format, directly decoding the video data to obtain a plurality of video frames of the first image format; when the video data cannot be directly decoded into the video frames of the first image format, the video data is firstly decoded to obtain a plurality of video frames of the second image format, and then the plurality of video frames of the second image format are subjected to format conversion to obtain a plurality of video frames of the first image format.
When a GPU is capable of decoding the encoding format of the current video data, not all GPUs are capable of decoding the video data into the first image format (i.e., YUV420 format) at once. However, when the CPU is used to decode video data, the video data can be directly decoded into the first image format. Therefore, in the decoding process, if the GPU can decode the video data into the first image format at one time, it is sufficient to directly decode the video data into the first image format; otherwise, if the GPU cannot decode the video data into the first image format at one time, the video data may be decoded first to obtain a plurality of second image formats, and then the second image formats are converted into the first image formats.
For example, in one possible embodiment, the second image format is a raw image format of video data, i.e., YUV format, but may be RGB format in other embodiments. When the GPU cannot decode the video data into YUV420 at one time, the GPU may decode the video data into the original image format (such as YUV format, etc.), and at this time, only one format conversion is performed on the original image format to convert into the first image format.
For example, in one possible implementation, an encoder is further provided in the decoding program, and after the decoding program decodes the video data by the decoder to obtain a plurality of video frames in the second image format, the encoder encodes the plurality of video frames in the second image format to obtain a plurality of video frames in the first image format. For example, the encoder completes encoding a video frame in YUV format into a video frame of YUV420 through a libyuv library. The libyuv library is a cross-platform library which is derived from Google and used for scaling, rotating and converting YUV data, and can be compiled and run on operating systems such as Windows, Linux, Mac, Android and the like and x86, x64 and arm architectures.
And S105, carrying out custom protocol encapsulation on the video frames in the first image format to obtain a plurality of encapsulated data packets.
In one possible implementation, each video frame in YUV420 format may be encapsulated in binary format into multiple data packets. Specifically, each of the plurality of decoded video frames in the first image format may be encapsulated into a data packet along with information such as video width, video debugging, and timestamp in a set order. The set sequence is not limited in this application, and for example, the video frame and one or more of the timestamp, the video width, and the video debug are encapsulated as a data packet in an arbitrary sequence. Of course, in addition to binary formats, those skilled in the art may also use other custom protocols to encapsulate video frames, such as octal, hexadecimal, thirty-binary, etc.
S107, sending the plurality of data packets into a data transmission channel which is established in advance with a front-end HTML5 component of the browser.
In one possible implementation, when loading video, the HTML5 component connects ports of the decoding program through the Web Socket protocol, so as to establish a data transmission channel, and during the use of the HTML5 component, the connection is kept as a data transmission channel at two ends. The Web Socket protocol is a protocol for full duplex communication over a single TCP connection. The Web Socket communication protocol was specified by IETF as standard RFC 6455 in 2011 and is supplemented by RFC 7936.
After the plurality of video frames are packaged into the data packets one by one, the plurality of data packets are sent to the established data transmission channel so that the HTML5 component can be loaded.
S109, acquiring a plurality of data packets from the data transmission channel, unpacking the data packets, and drawing the unpacked video frames in the first image format on a webpage in the browser frame by frame.
In one possible implementation, after sending the encapsulated packets to the data transmission channel, the HTML5 component obtains the packets from the data transmission channel and unpacks them, wherein the unpacking sequence is the same as the sequence of the video frame encapsulation. The unpacked plurality of videos in the first image format are rendered on a canvas of a webpage of a browser that supports an HTML5 framework. Among other things, the canvas, which may also be referred to as a canvas, has width and height attributes that describe the size of the display area occupied in the page of the web page. When the video frame in the second image format is drawn on the canvas of the webpage in the browser frame by frame, the effect of playing the video frame can be realized, so that the video data can be normally viewed in the webpage.
In one possible embodiment, the video frame may be drawn on the canvas of the webpage by software or hardware. The drawing speed of drawing the video frame on the canvas of the webpage page in a hardware mode is higher. The HTML5 component may invoke the webGL interface to render the video frame in the second image format for display on the browser's canvas. WebGL (Web Graphics library) is a 3D drawing protocol, the drawing technical standard allows JavaScript and OpenGL ES 2.0 to be combined together, and by adding one JavaScript binding of OpenGL ES 2.0, WebGL can provide hardware 3D accelerated rendering for HTML5 Canvas.
In a possible implementation, the video playing method further includes: splitting audio data from the media data; decoding the audio data; playing the decoded audio data; wherein the decoding process of the audio data is independent of the browser.
After the decoding program receives the coded media data, apart from splitting the video data from the media data, if the media data also comprises audio data, the decoding program checks the media data and judges whether the media data is the audio data according to the data type in the streaming media protocol, and if the media data is the audio data, the decoding program puts the audio data into an audio decoding queue to wait for decoding. The decoding program is also provided with a decoder for audio in advance, and after the audio data are placed in the audio decoding queue, the decoder corresponding to the coding format of the audio data in the decoding program performs decoding operation on the audio data to obtain a plurality of audio frames in the first audio format. And placing the decoded audio frames in the first audio format into an audio play queue to wait for playing.
In one possible implementation, the first audio format may be a PCM (Pulse code modulation) raw audio format. During playing, the decoded audio frame can be played by calling the default audio output equipment of the system, and the playing smoothness, the synchronization with the video frame and the like can be controlled before the audio is played. Among them, the smoothness and synchronization method of audio and video are conventional technical means in the field, and only briefly described here: the audio or video of each frame carries a time stamp during encoding, one clock is simulated in a program to be used as a master clock, the master clock is stepped according to normal time, the master clock is used as a synchronous reference in the playing process, and the time stamps of the decoded audio and video data are respectively simulated into two slave clocks of the audio and video. And then judging the difference between the slave clock and the master clock, and adjusting the two slave clocks based on the difference to enable the two slave clocks to catch up (lag time) or wait (advance time) with the master clock, and playing the audio/video frame when the difference between the corresponding time stamps of the slave clocks and the corresponding time stamps of the master clock is smaller.
According to the technical scheme of video playing based on HTML5, media data in different coding formats are decoded outside a browser in advance to obtain video frames in a first image format supported by the browser, then a plurality of video frames are subjected to custom protocol packaging and sent to a data transmission channel, then an HTML5 component is used for obtaining a data packet from the data transmission channel and drawing the video frames in the first image format on the browser supporting an HTML5 frame by frame after unpacking, so that the browser supporting the HTML5 frame can play the decoded media data without additionally installing plug-ins. And because the processes of fetching, decoding, transcoding and the like of the video are independent of the browser, the technical scheme of the application can be very conveniently integrated in a client provided with the browser supporting an HTML5 frame, so that cross-platform application can be realized, operating systems such as mainstream Windows, Linux, Mac, Android and the like are supported, various transmission protocols and encoding formats are compatible, most audio and video encoding formats in the industry are covered, and most video playing requirements in the security industry at present are met.
Furthermore, the splitting, decoding and playing processes of the audio are independent of the browser, so that the video playing method can support various audio coding formats, and the application range of the video playing method is expanded.
Furthermore, by adopting GPU decoding and using CPU decoding when the decoding is unsuccessful, the method can also realize dynamic switching of hardware decoding/software decoding, fully utilizes a client to decode and display the video, and has very high transcoding performance.
Further, the video frame in the second image format is encapsulated by adopting the binary format, so that the video data is prevented from being compatible with other common protocols when being transmitted in the program, and the transmission efficiency is high. And the binary format is adopted for packaging and unpacking, so that the packaging and unpacking speed of the data packet is greatly improved, the high-quality preview of the video is realized, the delay can be reduced, and the media data can be simply and efficiently played.
It should be noted that although the foregoing embodiments describe each step as being in the foregoing sequence, those skilled in the art will understand that, in order to achieve the effect of the present embodiments, different steps need not be executed in such sequence, and they may be executed simultaneously (in parallel) or in reverse sequence, and these simple changes are all within the scope of the present invention. For example, the step of the HTML5 component establishing the data transmission channel may be performed at the beginning of the method, or may be performed at any time before the first image format is encapsulated into the data packet according to the custom protocol.
A brief description of one possible implementation of the present application is provided below in conjunction with fig. 2.
As shown in fig. 2, in one possible implementation flow, when a video shot by a security device needs to be previewed:
(1) firstly, executing step S201, connecting the HTML5 component with a port of a decoding program through a Web Socket protocol so as to establish a data transmission channel;
(2) step S203 is executed next, the decoding program obtains the encoded media data from the server according to the RTSP transport protocol, verifies the media data, splits the audio data and the video data, and sends the split audio data and video data to the audio decoding queue and the video decoding queue respectively for buffering and waiting for decoding.
(3) Step S205 is executed next, the audio data is decoded into PCM original audio format by using a decoder, and put into an audio player of the queue to be played notification system to play the audio data;
(4) steps S209 to S213 are performed while step S205 is performed, specifically:
step S209, decoding the video data into a plurality of video frames in YUV original image format by the GPU, and putting the decoded video frames into a conversion sending queue;
step S211, converting the video frame of the decoded YUV original image format into a video frame of a YUV420 image format through a libyuv library;
step S213, packaging the YUV420 format video frame together with information such as timestamp, video width, video debugging and the like into a data packet according to the sequence by adopting a binary format, and then sending the data packet to a data transmission channel;
(5) step S207 and step S215 are performed next, while audio playback and video playback are performed, specifically:
step S207, playing the decoded audio data through a system default audio playing device, and controlling playing smoothness, synchronizing with video frames, and the like before audio playing.
Step S215, the HTML5 component obtains the data packet from the data channel and unpacks the data packet to obtain a plurality of YUV420 format video frames, the video frames in YUV420 format are automatically converted and rendered by using WebGL technology, and finally the picture of the image is displayed in the canvas of the browser supporting the HTML5 frame.
The video playback apparatus based on HTML5 of the present application will be described with reference to fig. 3. Fig. 3 is a block diagram of an embodiment of a video playback device based on HTML5 of the present invention.
As shown in fig. 3, the HTML 5-based video playback apparatus of the present application mainly includes a data unpacking module 11, a decoding module 12, a packaging module 14, and an HTML5 component 15. The data unpacking module 11 is configured to obtain media data in any encoding format according to a specified transmission protocol, and split video data from the media data; the decoding module 12 is configured to decode the video data to obtain a plurality of video frames in a first image format; the encapsulation module 14 is configured to perform custom protocol encapsulation on a plurality of video frames in a first image format to obtain a plurality of encapsulated data packets, and send the plurality of data packets to a data transmission channel established in advance with a front-end HTML5 component of the browser; the HTML5 component 15 is configured to establish a data transmission channel, obtain a plurality of data packets from the data transmission channel, unpack the data packets, and draw the unpacked video frames in the first image format frame by frame on a web page in a browser supporting the HTML5 frame. In one embodiment, the detailed description of the implementation function may be referred to in steps S101 to S109.
In one embodiment, the video playing apparatus further comprises a conversion module, and the decoding module and the conversion module decode the video data to obtain a plurality of video frames in the first image format by: when the video data can be directly decoded into video frames of a first image format, the decoding module directly decodes the video data to obtain a plurality of video frames of the first image format; when the video data cannot be directly decoded into the video frames in the first image format, the decoding module firstly decodes the video data to obtain a plurality of video frames in the second image format, and then the conversion module performs format conversion on the plurality of video frames in the second image format to obtain a plurality of video frames in the first image format. The description of the specific implementation function may refer to the description of step S103.
In one embodiment, the data unpacking module 11 is further configured to split audio data from the media data; the decoding module 12 is further configured to decode the audio data; the video playback apparatus further includes: the audio playing module is used for playing the decoded audio data; wherein the decoding process of the audio data is independent of the browser. The specific implementation function can be described in paragraphs [0088] through [0090] of the present application.
In one embodiment, decoding module 12 decodes the video data to obtain a plurality of video frames by: firstly, decoding video data by adopting a GPU; when the GPU is adopted for decoding successfully, outputting a plurality of decoded video frames; and when the GPU is adopted to decode unsuccessfully, the CPU is adopted to decode the video data and obtain a plurality of decoded video frames. The description of the specific implementation function may refer to step S103.
In one embodiment, encapsulation module 14 custom protocol encapsulates the plurality of video frames in the first image format by: and packaging a plurality of video frames in the first image format by adopting a binary format. The description of the specific implementation function may refer to step S105.
In one embodiment, the HTML5 component 15 draws the unpacked plurality of video frames in the first image format on a frame-by-frame basis on a canvas of a webpage in a browser by: and calling a WebGL interface, and rendering a plurality of video frames in the first image format obtained after unpacking on a canvas of a webpage in a browser frame by frame. The description of the specific implementation function may refer to step S109.
In one embodiment, the first image format is YUV420 format; the second image format is YUV or RGB format. The detailed description may refer to step S103.
The above-mentioned video playing apparatus based on HTML5 is used to execute the embodiment of the video playing method based on HTML5 shown in fig. 2, and the technical principles, solved technical problems and generated technical effects of the two are similar, and it can be clearly understood by those skilled in the art that, for convenience and brevity of description, the specific working process and related descriptions of the video playing apparatus based on HTML5 may refer to the contents described in the embodiment of the video playing method based on HTML5, and are not repeated here.
It should be noted that the video playing apparatus provided in the foregoing embodiment is illustrated by only dividing the above functional modules (such as the data decapsulating module 11, the decoding module 12, the converting module 13, the encapsulating module 14, the HTML5 component 15, and the like), and in practical applications, the functional units may be completed by different functional units according to needs, that is, the functional units in the embodiment of the present invention are further decomposed or combined, for example, the functional units in the embodiment may be combined into one functional unit, or may be further split into multiple sub-units, so as to complete all or part of the functions described above. The names of the functional units related to the embodiments of the present invention are only for differentiation and are not to be construed as an improper limitation of the present invention.
The video playback system based on HTML5 of the present application will be described with reference to fig. 4. Fig. 4 is a block diagram of an embodiment of a video playing system based on HTML5 according to the present invention.
As shown in fig. 4, the video playback system based on HTML5 of the present application includes a monitoring device 2, a server 3, and a video playback apparatus 1 based on HTML 5. The monitoring device 2 is configured to collect media data near a target area and send the collected result to the server 3, the server 3 is configured to encode and package the media data and send the encoded and packaged media data to the video playing apparatus 1, and the video playing apparatus 1 is configured to be capable of performing audio and video data splitting, decoding, converting, packaging and audio and video playing on the encoded and packaged media data. Wherein, the monitoring device 2 includes but is not limited to an image collector, such as: a camera, an infrared camera, a laser camera, a visible light camera, etc. The monitoring device 2 collects one or more videos of the monitored environment for transmission to the server 3. These image collectors are conventional image collecting devices in the field of image collecting technology, and for brevity of description, specific working principles of these image collecting devices are not described herein again.
It will be understood by those skilled in the art that all or part of the flow of the method according to the above-described embodiment may be implemented by a computer program, which may be stored in a computer-readable storage medium and used to implement the steps of the above-described embodiments of the method when the computer program is executed by a processor. Wherein the computer program comprises computer program code, which may be in the form of source code, object code, an executable file or some intermediate form, etc. The computer-readable medium may include: any entity or device capable of carrying said computer program code, media, usb disk, removable hard disk, magnetic diskette, optical disk, computer memory, read-only memory, random access memory, electrical carrier wave signals, telecommunication signals, software distribution media, etc. It should be noted that the computer readable medium may contain content that is subject to appropriate increase or decrease as required by legislation and patent practice in jurisdictions, for example, in some jurisdictions, computer readable media does not include electrical carrier signals and telecommunications signals as is required by legislation and patent practice.
The various component embodiments of the invention may be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. Those skilled in the art will appreciate that a microprocessor or Digital Signal Processor (DSP) may be used in practice to implement some or all of the functions of some or all of the components in a server, client, or the like, according to embodiments of the present invention. The present invention may also be embodied as an apparatus or device program (e.g., PC program and PC program product) for carrying out a portion or all of the methods described herein. Such a program implementing the invention may be stored on a PC readable medium or may be in the form of one or more signals. Such a signal may be downloaded from an internet website or provided on a carrier signal or in any other form.
The invention also provides a computer readable storage medium. In one computer-readable storage medium embodiment according to the present invention, the computer-readable storage medium may be configured to store program code for executing the HTML 5-based video playing method of the above-described method embodiment, which may be loaded and executed by a processor to implement the HTML 5-based video playing method described above. For convenience of explanation, only the parts related to the embodiments of the present invention are shown, and details of the specific techniques are not disclosed. The computer readable storage medium may be a storage device formed by including various electronic devices, and optionally, the computer readable storage medium is a non-transitory computer readable storage medium in the embodiment of the present invention.
The invention also provides a video playing device based on the HTML 5. In an embodiment according to the present invention, the HTML 5-based video playback device includes a processor and a memory, the memory may be configured to store program code for executing the HTML 5-based video playback method of the above-described method embodiment, and the processor may be configured to execute the program code in the memory, the program code including, but not limited to, the program code for executing the HTML 5-based video playback method of the above-described method embodiment. For convenience of explanation, only the parts related to the embodiments of the present invention are shown, and details of the specific techniques are not disclosed. The HTML 5-based video playback apparatus may be an apparatus device formed including various electronic devices.
The application also provides a browser which supports an HTML5 framework and comprises the video playing method based on the HTML5 of the embodiment, or a browser device which comprises the video playing device based on the HTML5 of the embodiment. In one possible embodiment, the Browser of the present application may be, but is not limited to, Windows IE, Chrome, Firefox, Safari, Edge Browser.
It should be understood that, since the configuration of each module is only for explaining the functional unit of the system of the present invention, the corresponding physical devices of the modules may be the processor itself, or a part of software, a part of hardware, or a part of a combination of software and hardware in the processor. Thus, the number of individual modules in the figures is merely illustrative.
Those skilled in the art will appreciate that the various modules in the system may be adaptively split or combined. Such splitting or combining of specific modules does not cause the technical solutions to deviate from the principle of the present invention, and therefore, the technical solutions after splitting or combining will fall within the protection scope of the present invention.
So far, the technical solutions of the present invention have been described in connection with the preferred embodiments shown in the drawings, but it is easily understood by those skilled in the art that the scope of the present invention is obviously not limited to these specific embodiments. Equivalent changes or substitutions of related technical features can be made by those skilled in the art without departing from the principle of the invention, and the technical scheme after the changes or substitutions can fall into the protection scope of the invention.
Claims (15)
1. A video playing method based on HTML5, wherein the video playing method comprises:
acquiring media data in any coding format according to a specified transmission protocol, and splitting video data from the media data;
decoding the video data to obtain a plurality of video frames in a first image format;
carrying out custom protocol encapsulation on the video frames in the first image formats to obtain a plurality of encapsulated data packets;
sending the data packets into a data transmission channel which is established with a front-end HTML5 component of the browser in advance;
and the front-end HTML5 component acquires the data packets from the data transmission channel, unpacks the data packets, and draws the unpacked video frames in the first image format on a webpage in a browser frame by frame.
2. The HTML 5-based video playing method according to claim 1, wherein the step of decoding the video data to obtain a plurality of video frames in the first image format further comprises:
when the video data can be directly decoded into the video frames of the first image format, directly decoding the video data to obtain a plurality of video frames of the first image format;
when the video data cannot be directly decoded into the video frames of the first image format, the video data is decoded to obtain a plurality of video frames of a second image format, and then the video frames of the second image format are subjected to format conversion to obtain a plurality of video frames of the first image format.
3. The HTML 5-based video playback method according to claim 1, wherein the step of "decoding the video data" further comprises:
firstly, decoding the video data by adopting a GPU;
when the GPU is adopted for decoding successfully, outputting a plurality of decoded video frames;
and when the GPU cannot be used for decoding, the CPU is used for decoding the video data and obtaining a plurality of decoded video frames.
4. The HTML 5-based video playback method according to claim 1, wherein the step of "custom protocol encapsulating the plurality of video frames in the first image format" further comprises:
and packaging the video frames of the plurality of first image formats by adopting a binary format in combination with the time stamps and the video width information.
5. The HTML 5-based video playing method according to claim 1, wherein the step of drawing the unpacked video frames in the first image format on a web page in a browser frame by frame further comprises:
and calling a WebGL interface, and rendering a plurality of video frames in the first image format obtained after unpacking on a canvas of a webpage in the browser frame by frame.
6. The HTML 5-based video playback method according to claim 1, wherein the first image format is YUV420 format; the second image format is a YUV format or an RGB format.
7. An HTML 5-based video playback apparatus, comprising:
the data unpacking module is used for acquiring media data in any coding format according to a specified transmission protocol and splitting video data from the media data;
a decoding module for decoding the video data to obtain a plurality of video frames in a first image format;
the packaging module is used for packaging the video frames in the first image formats by a user-defined protocol to obtain a plurality of packaged data packets, and sending the data packets to a data transmission channel which is established in advance with a front-end HTML5 component of the browser;
and the HTML5 component is used for establishing the data transmission channel, acquiring the plurality of data packets from the data transmission channel, unpacking the data packets, and drawing the unpacked video frames in the first image format on a webpage in a browser frame by frame.
8. The HTML 5-based video playback device of claim 7, wherein the video playback device further comprises a conversion module, and wherein the decoding module and the conversion module decode the video data to obtain a plurality of video frames in the first image format by:
when the video data can be directly decoded into the video frames of the first image format, the decoding module directly decodes the video data to obtain the video frames of the plurality of first image formats;
when the video data cannot be directly decoded into the video frames in the first image format, the decoding module first decodes the video data to obtain a plurality of video frames in the second image format, and then the conversion module performs format conversion on the plurality of video frames in the second image format to obtain a plurality of video frames in the first image format.
9. The HTML 5-based video playback device according to claim 7, wherein the decoding module decodes the video data by:
firstly, decoding the video data by adopting a GPU;
when the GPU is adopted for decoding successfully, outputting a plurality of decoded video frames;
and when the decoding by the GPU is unsuccessful, decoding the video data by the CPU and obtaining a plurality of decoded video frames.
10. The HTML 5-based video playback device of claim 7, wherein the encapsulation module custom protocol encapsulates the plurality of video frames in the first image format by:
and packaging the video frames of the plurality of first image formats by adopting a binary format in combination with the time stamps and the video width information.
11. The HTML 5-based video playback device according to claim 7, wherein the video playback module draws the unpacked video frames in the first image format on a web page in a browser frame-by-frame basis by:
and calling a WebGL interface, and rendering a plurality of video frames in the first image format obtained after unpacking on a canvas of a webpage in the browser frame by frame.
12. The HTML 5-based video playback device according to claim 7, wherein the first image format is YUV420 format; the second image format is a YUV format or an RGB format.
13. An HTML 5-based video playback apparatus comprising a processor and a memory, the memory adapted to store a plurality of program codes, wherein the program codes are adapted to be loaded and run by the processor to perform the HTML 5-based video playback method of any one of claims 1 to 6;
alternatively, the first and second electrodes may be,
a computer readable storage medium having stored therein a plurality of program codes, characterized in that the program codes are adapted to be loaded and executed by a processor to perform the video playback method based on HTML5 as claimed in any one of claims 1 to 6.
14. An HTML 5-based video playback system, the video playback system comprising:
monitoring equipment, a server and the HTML 5-based video playback apparatus of any one of claims 7-13;
the monitoring device is configured to collect media data near a target area and send the collection results to the server;
the server is configured to encode and package the media data and then send the media data to the video playing device.
15. A browser, characterized in that the browser includes the HTML 5-based video playback method according to any one of claims 1 to 6;
alternatively, the first and second electrodes may be,
a browser means, characterized in that it comprises a video playback means based on HTML5 as claimed in any one of claims 7 to 13.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011552405.8A CN112788431A (en) | 2020-12-24 | 2020-12-24 | Video playing method, device, system, medium and browser based on HTML5 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011552405.8A CN112788431A (en) | 2020-12-24 | 2020-12-24 | Video playing method, device, system, medium and browser based on HTML5 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112788431A true CN112788431A (en) | 2021-05-11 |
Family
ID=75752197
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011552405.8A Pending CN112788431A (en) | 2020-12-24 | 2020-12-24 | Video playing method, device, system, medium and browser based on HTML5 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112788431A (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113271479A (en) * | 2021-05-17 | 2021-08-17 | 中移智行网络科技有限公司 | Playing processing method, device and related equipment |
| CN113824715A (en) * | 2021-09-18 | 2021-12-21 | 京东方科技集团股份有限公司 | Real-time video stream playing method and device |
| CN114339382A (en) * | 2021-12-24 | 2022-04-12 | 深圳市商汤科技有限公司 | Video playing method, device, equipment and computer storage medium |
| CN115883658A (en) * | 2022-12-07 | 2023-03-31 | 长安大学 | Cross-platform image information transmission method, system, equipment and readable storage medium |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103260021A (en) * | 2012-02-21 | 2013-08-21 | 腾讯科技（深圳）有限公司 | Method and device for decoding videos |
| CN103748612A (en) * | 2011-01-24 | 2014-04-23 | 英特尔公司 | Method and system for acquisition, representation, compression, and transmission of three-dimensional data |
| CN106506525A (en) * | 2016-11-29 | 2017-03-15 | 北京旷视科技有限公司 | For playing the method and device of video flowing on a web browser |
| CN107995187A (en) * | 2017-11-30 | 2018-05-04 | 上海哔哩哔哩科技有限公司 | Video main broadcaster, live broadcasting method, terminal and system based on HTML5 browsers |
| CN108769616A (en) * | 2018-06-21 | 2018-11-06 | 泰华智慧产业集团股份有限公司 | A kind of real-time video based on RTSP agreements is without plug-in unit method for previewing and system |
| CN109196865A (en) * | 2017-03-27 | 2019-01-11 | 华为技术有限公司 | A kind of data processing method and terminal |
| CN109889907A (en) * | 2019-04-08 | 2019-06-14 | 北京东方国信科技股份有限公司 | A kind of display methods and device of the video OSD based on HTML5 |
| CN110557670A (en) * | 2019-09-17 | 2019-12-10 | 广州华多网络科技有限公司 | Method, device, terminal and storage medium for playing video in webpage |
| CN112073809A (en) * | 2020-08-09 | 2020-12-11 | 富盛科技股份有限公司 | Method for supporting browser to play video with any coding format |
-
2020
- 2020-12-24 CN CN202011552405.8A patent/CN112788431A/en active Pending
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103748612A (en) * | 2011-01-24 | 2014-04-23 | 英特尔公司 | Method and system for acquisition, representation, compression, and transmission of three-dimensional data |
| CN103260021A (en) * | 2012-02-21 | 2013-08-21 | 腾讯科技（深圳）有限公司 | Method and device for decoding videos |
| CN106506525A (en) * | 2016-11-29 | 2017-03-15 | 北京旷视科技有限公司 | For playing the method and device of video flowing on a web browser |
| CN109196865A (en) * | 2017-03-27 | 2019-01-11 | 华为技术有限公司 | A kind of data processing method and terminal |
| CN107995187A (en) * | 2017-11-30 | 2018-05-04 | 上海哔哩哔哩科技有限公司 | Video main broadcaster, live broadcasting method, terminal and system based on HTML5 browsers |
| CN108769616A (en) * | 2018-06-21 | 2018-11-06 | 泰华智慧产业集团股份有限公司 | A kind of real-time video based on RTSP agreements is without plug-in unit method for previewing and system |
| CN109889907A (en) * | 2019-04-08 | 2019-06-14 | 北京东方国信科技股份有限公司 | A kind of display methods and device of the video OSD based on HTML5 |
| CN110557670A (en) * | 2019-09-17 | 2019-12-10 | 广州华多网络科技有限公司 | Method, device, terminal and storage medium for playing video in webpage |
| CN112073809A (en) * | 2020-08-09 | 2020-12-11 | 富盛科技股份有限公司 | Method for supporting browser to play video with any coding format |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113271479A (en) * | 2021-05-17 | 2021-08-17 | 中移智行网络科技有限公司 | Playing processing method, device and related equipment |
| CN113824715A (en) * | 2021-09-18 | 2021-12-21 | 京东方科技集团股份有限公司 | Real-time video stream playing method and device |
| CN113824715B (en) * | 2021-09-18 | 2023-08-22 | 京东方科技集团股份有限公司 | Method and device for playing real-time video stream |
| CN114339382A (en) * | 2021-12-24 | 2022-04-12 | 深圳市商汤科技有限公司 | Video playing method, device, equipment and computer storage medium |
| CN115883658A (en) * | 2022-12-07 | 2023-03-31 | 长安大学 | Cross-platform image information transmission method, system, equipment and readable storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112788431A (en) | Video playing method, device, system, medium and browser based on HTML5 | |
| JP6338688B2 (en) | Video synchronized playback method, apparatus, and system | |
| CN102301730B (en) | Method, device and system for transmitting and processing multichannel AV | |
| TWI707309B (en) | Method, system and storage medium for processing image file | |
| CN114339382A (en) | Video playing method, device, equipment and computer storage medium | |
| CN112073810B (en) | Multi-layout cloud conference recording method and system and readable storage medium | |
| EP3888375A1 (en) | Method, device, and computer program for encapsulating media data into a media file | |
| CN112073809A (en) | Method for supporting browser to play video with any coding format | |
| CN113938470A (en) | Method and device for playing RTSP data source by browser and streaming media server | |
| CN108966006A (en) | Playback method, browser equipment and the readable storage medium storing program for executing of video | |
| CN110602522A (en) | Multi-path real-time live webRTC stream synthesis method | |
| CN1534503A (en) | Method of realizing real time image sound talks in network game, system and storage medium thereof | |
| CN110996122B (en) | Video frame transmission method, device, computer equipment and storage medium | |
| US9936266B2 (en) | Video encoding method and apparatus | |
| CN112954433B (en) | Video processing method, device, electronic equipment and storage medium | |
| US20240080487A1 (en) | Method, apparatus for processing media data, computer device and storage medium | |
| CN113132686A (en) | Local area network video monitoring implementation method based on domestic linux system | |
| CN111406404B (en) | Compression method, decompression method, system and storage medium for obtaining video file | |
| US20230025664A1 (en) | Data processing method and apparatus for immersive media, and computer-readable storage medium | |
| CN111010593A (en) | Method and device for packaging H.265 video data based on FLV format | |
| JP5808485B2 (en) | Mobile terminal recording method, related apparatus and system | |
| CN108124183B (en) | Method for synchronously acquiring video and audio to perform one-to-many video and audio streaming | |
| CN112565799B (en) | Video data processing method and device | |
| WO2013149522A1 (en) | Encoding method and decoding method of frame field information, encoder and decoder | |
| CN114079823A (en) | Video rendering method, device, equipment and medium based on Flutter |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210511 |
|
| RJ01 | Rejection of invention patent application after publication |