博客
关于我
H265网页视频播放器EasyPlayer.js在VR播放项目中两个flv直播无法切换问题排查
阅读量:162 次
发布时间:2019-02-27

本文共 3464 字,大约阅读时间需要 11 分钟。

之前和大家讲到EasyPlayer.js的播放器项目已经支持VR播放了,但是在调试过程中,用户反馈,在VR视频流播放过程中,hls直播切换flv直播是可以的,但是flv直播切换到另一个flv直播失效。初步判断是我们自己的项目代码出现bug,排查如下:

  watch:{    VrUrl(newVal, lodVal){      if (lodVal !== newVal) {        this.playerUrl = this.VrUrl        this.initURl()      }    },    initURl() {      if (this.VrUrl !== '') {        this.playerUrl = this.VrUrl        if (this.vr.flvPlayer||this.vr.hlsPlayer) this.isDestroy()        if (this.isHLS) this.playerHLS()        if (this.isMP4) this.playerMP4()        if (this.isFLV) this.playerFLV()        this.callbackFunc()      }    },    isDestroy() {      if (this.vr.hlsPlayer) {        this.vr.hlsPlayer.destroy()        this.vr.hlsPlayer = null      }      if (this.vr.flvPlayer) {        this.vr.flvPlayer.destroy();        this.vr.flvPlayer = null      }    },    playerFLV() {      this.vr.play(this.VrUrl, this.vr.resType.flvVideo, {muted: (this.muted == 'false'|| this.muted == false), autoplay: (this.autoplay == 'false'|| this.autoplay == false) });      this.vr.flvPlayer._config.enableStashBuffer = true;      this.vr.flvPlayer._config.lazyLoad = true      this.vr.flvPlayer._config.lazyLoadMaxDuration = 30      this.vr.flvPlayer._config.lazyLoadRecoverDuration = 2      this.vr.flvPlayer._config.deferLoadAfterSourceOpen = true      this.vr.flvPlayer._config.autoCleanupMaxBackwardDuration = 3 * 60      this.vr.flvPlayer._config.autoCleanupMinBackwardDuration = 2 * 60      this.vr.flvPlayer._config.statisticsInfoReportInterval = 600      this.vr.flvPlayer._config.fixAudioTimestampGap = true         },

总结一下切换流程,就是切换直播地址时,先把之前的hls播放器或flv播放器destroy掉,然后根据新的播放地址,重新初始化一个相应的新播放器。

那么切换失败出现BUG的原因有两个:第一,老播放器destroy失败;第二,老播放器destroy虽然成功了,但是新创建的失效,仍然在使用之前的配置。

我们按照以下步骤来进行分析:

(1)、查找vr定义

_this.vr = new VR(scene, renderer, container, { fov: 100 });

发现vr使用的是开源项目mxreality.js播放库。

(2)、进入mxreality.js播放库源码,在destroy处打印老播放器,发现destroy成功;在新播放器创建处,打印播放地址,发现传入的确实是新地址。那么,问题到底在哪呢?至少到目前为止,可以确认我们的项目代码是没有BUG的,只能怀疑是mxreality有BUG。

(3)、mxreality开源项目本身提供了hls直播切换示例,我们在此基础上,来测试切换flv,发现确实无法切换。与mxreality作者在Github上沟通后,研发建议切换时,不是destroy掉vr.flvPlayer,而是将vr整个destroy掉。经过测试,这样确实能切换成功,但是代价未免太大了,相当于将整个页面刷新掉。进一步与研发反馈,他表示后续有时间会进行优化。目前只能自己解决这个BUG了。

(4)、mxreality源码中播放flv直播部分代码如下

} else if (that.resType.flvVideo == resType) {                    if (!flvjs.isSupported()) {                        console.error('Your browser does not support flvjs')                        return;                    }                    that.flvConfig.url = recUrl;                    that.flvPlayer = flvjs.createPlayer(that.flvConfig);                    that.flvPlayer.attachMediaElement(video);                    that.flvPlayer.load();                    that.flvPlayer.play();

这里的flvPlayer使用的就是flv.js,难道是attachMediaElement(video)这个video没有清理干净导致的?改一下,把video强制初始化一遍,发现BUG依然存在。这下就要怀疑flv.js源码有BUG了。

(5)、进入flv.js源码,使用示例切换两个flv直播地址,发现可以正常切换,并且切换的方式和mxreality源码中是一致的。排查陷入僵局,但是可以肯定,BUG仍然在mxreality当中。

(6)、在mxreality的Github中,浏览了所有的issues看看有没有收获,其中有个网友表示:

78.png

我也F12打开控制台,有了意外收获:

在切换flv直播地址后,虽然之前的直播流数据停止了,但是新的直播流仍然还在请求之前的地址。可是flv.js在createPlayer时确实已经切换到新地址了。

(7)、修复bug

that.flvConfig.url = recUrl;                    that.flvPlayer = flvjs.createPlayer(that.flvConfig);                    that.flvPlayer.attachMediaElement(video);                    that.flvPlayer.load();                    that.flvPlayer.play();

经过跟踪,发现that.flvConfig会被flv.js更新,其中就有segments属性,里面有老的flv播放片段。新的播放器只是更改了url,开始播放后,flv.js会优先找segments里的片段继续播放,导致切换失败。解决办法很简单了,在切换flv.js直播地址时,把that.flvConfig重新初始化即可。

转载地址:http://hcjd.baihongyu.com/

你可能感兴趣的文章
MTD技术介绍
查看>>
MySQL
查看>>
MySQL
查看>>
mysql
查看>>
MTK Android 如何获取系统权限
查看>>
MySQL - 4种基本索引、聚簇索引和非聚索引、索引失效情况、SQL 优化
查看>>
MySQL - ERROR 1406
查看>>
mysql - 视图
查看>>
MySQL - 解读MySQL事务与锁机制
查看>>
MTTR、MTBF、MTTF的大白话理解
查看>>
mt_rand
查看>>
mysql -存储过程
查看>>
mysql /*! 50100 ... */ 条件编译
查看>>
mudbox卸载/完美解决安装失败/如何彻底卸载清除干净mudbox各种残留注册表和文件的方法...
查看>>
mysql 1264_关于mysql 出现 1264 Out of range value for column 错误的解决办法
查看>>
mysql 1593_Linux高可用(HA)之MySQL主从复制中出现1593错误码的低级错误
查看>>
mysql 5.6 修改端口_mysql5.6.24怎么修改端口号
查看>>
MySQL 8.0 恢复孤立文件每表ibd文件
查看>>
MySQL 8.0开始Group by不再排序
查看>>
mysql ansi nulls_SET ANSI_NULLS ON SET QUOTED_IDENTIFIER ON 什么意思
查看>>