🕤 ⛱️ 🚄 Live EncoderからWebRTCへのRTMPビデオストリームのブロードキャスト 🤾 ◼️ 🤜

HLSやDASHなどのHTTPビデオコンテンツ配信プロトコルは、ブラウザでオンラインビデオコンテンツを再生するニッチ市場でFlashに取って代わりました。

ただし、最初にフラッシュするRTMPプロトコルは、ビデオソースからリレーサーバーにライブビデオを配信する最も一般的な方法の1つのままです。 RTMPは、 Facebook Live 、 Youtube Liveなど、ライブビデオやブロードキャストをブロードキャストするサービスを引き続き使用します。したがって、Flashの差し迫った終aboutに関する予測と声明にもかかわらず、RTMPプロトコルは依然として危機にatしており、ビデオ放送のニッチにおけるその位置に劣っていません。

カメラからビデオをキャプチャし、RTMPでエンコードすることにより、多くのハードウェアおよびソフトウェアソリューションが作成されました-1つまたは複数のカメラに接続し、受信したビデオ信号を処理し、受信した画像をRTMP経由でリモートサーバーまたはサービスに送信して、さらに中継します。古典的な翻訳スキームは次のようになります。

このスキームの欠点は、ビデオブロードキャストの遅延としか言えず、約30秒です。 HLSとDASHの代わりにAdobe Flash PlayerとRTMPを使用する場合、Flashプラグインに戻ります。これは、控えめに言っても、オンラインビデオを表示する最新の手段ではありません。

WebRTC

プラグインなしで最小限の遅延でストリームを再生できるソリューションはWebRTCであり、サーバー側でRTMPをWebRTCに変換すると、多数のデバイスやブラウザーでストリームを再生する問題が解決します。

ただし、ここでは、WebRTCはリアルタイムで強化された技術であることを理解する必要があります。たとえば、セグメントが単純にHTTPプロトコルで送信される同じHTTP（HLS）とは異なり、WebRTCははるかに複雑に動作し、 RTCPフィードバック 、帯域幅制御、遅延ターゲティングを使用して、トラフィックの送信者と受信者の間で高密度のデータ交換を使用します。

したがって、単純なストリームの再生のためにWebRTCを有効にする前に、1つの簡単な質問に答える必要があります。 ビデオ配信プロジェクトで低遅延があります。また、低レイテンシが不要な場合は、WebRTCのオーバーヘッドを回避するために、HLSやDASHなどの他の配信テクノロジーを検討することは理にかなっています。

他のデバイスとの互換性を最大限にし、HLSでの配信の可能性を維持するには、適切なコーデックを選択する必要があります。通常、RTMPエンコーダーはH.264ビデオコーデックとAACオーディオコーデックをサポートしています。この組み合わせはかなり標準的であり、非常に一般的です。

ブラウザのWebRTCはAACコーデックをサポートしていないため、 AACをOpusに、またはAACをG.711にトランスコードする必要があります。 Opusでのトランスコーディングは最高の品質を提供し、必要に応じて、設定を使用してさらに高くそれを緩めることができます。したがって、トランスコーディングする場合は、 Opusで行うことが望ましいです。

サーバーがビデオストリームを受信して WebRTCデバイスから再生するときにH.264を使用するため、ここではトランスコーディングは必要ありませんが、 RTMPで受信したビデオはパケット化を解除してからSRTPパケット化（WebRTC）する必要があります 。再パケット化のプロセスは、トランスコーディングよりも明らかにCPU時間の消費が少ないため、より多くの着信ストリームを処理できます。

ただし、すべてのデバイスがH.264をサポートしているわけではありません。たとえば、Android用のChromeブラウザーは常にこのコーデックを使用するとは限りません。この場合、 VP8 WebRTCコーデックの本格的なトランスコーディングがオンになり、スキームは次のようになります。

サーバー側のトランスコーディングはCPUに大きな負担をかけるため、必要に応じて約1サーバーコアを配置する準備をする必要があります。たとえば、720pなどの高解像度ストリームをトランスコーディングします。

コーダー

このようなプロ仕様のボックスは多額の費用がかかり、プロ仕様の24時間365日放送や深刻なビジネスタスクに必要です。

より単純なイベントをブロードキャストするには、ソフトウェアソリューションが適しています。その1つは、Adobeの無料のLive Media Encoderです。

Mac OSのエンコーダバージョンは、H.264およびAACコーデックをサポートしています 。そのため、MacでLive Media Encoderを使用する場合、何らかの意味で、同じコーデックを使用してRTMPをネットワークにブロードキャストできるハードウェアエンコーダーまたは有料ソフトウェアの代わりになる可能性があります。

テスト中

まず、ストリームが使用可能であり、RTMPで再生されていることを確認します。 RTMPの再生で問題がなく、ストリームが配置されている場合、WebRTCを介して接続します。

ビデオストリームをサーバーにストリーミングするプロセスはパブリッシングと呼ばれ、少なくとも次のものが必要です。

使用するカメラを選択します。
RTMPストリーム発行アドレスを指定します

例：

rtmp：//192.168.88.59/live
ストリーム名を指定する

例：

ストリーム2229

サーバーのアドレスが正しい場合は、カメラにアクセスできます。[ スタート ]ボタンをクリックすると、エンコーダーはRTMPを介してサーバーへの接続を取得し、指定されたアドレスに指定された名前stream2229でビデオストリームのパブリッシュを開始します。

次に、RTMPを介してサーバーからビデオストリームを取得する必要があります。これを行うには、このリンクからも入手できる単純なFlashアプリケーションFlash Streamingを使用します。これは通常のフラッシュドライブ（swfファイル）で、Webページにあり、Adobe Flash Playerで実行されます。したがって、このテストのためにシステムにFlash Playerがインストールされ、使用可能であることを確認してください。

ここで、同じデータを入力する必要があります：RTMPストリームのアドレスとその名前。その結果、Webページでビデオを取得します。 Flash Playerによって再生されます。

さらに、目標はWebRTCを使用して再生をテストすることであり、Flashでの再生はRTMPエンコーダーと翻訳サーバーの動作を確認する中間テストに過ぎなかったことを思い出します。

テストでは、ビデオストリームWebRTCプレーヤーを使用します。サーバーへの接続にWebsocketsプロトコルが使用され、アドレスは次のようになるため、このプレーヤーはRTMPアドレスを必要としません。wss：//192.168.88.59：8443

ここに：

wssはSSLを介したWebソケットです

192.168.88.59-WebRTCサーバーアドレス

8443-Websocket SSLプロトコルのサーバーポート

ストリームの名前としてstream2229を指定したら、[ 再生 ]をクリックして、WebRTCで既に画像を取得します。

サーバーへの接続がWebsocket経由であり、ポートが8443であるにもかかわらず、ビデオトラフィックはこの接続を経由しないことに注意してください。ブラウザーおよびサーバー側でビデオ用に特別なビデオポートが開かれ、これらの開かれたUDPポートを介してビデオが送信されます。 Websocketを介して、簡単な再生コマンド、ステータス、コーデックの設定、およびWebRTCにとって重要なその他の情報が送信されます。

WebRTCビデオトラフィックがどのように着信するかを確認するには、Google Chromeブラウザーを使用し、再生中にchromeを開きます：// webrtc-internals

グラフは、受信したビデオストリームのビットレートが約600 kbps、フレームレートが28〜30 FPSであることを示しています。

次のグラフは、失われたUDPパケットの数（50）、1秒あたりのパケット受信レート、ビデオストリームの解像度640x480、ジッター、およびデコード時間に関する情報を提供します。

したがって、Adobe Live Media EncoderからHTML5に送信されたRTMPビデオストリームの再生をテストしました。これは、WebRTCをサポートするブラウザーのページであり、追加のブラウザープラグインは使用しませんでした。テストは、着信RTMPストリームをサポートするWeb Call Server 5で行われ、RTMP、WebRTC、およびその他のプロトコルを介したその後の配信が行われました。

ページコード-WebRTCプレーヤー

Webページに埋め込むための最小プレーヤーコードは次のようになります

<html> <head> <script language="javascript" src="flashphoner.js"></script> <script language="javascript" src="player.js"></script> </head> <body onLoad="init()"> <h1>The player</h1> <div id="remoteVideo" style="width:320px;height:240px;border: 1px solid"></div> <input type="button" value="start" onClick="start()"/> <p id="status"></p> </body> </html>

このコードは、 Web SDKアセンブリで使用可能なflashphoner.js API ファイルに依存しています。プレーヤー自体はremoteVideo div要素に埋め込まれます。

player.jsスクリプトは、 Flashphoner.init（）を使用した初期化、 Flashphoner.createSession（）を使用したサーバーへの接続の作成、WebRTCビデオストリームの再生session.createStream（...）。Play（）の 3つの関数を使用します。

サーバーの接続状態は、ESTABLISHED、DISCONNECTED、FAILEDのイベントを使用して追跡されます。

ビデオストリームのステータスは、PLAYING、STOPPED、FAILEDイベントを使用して追跡されます。

したがって、サーバーへの接続とビデオストリームのステータスを完全に制御できます。

 var remoteVideo; function init(){ Flashphoner.init(); remoteVideo = document.getElementById("remoteVideo"); } function start() { Flashphoner.createSession({urlServer: "wss://wcs5-eu.flashphoner.com:8443"}).on(Flashphoner.constants.SESSION_STATUS.ESTABLISHED, function (session) { //session connected, start streaming startPlayback(session); }).on(Flashphoner.constants.SESSION_STATUS.DISCONNECTED, function () { setStatus("DISCONNECTED"); }).on(Flashphoner.constants.SESSION_STATUS.FAILED, function () { setStatus("FAILED"); }); } function startPlayback(session) { session.createStream({ name: "stream2229", display: remoteVideo, cacheLocalResources: true, receiveVideo: true, receiveAudio: true }).on(Flashphoner.constants.STREAM_STATUS.PLAYING, function (playStream) { setStatus(Flashphoner.constants.STREAM_STATUS.PLAYING); }).on(Flashphoner.constants.STREAM_STATUS.STOPPED, function () { setStatus(Flashphoner.constants.STREAM_STATUS.STOPPED); }).on(Flashphoner.constants.STREAM_STATUS.FAILED, function () { setStatus(Flashphoner.constants.STREAM_STATUS.FAILED); }).play(); } function setStatus(status) { document.getElementById("status").innerHTML = status; }

WebRTCプレーヤーの最小コードは、このリンクからダウンロードでき、WebRTCサーバーWeb Call Server 5が動作する必要があります。サーバーは、Linuxホストhttps://flashphoner.com/downloadにダウンロードしてインストールするか、Amazonのイメージとして起動できます。 EC2

動作中の最小WebRTCプレーヤーコード

上記のプレーヤーの例とスクリーンショットには、写真を配置するための追加のスタイルとスクリプトが含まれていました。

最小限のコードでは、サイトページで最速の実装を行うために、最も単純なHTMLと簡略化されたスクリプトに限定しました。結果は次のようになります。

このプレーヤーは、サイトまたはプロジェクトの任意のWebページに統合できます。 flashphoner.js API スクリプトと、Webページ上のビデオ用の1つのdivブロックを含めるだけです。

WebRTCと連携するサーバーは、別の独立したマシンに物理的に常駐でき、Webプロジェクトのホスティングとは一切接続されません。

その結果、WebRTCプレーヤーのコードを説明し、プレーヤーをWebサイトのWebページに埋め込み、独自のWebサーバーに展開する方法を示しました。プレーヤーはWebRTC H.264ビデオストリームを再生します。 RTMPストリームのソースはAdobe Live Media Encoderです。

参照資料

Adobe Flash Media Encoder -RTMPをストリーミングできるAdobeのエンコーダー。

Flash Streaming Demo -RTMPストリームをFlash Playerで再生します。

Playerは、ソースコードを使用したWebRTCプレーヤーの標準的な例です。

Player Minimal-最小限のプレーヤーWebRTC player.htmlおよびplayer.jsのスクリプトをダウンロードします

WebRTCサーバー -RTMPストリームをWebRTC経由で中継するためのWeb Call Server 5サーバー。

Web SDK-アセンブリにはflashphoner.jsが含まれています -プレーヤーのAPIファイル。

Live EncoderからWebRTCへのRTMPビデオストリームのブロードキャスト