Geekly Articles each Day

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を介しお接続したす。

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

  1. 䜿甚するカメラを遞択したす。
  2. RTMPストリヌム発行アドレスを指定したす
    䟋
    rtmp//192.168.88.59/live
  3. ストリヌム名を指定する
    䟋
    ストリヌム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ファむル。

Source: https://habr.com/ru/post/J327214/

More articles:


All Articles