flv.js解决直播流延迟、断流重连以及画面卡死

视频流延迟

在普通的网络环境下,flv.js播放http-flv的视频流延迟大概在3~5秒左右,对于实时性要求比较高的场景,显然是不适用的,那么怎么才能降低延迟呢? 通过对buffered(缓冲区末尾)和currentTime(当前播放位置)的比较,发现差值大概在1.8秒左右,这时候就需要我们定时检测currentTime和buffered的差值,然后手动跳帧,使currentTime和buffered同步(PS:这两个值在Player对象中可以获取到,可以查看我的上一篇帖子:vue使用flv.js(bilibili)拉流),代码如下:
setInterval(() => {if (this.player.buffered.length) {let end = this.player.buffered.end(0);//获取当前buffered值let diff = end - this.player.currentTime;//获取buffered与currentTime的差值if (diff >= 0.5) {//如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定this.player.currentTime = this.player.buffered.end(0);//手动跳帧}}}, 2000); //2000毫秒执行一次

断流重连

视频直播时,有时候会遇到视频loading,卡顿,有可能是本地网络波动或者服务端流断开,我们可以通过监听flvjs.Events.ERROR来判断连接是否已经断开,继而进行断流重连,代码如下:
this.player.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {console.log("errorType:", errorType);console.log("errorDetail:", errorDetail);console.log("errorInfo:", errorInfo);//视频出错后销毁重新创建if (this.player) {this.player.pause();this.player.unload();this.player.detachMediaElement();this.player.destroy();this.player= null;this.createPlayer(videoElement, this.url);}});

画面卡死

如果控制台没有错误信息,而且查看network发现视频流没有断开,但是画面一直在loading或者卡住不动,我这边的原因是服务端推流突然断开,然后在很快的时间内继续推流,这个时候因为客户端的超时时间还没有结束,流会继续推送到原链接,这个时候我们的视频会卡在掉线的那个时间,不会继续播放.这个时候我们就需要监听推流的decodedFrame,如果decodedFrame不再发生变化,我们就销毁掉该实例并进行重新连接,代码如下:
this.player.on("statistics_info", function (res) {if (this.lastDecodedFrame == 0) {this.lastDecodedFrame = res.decodedFrames;return;}if (this.lastDecodedFrame != res.decodedFrames) {this.lastDecodedFrame = res.decodedFrames;} else {this.lastDecodedFrame = 0;if (this.player) {this.player.pause();this.player.unload();this.player.detachMediaElement();this.player.destroy();this.player= null;this.createPlayer(videoElement, this.url);}}});

flv.js解决直播流延迟、断流重连以及画面卡死相关推荐

如何使用 flv.js 做直播
为什么要在这个时候探索flv.js做直播呢?原因在于各大浏览器厂商已经默认禁用Flash,之前常见的Flash直播方案需要用户同意使用Flash后才可以正常使用直播功能,这样的用户体验很致命. 在介绍 ...
flv.js播放卡顿，短线重连，包括九宫格，四宫格，一宫格
解决flv.js断网重连等一些问题这里简单做一下改动请看下图这张图片就展示了宫格以及设备等一些问题附上解决断流以及卡顿的代码,各位前端的精英,看看就能懂 this.$nextTick(() = ...
flv.js优化直播时延
在 flv.js 中,要降低时延可以通过调整以下几个参数来实现: lazyLoad :该参数决定是否使用懒加载模式,默认为 true,开启懒加载模式会延迟视频的加载时间,从而降低时延.您可以将其设为 ...
flv.js实现直播功能
最近开发中遇到一个网页需要连接监控查看的功能,要求播放实时播放.flv文件,我通过查找找到的两个可以使用的插件video.js和flv.js,flv.js是当前b站正在使用的插件基于JavaScrip ...
常用m3u8，rtsp，rtmp，flv，mp4直播流在线测试地址
1.rtmp地址: 伊拉克 Al Sharqiya 电视台: rtmp://ns8.indexforce.com/home/mystream 韩国GOOD TV: rtmp://mobliestrea ...
解决HttpServletRequest 流数据不可重复读
https://www.cnblogs.com/Sinte-Beuve/p/13260249.html 前言在某些业务中可能会需要多次读取 HTTP 请求中的参数,比如说前置的 API 签名校验.这 ...
m3u8，rtsp，rtmp，flv，mp4直播流在线测试地址（2022年8月）
前端做直播视频展示的时候,很多时候播放不出来,不是因为自己代码的问题,而是因为网上很多源视频流现在已经播放不出来了,所以源头都有问题,那自己的前端肯定就放不出来. 今天是2022.08.12,刚好有做 ...
解决 HttpServletRequest 流数据不可重复读
背景介绍甲方客户的生产系统,有安全风险预警和安全事件快速溯源要求,需要做一套日志管理规范. 要求我们接入的系统,要对用户登录.注册.密码修改等重要场景,严格按照提供的格式,输出相应的日志. 后续通过 ...
JavaCV开发详解之25：简单视频截图，视频文件和rtsp/rtmp/flv/hls等直播流截取一张图片
javacv实战专栏目录: JavaCV实战专栏文章目录(JavaCV速查手册) 前言我们之前实现了连续截图和覆盖截图,由于单张截图比较简单,使用FrameRecorder录制器就可以很方便的实现, ...

flv.js解决直播流延迟、断流重连以及画面卡死

视频流延迟

断流重连

画面卡死

flv.js解决直播流延迟、断流重连以及画面卡死相关推荐

最新文章

热门文章