EZ Media Tools

日本語

简体中文
English

日本語

简体中文
English

テーマ

Bilibiliオープンソースflv.jsの活用: プラグイン不要のブラウザベースRTMP/FLV再生（低遅延最適化ガイド付き） ​

著者紹介 ​

👋 こんにちは、私はEZ Media Toolsのウェブマスターで、マルチメディアオンラインビデオ技術とブラウザベースのツール開発に焦点を当てています。

EZ Media Toolsは、オンラインビデオ処理を中心としたツールプラットフォームで、M3U8オンライン再生、M3U8からMP4への変換、RTMP/HLSストリームテスト、FFmpegオンライン変換などの機能を提供しています。これらはすべてクライアントソフトウェアをインストールすることなく、ブラウザで直接使用できます。

はじめに ​

ウェブベースのライブストリーミングアプリケーションを構築する際、多くの開発者が直面する核心的な課題は、安全でないFlashを廃棄した後、広く使用されているRTMP/FLVストリーミングメディアプロトコルとの互換性をどのように維持するかということです。Bilibiliのオープンソースflv.jsが登場し、純粋なHTML5プラグインフリーの再生ソリューションを実現しました。これは、Flashがもたらしたセキュリティ脆弱性、互換性警告、断片化した体験の問題を完全に解決するだけでなく、監視大画面、社内ライブストリーミング、オンライン教育などのシナリオで、より安全でスムーズなウェブストリーミングメディア再生体験を実現し、ユーザーに「すぐに使える」体験を提供しました。

flv.jsについて ​

flv.jsはBilibiliのオープンソースHTML5ビデオプレイヤーで、主にWebページ上でFLV（Flash Video）形式のビデオストリームを再生するために使用され、特定の方法でRTMP（Real-Time Messaging Protocol）ストリームの処理もサポートしています。純粋なJavaScriptで記述されており、Flashプラグインへの依存は不要で、最新のブラウザで効率的に低遅延のビデオ再生を実現できます。ライブストリーミング、ビデオオンデマンドなどのシナリオで広く使用されています。

概念説明 ​

  • FLV形式: ファイルサイズが小さく、読み込み速度が速いという特徴を持つストリーミングメディア形式で、ネットワークビデオ伝送に一般的に使用されます。
  • RTMPプロトコル: 主にオーディオとビデオデータのリアルタイム伝送に使用されるリアルタイムメッセージングプロトコルで、ライブストリーミング分野で広く応用されています。
  • flv.js: FLV形式のビデオデータをHTML5でサポートされているMedia Source Extensions（MSE）形式に変換し、Flashを使用せずに再生を可能にします。

RTMP/HLS/HTTP-FLV Comparison ​

FeatureRTMP (Flash)HLS (m3u8)HTTP-FLV (flv.js)
LatencyExtremely Low (1-3s)High (10-30s)Low (1-3s)
Plugin DependencyRequires FlashNoneNone (Requires MSE support)
Modern Browser SupportPoor (Deprecated)ExcellentExcellent

Webページ上でのRTMP/FLV形式ビデオ再生の実装 ​

flv.jsの導入 ​

flv.jsはCDNまたはローカルファイルを通じて導入できます。以下はCDNを通じて導入する例です：

javascript
<script src="https://cdn.jsdelivr.net/npm/flv.js@1.6.2/dist/flv.min.js"></script>

ビデオ要素の作成 ​

HTMLにビデオ要素を追加してビデオコンテンツを表示します：

javascript
<video id="videoElement" controls width="800" height="450"></video>

flv.jsプレイヤーの初期化 ​

JavaScriptでflv.jsプレイヤーを初期化し、ビデオソースアドレスなどのパラメータを指定します：

javascript
if (flvjs.isSupported()) {
  var videoElement = document.getElementById('videoElement');
  var flvPlayer = flvjs.createPlayer({
    type: 'flv',
    isLive: true, // コア: ライブストリームの場合は有効にする必要があります
    url: 'http://example.com/live/stream.flv'
  });
  flvPlayer.attachMediaElement(videoElement);
  flvPlayer.load();
  
  // 自動再生がブロックされた場合の処理
  var playPromise = flvPlayer.play();
  if (playPromise !== undefined) {
      playPromise.catch(error => {
          console.warn("自動再生がブロックされました、ユーザーは手動で再生をクリックする必要があります", error);
      });
  }
}

⚠️ 注意: RTMPストリームを再生したい場合は、通常、サーバー側でRTMPストリームをFLVストリームに変換してから、flv.jsを使用して変換されたFLVストリームを再生する必要があります。

ベスト統合プラクティス ​

エラーハンドリング ​

再生エラーが発生した場合にユーザーに迅速に警告したり、再試行操作を実行したりするためのエラーハンドリングメカニズムを追加します。例：

javascript
flvPlayer.on('error', function(error) {
  console.error('再生エラー:', error);
  // ここに再試行ロジックを追加するか、ユーザーに警告できます
});

リソースのクリーンアップ ​

ページが閉じられたときやビデオ再生が不要になったときに、プレイヤーインスタンスを破棄してリソースを解放します：

javascript
flvPlayer.destroy();

インタラクティブ体験の最適化 ​

低遅延フレーム追跡戦略。ブラウザタブがバックグラウンドに切り替わり、その後戻ると、遅延が蓄積されます。バッファをチェックする簡単なタイマーを追加できます。コード参考：

javascript
// 遅延が3秒を超えた場合、最新のフレームに直接ジャンプ
setInterval(() => {
    if (flvPlayer.buffered.length > 0) {
        let end = flvPlayer.buffered.end(0);
        let diff = end - flvPlayer.currentTime;
        if (diff > 3) { 
            flvPlayer.currentTime = end - 0.5; 
        }
    }
}, 5000);

クロスオリジン（CORS）とプロトコルの制限 ​

これは、flv.jsを統合する際に90%の開発者が遭遇する最初の落とし穴です。

  • CORS: HTTP-FLVストリームサーバーはAccess-Control-Allow-Originを設定する必要があります。そうしないと、JavaScriptはストリームデータを読み取ることができません。

  • 混合コンテンツ: あなたのウェブページがhttpsの場合、ビデオストリームアドレスもhttps（またはwss）である必要があります。そうしないと、ブラウザによって直接ブロックされます。

一般的な問題と解決策 ​

Q: RTMPライブストリームの再生が途切れたり、遅延が高いのはなぜですか？ ​

低遅延再生は最適化されていますが、最終的な速度はネットワークとストリーミングサーバーの品質にも依存します。途切れや遅延は通常、ネットワーク環境とストリーム自体に関連しています。入力されたRTMPストリームアドレスが有効で安定していることを確認してください。

Q: RTMPライブストリーム再生品質を最適化するにはどうすればよいですか？ ​

RTMPライブストリーム再生品質を最適化するには、以下をお勧めします：

  • 安定したネットワーク接続と十分な帯域幅を確保する；
  • 適切なビットレートと解像度を選択し、過度に高いビットレートによる途切れを避ける；
  • WiFiではなく有線ネットワーク接続を使用する；
  • 帯域幅を消費する他のアプリケーションを閉じる；
  • 定期的にブラウザキャッシュをクリアする。プレイヤーはネットワーク状況に基づいてバッファリング戦略を自動調整し、最適な視聴体験を提供します。

Q: RTMPストリーム再生失敗の問題を解決するにはどうすればよいですか？ ​

まず、ストリームアドレスが正しいか確認し、サーバーが正常に稼働していることを確認してください。次に、ネットワーク接続を確認し、ファイアウォールが関連ポートをブロックしていないことを確認してください。次に、ブラウザがHTML5ビデオ再生をサポートしていることを確認してください。最新バージョンのChrome、Firefox、またはEdgeブラウザを使用することをお勧めします。CORSエラーが発生した場合は、サーバーのCORS設定を確認するか、プロキシサーバーを使用してください。

統合デモ ​

デモURL: https://ezwebtools.net/ja/rtmp-playerFLV/RTMPオンラインプレイヤー

機能ハイライト ​

RTMPオンラインプレイヤー

  • リアルタイムスクリーンショット: 再生中または一時停止中のリアルタイムスクリーンショットをサポートし、プレビューと保存機能を備えています。
  • マルチフォーマットサポート: RTMPとHTTP-FLVに適応し、様々なデバイスをサポートします。
  • ストリームステータス表示: リンクステータス、ビットレート、解像度、HTTP-FLV遅延などの情報をリアルタイムで動的に表示します。

使用事例 ​

  • ゲームストリーミング、スポーツイベント、ニュース放送などの様々なライブストリーミングシナリオに適しており、低遅延の視聴体験を提供します。
  • セキュリティ監視システムで監視映像のリアルタイム伝送に使用され、複数のビデオストリームの同時再生をサポートします。
  • RTMPソースアドレスが正常に動作しているかどうかのテスト

まとめ ​

flv.jsは単なるプレイヤーではありません。それはBエンド監視と低遅延ライブストリーミングシナリオの現在の最適なバランスポイントです。合理的なサーバー側ストリーム変換（Nginx-rtmp-moduleやSRSの使用など）とフロントエンドMSE技術を組み合わせることで、パフォーマンスを犠牲にすることなく完全なHTML5の未来を受け入れることができます。

参考文献 ​

最終更新: