接続後にHTML5ライブビデオストリームを同期させるにはどうすればいいですか？

Question

私は、IPカムビデオを含む小さなウェブアプリケーションを構築しています。私はHTML5コードでストリームします：

<video muted id="video_0" src="SOURCEURL" type="video/ogg" autoplay="autoplay" width="100%" preload="none" controls/> 

ビデオはNetcam Studioを使用して私のPCでホストされ、WebM形式です。

ウェブアプリケーションの場合、ビデオは可能な限りリアルタイムに近いことが重要です。私はストリーミングの品質とfpsを下げることでこれを達成しています。しかし、ストリーミングの数時間後には、リアルタイムよりも15秒遅れている可能性があります。

最新の状態を維持するにはどうすればよいですか？私は数分おきにそれをリロードすることができたが、よりよい方法があるかどうかはわからなかった。

私の仕事のほとんどはAngularJSで行われていますが、それがあなたの答えに影響する場合。

ありがとうございます！

Answer 1

HTML5ビデオ要素のbufferedプロパティを定期的に確認し、それをcurrentTimeプロパティと比較することができます。バッファリングされた範囲がいくつかのデルタより大きい場合は、バッファされた範囲の終わり付近のある値に現在の時刻を設定して、最後に近づけます。少なくともこれはリアルタイムMP4ビデオフィードで私たちを助けました。

Chromeは、MP4の場合に現在の時刻が正しく更新されていないと報告したbugを持っていました。あなたのoggビデオに問題がないかどうかを確認してください。