EasyPlayer.jsプレーヤープロジェクトはすでにVR再生をサポートしているとお話ししましたが、デバッグプロセス中に、VRビデオストリームの再生プロセス中にhlsライブブロードキャストとflvライブブロードキャストを切り替えることができるとユーザーからのフィードバックがありましたが、flvライブブロードキャストが別のライブブロードキャストに切り替えられましたflvライブブロードキャストが無効です。予備的な判断は、私たち自身のプロジェクトコードにバグがあるということです。調査は次のとおりです。
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プレーヤーを破棄してから、新しい再生アドレスに従って対応する新しいプレーヤーを再初期化します。
次に、スイッチが失敗したときのBUGの理由は2つあります。1つは古いプレーヤーが破棄に失敗したこと、もう1つは古いプレーヤーが正常に破棄されたにもかかわらず、新しく作成されたプレーヤーが失敗し、以前の構成が引き続き使用されることです。
以下の手順に従って分析します。
（1）、vr定義を見つける
_this.vr = new VR(scene, renderer, container, { fov: 100 });
vrはオープンソースプロジェクトのmxreality.js再生ライブラリを使用していることがわかりました。
（2）mxreality.js再生ライブラリのソースコードを入力し、破棄場所で古いプレーヤーを印刷して、破棄が成功したことを確認します。新しいプレーヤーの作成場所で、再生アドレスを印刷して、新しいアドレスを見つけます。確かに渡されます。それで、問題はどこにありますか？少なくともこれまでのところ、プロジェクトコードにBUGがないことを確認でき、mxrealityにBUGがあると疑われるだけです。
（3）mxrealityオープンソースプロジェクト自体がhlsライブスイッチングの例を示しています。これに基づいて、flvのスイッチングをテストしたところ、実際に切り替えることは不可能であることがわかりました。Githubでmxrealityの作成者と通信した後、研究開発で切り替えが提案された場合、vr.flvPlayerを破棄するのではなく、vr全体を破棄します。テスト後、これは実際に正常に切り替えることができますが、コストが高すぎます。これは、ページ全体を更新するのと同じです。研究開発へのさらなるフィードバックとして、彼は将来最適化する時間があると述べました。現在、このバグは自分でしか解決できません。
（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）ビデオがクリーンアップされていない可能性がありますか？変更して強制的に動画を初期化し、バグが残っていることを確認してください。ここで、flv.jsソースコードにバグがあるのではないかと疑う必要があります。
（5）flv.jsソースコードを入力し、例を使用して2つのflvライブブロードキャストアドレスを切り替え、正常に切り替えられることを確認します。切り替え方法はmxrealityソースコードと同じです。調査は行き詰まっていますが、バグがまだmxrealityにあることは確かです。
（6）mxrealityのGithubで、すべての問題を参照して、利益があるかどうかを確認しました。あるネチズンは次のように述べています。
また、F12でコンソールを開いたところ、予期しないゲインが発生しまし
た。flvライブブロードキャストアドレスを切り替えた後、以前のライブストリームデータは停止しましたが、新しいライブストリームは引き続き以前のアドレスを要求していました。しかし、flv.jsはcreateingPlayerのときに実際に新しいアドレスに切り替えました。
（7）、バグを修正
that.flvConfig.url = recUrl;
that.flvPlayer = flvjs.createPlayer(that.flvConfig);
that.flvPlayer.attachMediaElement(video);
that.flvPlayer.load();
that.flvPlayer.play();
追跡後、that.flvConfigは、古いflv再生フラグメントを含むsegments属性を持つflv.jsによって更新されることがわかりました。新しいプレーヤーはURLを変更したばかりです。再生を開始した後、flv.jsは最初にセグメント内のセグメントを見つけて再生を続行し、スイッチが失敗する原因になります。解決策は非常に簡単です。flv.jsライブブロードキャストアドレスを切り替えるときは、that.flvConfigを再初期化します。