Video(flv,mpegts) video streaming solution

video streaming

1. Live broadcast and on-demand

• On-demand: Request MP4 video from the backend, and the frontend puts the address in the src of the video to achieve playback
• Live broadcast: 1. What is obtained is streaming data 2. Real-time performance is required
  

2. Video streaming format

1. RTSP to RTMP

The bottom layer is based on TCP and relies on Flash on the browser side. However, starting from the end of 2020, Google has taken the lead in not supporting the flash plug-in.

2. RTSP to HLS
   1. The backend converts the video into an HLS stream, ending with the m3u8 suffix. Video.js can be played normally through the browser, but the fatal disadvantage is the high delay (10~30 seconds), which does not meet the real-time requirements of the project. Therefore, it is not recommended to use HLS streaming if there is a need for real-time video.
3. RTSP to FLV
   1. flv is divided into HTTP-FLV and WebSocket-FLV. Both methods are available, depending on the requirements.
      

3.flv.js and mpegts.js

After the above analysis, the most suitable for the live broadcast business at this stage is flv streaming, but its disadvantage is that the front-end video tag cannot be played directly and needs to be processed. But it doesn’t matter, we have flv.js!
flv.js is a more mature front-end plug-in library for processing flv format. It is an open source plug-in for Bilibili videos. The following is sample code:

import flvjs from 'flv.js'
if (flvjs.isSupported()) {
    
    
  var videoPlayer = document.getElementById('video')
  var flvPlayer = flvjs.createPlayer({
    
    
    type: 'flv',
    url: 'http://test.stream.com/fetch-media.flv'
  })
  flvPlayer.attachMediaElement(videoPlayer)
  flvPlayer.load()
  flvPlayer.play()
}

However, flv still has many problems, such as browser compatibility issues. flv only supports browsers including Chrome, FireFox, Safari 10, IE11, and Edge. It does not support higher versions of Safari browsers and cannot be used anymore. Play on ios, and for higher real-time requirements, the flv delay is still a bit high, so xqq, the author of flv, later launched mpegts.js, which was optimized on the basis of flv. Under the best circumstances, it can Reaching extremely low latency of 1 second, and supporting Chrome, FireFox, Safari, Edge (old version or Chromium) or any Chromium-based browser, the API can also use flv.js

<script src="mpegts.js"></script>
<video id="videoElement"></video>
<script>
    if (mpegts.getFeatureList().mseLivePlayback) {
    
    
        var videoElement = document.getElementById('videoElement');
        var player = mpegts.createPlayer({
    
    
            type: 'mse',  // could also be mpegts, m2ts, flv
            isLive: true,
            url: 'http://example.com/live/livestream.ts'
        });
        player.attachMediaElement(videoElement);
        player.load();
        player.play();
    }
</script>

4.Exception handling

// 监听错误事件
flvPlayer.on(flvjs.Events.ERROR, (err, errdet) => {
    
    
  // 参数 err 是一级异常，errdet 是二级异常
  if (err == flvjs.ErrorTypes.MEDIA_ERROR) {
    
    
    console.log('媒体错误')
    if(errdet == flvjs.ErrorDetails.MEDIA_FORMAT_UNSUPPORTED) {
    
    
      console.log('媒体格式不支持')
    }
  }
  if (err == flvjs.ErrorTypes.NETWORK_ERROR) {
    
    
    console.log('网络错误')
    if(errdet == flvjs.ErrorDetails.NETWORK_STATUS_CODE_INVALID) {
    
    
      console.log('http状态码异常')
    }
  }
  if(err == flvjs.ErrorTypes.OTHER_ERROR) {
    
    
    console.log('其他异常：', errdet)
  }
})