Introduction to the

The video live broadcast service currently supports three live broadcast protocols, namely RTMP, HLS and FLV. The following content is from Aliyun Help Center

  • RTMP Real-time messaging protocol, developed by Adobe but currently not an international standard (Wikipedia). Agreement is more universal, both can be used to push and can be used to live, its core idea is to large pieces of video frames and audio frame “chop”, and then in the form of small packets transmitted over the Internet, and support encryption, therefore privacy is relatively ideal, but the process of unpacking group package is more complex, when massive concurrent so prone to the stability of some unexpected problems.
  • HLS protocol:Live streaming over HTTP (Wikipedia). Apple’s solution is to break video into 5-10 second video fragments, which are then managed using the M3U8 index table. Since the videos downloaded by the client are 5-10 seconds of complete data, the video is very smooth, but also introduces a large delay (HLS generally around 10-30s). Compared with FLV, HLS supports the iPhone and most Android mobile browsers very well, so it is often used for URL sharing in QQ and wechat moments.
  • The HTTP-FLV protocol, pioneered by Adobe, is an extremely simple format that simply adds some tag header information to a large block of video frames and audio and video headers. Due to this extreme simplicity, it is ripe for both delayed performance and large-scale concurrency. The only downside is that it has very limited support in mobile browsers, but it works well as a mobile APP live protocol.

Here’s a comparison of the three technologies:

Application in Vue

The live broadcast project we did was written with Vue, and the background mainly output the live stream of RTMP and HLS

The player uses vue-video-player. In fact, video.js is integrated into VUE

Pay attention to the point

Here are some of the pitfalls and pitfalls of using this plugin for live streaming:

First of all, the commonly used demo has been officially provided in VUe-video-player, as required, where

  1. To play HLS streams, install videojs-contrib-hls, a browser that does not have native support, and enable CORS on the live server (described below).
  2. If you want to play RTMP streams, you need to install the VideoJs-Flash plug-in
  3. If both streams need to be played, the Flash plug-in needs to be installed before the HLS plug-in

compatibility

Let’s talk about the compatibility of these two live streams

  1. RTMP: RTMP is a protocol developed by Adobe. Currently, major live streaming services are mainly promoting the RTMP stream, which has a low latency, but requires the support of the Flash plug-in, as well as the installation mentioned abovevideojs-flashThe plug-in. However, the Flash plugin support on MAC is not friendly, and the Flash plugin on MAC is still the same as the Chrome plugin. This is awkward.
  2. HLS: This protocol has good compatibility, but the biggest disadvantage is that it has a high latency (about 20 seconds), so it can only be used as an alternative.

HLS compatibility is good, mainly means that users can use JS to avoid configuration (do not need to install Flash), you can see the support level of HLS in caniuse: caniuse.com/#search=HLS

Only Edge and Safari provide native support; all other browsers require JS plug-in support. Contrib-hls = videojs-contrib-hls = videojs-contrib-hls ❌, there’s another hole in here. This pit is explained in the plugin’s official documentation:

Unlike a native HLS implementation, the HLS tech has to comply with the browser’s security policies. That means that all the files that make up the stream must be served from the same domain as the page hosting the video player or from a server that has appropriate CORS headers configured. Easy instructions are available for popular webservers and most CDNs should have no trouble turning CORS on for your account.

In addition to browsers that support HLS natively, other browsers need to enable CORS on the live stream server to play HLS.

The final solution we used was. RTMP streams are preferred, and if not supported, switch to HLS streams. Fortunately, video.js will automatically do this for us. The configuration code is posted below.

Configuration code

Player options in Vue instance, see github.com/savokiss/vu for more code…



      playerOptions: {
        autoplay: false.// Auto play
        controls: true.// Whether to display the control bar
        techOrder: ['flash'.'html5'].// Compatible order
        sourceOrder: true.// 
        flash: { hls: { withCredentials: false}},html5: { hls: { withCredentials: false}},sources: [{ // The stream configuration, in array form, will automatically switch according to the compatible order
          type: 'rtmp/mp4'.src: 'RTMP: / / 184.72.239.149 / vod / & mp4: BigBuckBunny_115k. Mov'
        }, {
          withCredentials: false.type: 'application/x-mpegURL'.src: 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'}].poster: "/static/img/no_data.png".// Player default image
        // controlBar: {// configure the controlBar
        // timeDivider: false, // timeDivider
        // durationDisplay: false, // total time
        // progressControl: true, // Progress bar
        CustomControlSpacer: true, // Unknown
        // fullscreenToggle: true // fullscreen
        // },
      },Copy the code

The last

The above are some small summaries of the recent research on the live broadcast project. Other technologies in the live broadcast have not been covered for the time being, and I will summarize them in the future. If you have any questions, you can share them with me

Reference documentation

  • My GitHub Demo
  • vue-video-player Demo
  • Common push stream protocols
  • Open the CORS
  • The original link