The front end realizes playing real-time monitoring video notes (hls http-flv)

foreword

Recently, I was assigned to do a data visualization project, which includes the function of live video (real-time monitoring), so I only know how to <video>play video files, and I started to learn about live broadcast, real-time playback, etc., take notes here, and forward some references article.

Pre-knowledge

Live Protocol

Before choosing a tool, you must first understand the relevant principles of live broadcasting. Here are the recommendations:

• Live Protocol RTMP, HLS, HTTP FLV - Gopherzhang
  • Introduce push flow, pull flow and common protocols
• "Understanding the correct posture of RTMP, HttpFlv and HLS" - North Tower Information
  • Introduces the ins and outs of the three commonly used protocols
• Three PKs of Live Streaming: RTMP/HLS/HTTP-FLV - Daniel Live SDK
  • As a complement to the protocol concept

live source

For live video, the front-end also uses a url address as the source of the live broadcast. This address is used to obtain the file of the live source. The address is unchanged, and the content of the file changes with the live broadcast.

The client will reacquire the live source every once in a while.

Take the HLS live source file (.m3u8) as an example, you can refer to What is m3u8? What is the relationship between the live source and m3u8? - see micro-knowledge

technology choice

From my point of view to choose:

protocol	in conclusion
RTMP	The project requirement is to be used as a streaming terminal, regardless of Flash support, do not use
HLS	Good cross-platform compatibility, supports fast-forward playback, high latency, and can be used to play recorded videos
HTTP-FLV	HTML5 compatibility can be achieved through flv.js, and the delay is low, which can be used to play real-time surveillance video

tool selection

• HTTP-FLV
  • flv.js
    • Developed by bilibili (former) staff to play FLV format video on HTML5
    • It was originally an open source library for smoothly transitioning the on-site flash player to HTML5 player
    • Support HTTP-FLV for live streaming
    • Station B officially recommends using mpegts.js , and generating the flv.js project will reduce maintenance.
    • Some complaints: What do you think of Bilibili’s open source HTML5 player kernel flv.js? bazyd
• HLS：
  • hls.js
    • HLS is a protocol natively supported by Apple, and most other browsers are not compatible. hls.js is compatible with HLS on other platforms.
  • video.js
    • A player plug-in that encapsulates UI and functions based on hls.js, supports HTML5 and Flash (requires browser to support Flash)
    • Disadvantages: bloated package, inconvenient to modify UI

hls.js uses

hls.js - npm

npm install hls.js

<video id="video" src="" /

import Hls from 'hls.js'

const video = document.getElementById('video')
const url = 'http://xxxxxx/xxx.m3u8' // 直播视频源（.m3u8）文件地址

if (Hls.isSupported()) {
    
    
  // 如果支持 hls.js（MediaSource Extensions）
  var hls = new Hls()
  hls.loadSource(url)
  hls.attachMedia(video)
  // 自动播放
  hls.on(Hls.Events.MANIFEST_PARSED,function() {
    
    
      video.play()
  })
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    
    
  // 如果支持原生播放
  video.src = url
  // 自动播放
  video.addEventListener('canplay',function() {
    
    
    video.play()
  })
}

You can also <video>add directly on the autoplay="autoplay"to achieve automatic playback.

video.js uses

• video.js - npm
• VIDEO JS official website
• Document
  • Vue
  • Options
• immature Chinese documentation

Vue example:

npm i video.js

First import css, you can use the CDN address, you can also use the npm package video.js/dist/video-js.css, you can import it in the html template, or you can use it in js import.

Write the component:

<video ref="MyPlayer" class="video-js">
  your browser does not support the video tag
</video>

Note: To use a style theme, <video>the class must be set to the corresponding tag for the element, which is the default video-js.

Documentation: Home Page Themes

The above <video>would eventually translate to:

<div class="video-js">
<video></video>
</div>

Scripting:

import videojs from 'video.js'
import 'video.js/dist/lang/zh-CN.js'

export default {
    
    
  data() {
    
    
    return {
    
    
      url: '',
      player: null
    }
  },
  mounted() {
    
    
    this.player = videojs(this.$refs.MyPlayer, {
    
    
      autoplay: 'muted', // 自动静音播放
      controls: true, // 显示控制器
      disablePictureInPicture: true, // 禁用画中画功能
      language: 'zh-CN', // 语言设置
      sources: [
        {
    
    
          src: this.url,
          type: 'application/x-mpegURL', // m3u8 类型
        },
      ],
    }, () => {
    
    
      // onPlayerReady
    })
  beforeDestroy() {
    
    
    if (this.player) {
    
    
      // 清除 video 元素
      this.player.dispose()
    }
  }
}