Video(flv,mpegts)视频流解决方案

最新推荐文章于 2024-09-29 12:13:24 发布

欣欣向荣q77

最新推荐文章于 2024-09-29 12:13:24 发布

阅读量6.8k

点赞数 4

分类专栏：前端好用的功能库文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_52648305/article/details/128957203

版权

前端好用的功能库专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章讨论了视频流的不同形式，如RTMP、HLS和FLV，以及它们在实时性和浏览器兼容性方面的优缺点。FLV通过flv.js实现播放，但对某些浏览器和iOS设备支持不佳。为解决这些问题，文章介绍了mpegts.js，它提供了更低延迟并扩大了浏览器支持范围。同时，文章还提到了错误处理的实现方法。

摘要由CSDN通过智能技术生成

视频流

1.直播与点播

点播:从后端请求到MP4视频,前端把地址放在video的src中实现播放
直播:1.获取的是流数据2.要求实时性

2.视频流形式

RTSP转RTMP

底层基于 TCP，在浏览器端依赖 Flash,但是从2020底年开始,谷歌已经带头不支持flash插件了

RTSP转HLS
1. 后端将视频转成HLS流，以m3u8后缀结尾。通过浏览器用video.js可以正常播放，但是致命缺点是延迟高（10~30 秒），不符合项目的实时性需求，所以有实时视频的需求不建议用HLS流播放。
RTSP转FLV
1. flv 分为 HTTP-FLV 和 WebSocket-FLV ,两种方式都可,具体看需求

3.flv.js与mpegts.js

经过以上的分析,现阶段最适合最直播业务的为flv流,而它的缺点是前端 video 标签不能直接播放，需要经过处理才行。不过没关系,我们有flv.js!
flv.js是一个较成熟的前端处理flv格式的插件库，是B站视频的开源插件。下面为示例代码:

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()
}

但是flv依旧存在很多问题,比如浏览器兼容性问题,flv只支持包含 Chrome, FireFox, Safari 10, IE11, Edge版本的浏览器,对于Safari更高版本的浏览器是不提供支持的,且不能再ios上播放,而且对于实时性要求更高的需求,flv延迟还是显得高了些,所以flv的作者xqq在后续推出了mpegts.js,是在flv的基础上进行了优化,最佳情况下能达到 1 秒的极低延迟,且支持 Chrome、FireFox、Safari、Edge（旧版或 Chromium）或任何基于 Chromium 的浏览器,api也可以沿用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.异常处理

// 监听错误事件
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)
  }
})