H5 live broadcast implementation scheme

This article is in the process of project practice referred to a lot of bigwigs’ articles, plus their own practice.

Broadcast protocol

There are several common live broadcast protocols in China: RTMP, HLS and HTTP-FLV.

RTMP

RTMP, for Real Time Messaging Protocol, is based on TCP. A set of live video protocols developed by Macromedia, now owned by Adobe, that can be used for pull and push streams. Based on the TCP. The basic data unit in the protocol is called a Message, which is divided into smaller Chunk units during transmission. Finally, the segmented message block is transmitted through TCP protocol, and the receiving end decomparts the received message block to restore the streaming media data

Method of use

Use the videoJS plugin, because videoJS removes flash compatibility, and use VideoJs-Flash

Advantage:

• The delay is low in 1-3s

Disadvantage:

• Use Flash for playback, which is now disabled by default by major browser manufacturers

• TCP is a non-public port that may be blocked by the firewall

HLS

HLS (HTTP Live Streaming) is an HTTP-based Streaming media communication protocol implemented by Apple. It can only be used to pull streams. It has good compatibility on mobile terminals and is a mainstream Streaming solution on mobile terminals.

HLS works simply by breaking up a video stream into small http-based files for download. When the media stream is playing, the client can easily switch between different bit rate streams according to the current network environment to achieve a better viewing experience.

Method of use

Play directly with labels

For better compatibility, you can also use videoJS, but you need to introduce an additional plug-in, VideoJS-HTTP-Streaming

The video format pulled by HLS protocol is.m3U8 (it cannot be opened directly by the browser, you can download the tool VLC to play it). The following figure shows a file of m3U8 being played in the browser. After the browser gets the file of M3U8, it will download another file of. The browser will download the TS file, or video slice, from the playlist of the file (this address can be copied directly to the browser to open) and play the TS file in order. When the TS file of a Playlist is finished, the browser will download the M3U8 file, fetch a new Playlist, and repeat.

The playlist for this M3U8 file is shown on the right.

One of the reasons for the high latency of HLS is that it is necessary to generate slices to push data. If each TS is shelled at 5 seconds and 6 TS indexes are placed on one M3U8, there will be a delay of at least 30 seconds. If you reduce the length of each TS and the number of indexes in M3U8, the latency does decrease, but it leads to more frequent buffering, and the request pressure on the server multiplies. So you have to find a middle ground.

A small problem with the project

In the project, the address of M3U8 is obtained by the front end requesting the back end through the interface, and our back end also needs to pull the flow from the manufacturer. There is a problem, the back end may push the address to us, but the TS file has not been generated, that is, there is no playlist, at this time, the video will play errors. The address of m3U8 can be reassigned to the SRC property of video via the onError event listener.

advantage

• Use the H5 tag to play

• Penetrate the firewall. HTTP/80 based transmission, effectively avoiding firewall interception

• High performance. It can be transmitted through HTTP and supports network distribution. CDN has good support and has its own multi-bit rate self-adaptation. Apple has already considered the problem of code stream self-adaptation when it proposed HLS

disadvantage

• The delay of HLS is more than 10s+

• A lot of TS files will be downloaded

HTTP-FLV

Flash Video (FLV) is another Video format (file suffix) developed by Adobe. FLV is a container format for storing streaming media data transmitted over the network. HttpFlv is HTTP + FLV, encapsulating audio and video data into FLV format and transmitting it to clients over HTTP.

Method of use

This plugin relies on Media Source Extensions, which have poor compatibility on IOS but are fully supported on ipadOS13 and above (keep an eye on this).

advantage

• Low latency

• It is based on HTTP and can penetrate the firewall

• Don’t rely on Flash

disadvantage

• Mobile IOS devices are not compatible

DASH

DASH, which stands for Dynamic Adaptive Streaming over HTTP, is an alternative to HLS. YouTube uses DASH. DASH slices video content into a short file segment using media Presentation Description (MPD). Each slice has multiple different bit rates. The DASH Client can select a bit rate for playback based on network conditions, allowing seamless switching between different bit rates.

You can use the plugin dash.js to play it

Unresolved difficulties

Due to the need of the project, we embedded H5 in the APP of iPad to play the video and used HLS, but it took longer to get the video picture in the webview of the app than in the browser. I saw it through packet capture, because after obtaining the M3U8 file in the Webview of the app, The m3U file that generates the PlayList takes a long time to come, and when it’s downloaded and ts is available, the screen will come out. I don’t know why it takes so long in the APP. If you know, please let me know.

Third-party plug-ins

Works with Vue’s Video.js player component

Refer to articles and resources

Apple official HLS documentation

RTMP, HTTP-FLV and HLS, do you know the three common live broadcast protocols

Understand the correct posture for RTMP, HttpFlv, and HLS

HTML5 Live Video (1)

HTTP Live Streaming

Why do we use DASH

Use flv.js for live streaming