Clever Geek Handbook

WebRTCでVODを実行した理由







VODは、ビデオオンデマンド、つまり YouTubeまたは別のストリーミングサービスで行われているように、通常の動画を再生します。 WebRTCは、低遅延のリアルタイムビデオです。 あなたは尋ねることができます-これら2つのものはどのように接続できますか？ 詳細については、猫の下に来てください。



サポートとバグ修正



いつものように、それはすべてサポートから始まりました。 私たちは、おそらくインドのアウトソーシング会社からの女性プログラマーからアプローチを受けました。このプログラマーは、遠隔医療用のモバイルアプリケーションの開発に参加しました。 クライアントの希望の1つは、iOSアプリケーションからWebRTCビデオチャットを記録し、その後に同じiOSアプリケーションで再生することでした。 この記録は機能しましたが、標準のiOS SDKツールを使用して再生すると、緑色のアーティファクトが検出されました。 より正確には、アーティファクトでさえありませんが、画面の3/4を占める緑色の非常に明確な長方形の領域です。 もちろん、これは良くありませんでした、そして、我々は問題を研究し始めました。









記録されたWebRTCビデオをAVPlayerViewControllerで再生します



モバイルビデオ再生アプリケーションでは、 http：//host/sample.mp4などのhttp URLを指定すると、mp4ムービーを再生できる標準のMPMoviePlayerまたはAVPlayerViewControllerコンポーネントを使用しました 。 これらのコンポーネントは通常MP4ビデオを再生しましたが、iOSアプリケーションから記録されたブロードキャストの場合、緑の領域はどこにも消えず、すべてを台無しにしました。



WebRTCは、ストリームの解像度を動的に変更します



記録内の緑のアーティファクトは、WebRTCの場合、ビデオの解像度をオンザフライで変更するのが普通であるという事実によることが判明しました。 同時に、mp4記録ファイルには、さまざまなサイズのすばらしいフレームがあります。より正確には、まず1つのサイズ640x480、次に別の320x240などのシーケンスがあります。 このようなトリックは、たとえばVLCにより、アーティファクトなしで非常にうまく機能します。また、HTTPを介したiOSの組み込みビデオ再生コンポーネントは、ビットストリームのビデオ解像度を変更するときに緑色のアーティファクトを与えます。



iOSアプリケーションからブロードキャストを開始して、これが正しいことを確認してください。 テストには、iOS SDK -WCS5-EUデモサーバーに基づく双方向ストリーミングの iOS用モバイルアプリケーションを使用できます。



これは、サーバーにストリームをストリーミングするアプリケーションです。









そして、モバイルアプリケーションから送信されたビデオの解像度が時間内に変更されたように見えます。









ビデオストリームモニタリンググラフから、ビデオの圧縮、ネットワークとの連携などのモバイルデバイスの機能に応じて、画像の解像度が動的に変化することがわかります。 WebRTCは、低遅延をターゲットにするために解像度を変更します。



ソリューションとしてのWebRTC VOD



この状況から抜け出す方法は、トランスコーディング、つまり フレームのデコード、640x480などの単一の解像度への変換、この解像度での記録。 しかし、サーバーにパブリッシュされるすべてのストリームでこれを行うと、CPUリソースは10〜20のビデオストリームですぐに使い果たされます。 したがって、トランスコーディングを伴わない何らかのソリューションが必要でした。



WebRTCがこのような解像度の変更を伴うビデオをストリーミングする場合、この方法で記録されたビデオを再生できるはずです。 mp4ファイルを読み取り、WebRTCブラウザーまたはモバイルアプリケーション経由でフィードすると、すべてが正常になり、iOSアプリケーション画面の緑色の四角形が消えるはずです。



記録されたmp4の読み出しと、WebRTCへのさらなる変換のためのWeb Call Serverエンジンへの転送を実装することは残っています。 最初のテストは良い結果を示しました-緑の長方形は消えました。



そのため、WebRTCだけでなく、サポートされているすべてのプロトコルとテクノロジー（RTMP、RTMFP、RTSP、HTML5キャンバス、メディアソース、HLS、WebRTC）を介した再生でVODを取得しました。



WebRTC VOD-ライブブロードキャスト



その後、「ユーザーがビデオをストリームとして一度に同時にブロードキャストしたい場合はどうなりますか？」という疑問が生じました。



その結果、2種類のVODを作成する必要がありました。



最初は個人のVODです。 ビデオを再生するユーザーごとに、ビデオの最初からビデオを再生するための個別のチャネルが作成されます。



2つ目はライブVODです。 ユーザーが動画の再生を開始し、2人目のユーザーが後で接続した場合、ユーザーはリアルタイムで動画をライブブロードキャストとして視聴します。 サーバーは、ビデオから正確に1つのストリームをストリーミングします。このストリームには、両方のユーザーが接続され、たとえば、サッカーの試合を観戦し、プレーヤーのアクションについてコメントすることができます。



プレーヤーとAPIで、ストリームを再生するには、その名前を知る必要があります。



VODについては、次のスキームを導入しました。



ビデオを直接再生する場合は、次のようにストリーム名を転送します。 



vod://sample.mp4


ビデオから本格的なオンラインブロードキャストを作成する場合、ストリーム名は次のようになります。 



 vod-live://sample.mp4


sample.mp4ファイル自体は、WCS_HOME /メディアサーバーフォルダにあり、MP4 / H.264 + AAC形式である必要があります。



iOSアプリケーションはどうなりましたか？ -あなたが尋ねます。



すべて順調です。 iOSアプリケーションは、緑の長方形なしでWebRTCでVODビデオを再生します。



Web PlayerのWebRTC VOD



次に、WebRTC VODがWeb上でどのように見えるかを見てみましょう。 これを行うには、サーバー側で、mp4ファイルを/ usr / local / FlashphonerWebCallServer / mediaフォルダーにコピーします。 有名なビッグバックバニー、sample.mp4にします。



テストプレーヤーでページを開き、ストリームvodの名前を示します：//sample.mp4をクリックし、[今すぐテスト]をクリックします。









プレーヤーはWebRTCを介してストリームの再生を開始します。 chrome：// webrtc-internalsでは、再生グラフを見ることができます：









最後に、物語はうまく終わりました。 iOSアプリケーションでブロードキャストのmp4記録を再生するときの緑色の画面のバグを修正し、iOSおよびAndroidを実行しているWebブラウザーおよびモバイルデバイス用のWebRTC-VOD機能を作成しました。



参照資料



  1. 双方向ストリーミングストリーミング iOSテストアプリ
  2. Webプレーヤー -VODを再生するプレーヤーの例-WebRTCストリーム
  3. WebRTC経由でmp4クリップを配布するWeb Call Server 5
  4. iOS用WebRTC SDK -iOS用のストリーミングアプリケーションを開発するためのライブラリ


More articles:


All Articles