streaming html5ダウンロード - streaming html5ソースコードのダウンロード

streaming html5

FLASHソースコード

14.0.0.2 build of Mastiff

ダウンロード

要件•公開•購読

RED5 Pro HTMLストリーミングテストベッド

このリポジトリには、RED5 Pro Webrtc SDKのテストと参照に使用できる多くの例を備えた簡単なプロジェクトが含まれています。

要件

クライアントブラウザー（モバイル＆デスクトップ）が接続するために、機能的なRed5 Pro Server Web-（または局所的に）アクセス可能で実行される機能が必要です。

詳細については、https：//www.red5.net/をご覧ください。

ブラウザのコンプリティ

RED5 Pro webrtc SDKは、ストリーミングソリューション（公開と購読の両方）にWeBRTCを利用することを目的としていますが、ネイティブなサポート（モバイルやデスクトップSafariなど）をサポートするブラウザのHLSサポートも提供します。

ブラウザのコンピュータリティの詳細については、Caniuse.comのWeBRTCピア接続情報で見ることができます。

出版社

Red5 Proのコンテキストでのパブリッシャーという用語は、ブロードキャストストリームを作成するクライアントを指します。 SDKには、パブリッシャーを開始するために利用できるインスタンスには2つのタイプがあります。

WHIPClient WHIPClient 、webrtc -http摂取プロトクルに依存して、一連のHTTP/s要求を通じて接続を確立します。
RTCPublisher RTCPublisherは、ブロードキャストセッションを確立するためにWebSocket接続に依存しています。

WHEPClient接続シーケンスは非常に高速です-〜1秒 - WebSocketへの依存のため、 RTCPublisher 、ストリーミングへの接続に約3〜5秒かかる場合があります。

サブスクライバー

Red5 Proのコンテキストでのサブスクライバーという用語は、すでにライブブロードキャストストリームを消費して再生するクライアントを指します。 SDKには、サブスクライバーを起動するために使用できるインスタンスには3つのタイプがあります。

WHEPClient WHEPClient 、webrtc -http出力プロトコルに依存して、一連のHTTP/s要求を通じて接続を確立します。
RTCSubscriber RTCSubscriberは、ブロードキャストセッションを確立するためにWebSocket接続に依存しています。
HLSSubscriber HLSSubscriberは、 HLSストリーム（モバイルやデスクトップSafariなど）を再生するネイティブ能力に依存しています。

WHEPClient接続シーケンスは非常に高速です-〜1秒 - WebSocketへの依存のためにRTCPublisher 、ストリーミングへの接続に約3〜5秒かかる場合があります

HLSSubscriber接続シーケンスを通過せず、サーバーからHLSを直接ストリーミングしますが、ライブセグメントの長さにより最大6秒のレイテンシーがあります。

注： WHIPClientとWHEPClient 、RED5 Pro Webrtc SDKの11.0.0リリースで導入されました。

設定

[設定]ページからホストフィールドを変更して、サーバーインスタンスのIPアドレスを指す必要があります。そうしないと、構築するときに例は機能しません。サーバーをローカルで実行している場合は、マシンとモバイルデバイスが同じWiFiネットワーク上にある必要があります。

TLSおよびCORに注意してください

これらの例のいくつか、具体的にはWeBRTCを使用して公開することを伴う例は、TLSで実行する必要があり、したがって、HTTPSを介して提供することに注意することが重要です。 localhostで例を実行している場合は問題が表示されないはずですが、サーバーがリモートでデプロイされている場合は、これらの例がHTTPSを介して提供され、適切なCross Origin Resource Sharing（CORS）設定がサーバーに定義されていることを確認する必要があります。

Red5 ProおよびSSLの詳細をご覧ください。
CORの詳細。

説明書

サーバーインスタンスのIPアドレスを定義するには、ブラウザでテストベッドWebAppを開き、起動時に表示されない場合は[設定]ページに移動します。設定にアクセスするには、上部にある例リストからホームアイテムを選択します。

ServerインスタンスのIPでホストを定義するには、フォームのホストフィールドをクリックして、ローカルまたはリモートIPアドレス（ 10.0.0.5 76.199.199.199に入力します。

ヒント：ポート5080 （つまり、 http://localhost:5080ローカルで起動する場合）でサーバーインスタンスのランディングページを開くこともできます。ページには、右上隅にIPが表示されます。

whip/whep設定オプション

[設定]ページからWhip/Whepを好むように選択できます。このオプションを選択することにより、すべてのテストは、それぞれ公開とサブスクライティングにWHEPClientとWHIPClient利用します。

WHIP/WHEPオプションを解除することを決定した場合、すべてのテストは、それぞれ公開およびサブスケビングのためにRTCPublisherとRTCSubscriber使用に戻ります。これらのインスタンスでは、交渉段階でブラウザでWebSocketサポートが必要です。接続が行われると、メッセージングトランスポートシステムはRTCDataChannelに切り替えられ、WebSocketが閉じられます。

例

出版

出版社
Basic Publisherの例Webrtcを使用した例。Webrtc-HTTP摂取（別名、 `WHIP` ）または`WebSockets`いずれかを使用して、ブロードキャスト接続を確立するオプションを使用します。

1080p
高品質の出版社。

追加
Appendオプションを使用して、サーバーにストリームを記録することを示します。

認証
公開用のSimple-Auth-Pluginを使用した認証を示します。

カメラソース
公開する目的のカメラを選択することを示します。

カメラの交換
モバイルデバイスの背面および前面カメラと、 `facingMode` Media Contraintsをサポートするブラウザに基づいて、制約のための定義された`video`ソースを使用した`MediaStream`のリクエストを実証します。

カスタム設定
WeBRTCパブリッシャーのメディアブロードキャスト設定をカスタマイズできます。

カスタムオーディオ設定
WeBRTCパブリッシャーのオーディオ設定をカスタマイズできます。

MediaStreamスワップ
`replaceTrack`を使用して、WeBRTCベースのパブリッシャーのために異なるカメラソースを動的に交換することを示します。

画像キャプチャ
公開されているライブビデオの画像をキャプチャすることを示しています。

ミュート
公開されているライブビデオ用のミュートとアンミューティングオーディオ。

記録
VOD（ビデオオンデマンド）再生のためにサーバーにストリームを記録することを示します。

追加
VOD（Video-on-Demand）再生のためのサーバーへのストリームをレコードアドアンド機能に示します。

リモートコール
サブスクライブされたすべてのクライアントにリモートメッセージを送信することを示します。

往復認証
RED5 Proで往復認証を利用する例。

画面共有
ChromeとFirefoxの画面共有機能を利用する例。サブスクライブ画面共有の例で使用します。

共有オブジェクト
リモート共有オブジェクトを使用して、接続されたクライアント間で情報を送信および受信することを示します。

ソーシャルメディアストリームプッシュ
ソーシャルメディアプラットフォームにライブストリームを再放送する例。

VP8
パブリッシュでVP8ビデオコーデックを要求する例

公開 - ストリームマネージャーの例

ストリームマネージャー
RED5 Pro Stream Manager APIを利用して、自動拡張クラスターの起源に公開することを示します。

ストリームマネージャーのプロキシ
RED5 Pro Stream ManagerをSSL Websocket Proxyとして利用して、WeBRTCを自動拡張クラスターの起源に公開することを実証します。

ストリームマネージャープロキシカメラ選択
RED5 Pro Stream ManagerをSSL Websocket Proxyとして利用して、WeBRTCをカメラセレクトを使用して自動化学クラスターの起源に公開することを実証します。

ストリームマネージャーのプロキシ設定
RED5 Pro Stream ManagerをSSL Websocket Proxyとして利用して、自動化学クラスターの起源にカスタムビデオ設定を備えたWeBRTCを公開することを示します。

オーディオ付きのストリームマネージャープロキシ設定
RED5 Pro Stream ManagerをSSL Websocket Proxyとして利用して、自動拡張クラスターの起源にカスタムオーディオ設定を備えたWeBRTCを公開することを示します。

Stream Manager Proxy Round Trip Authincionion
Red5 Proを使用してRed5 Proを使用してRed5 Proを使用して往復認証を使用する例。

ストリームマネージャープロキシ画面共有
ChromeとFirefoxの画面共有機能を利用する例。 Stream Managerで使用するために、画面共有の例をサブスクライブします。例。

ストリームマネージャープロキシソーシャルメディアストリームプッシュ
ソーシャルメディアプラットフォームにライブストリームを再放送する例。

ストリームマネージャートランスコードプロビジョニングフォーム
ABRブロードキャストのStream Managerに新しいプロビジョニングを投稿する簡単なフォームを提供します。プロビジョニングが投稿されたら、お気に入りのメディアエンコーダーを使用してバリアントをブロードキャストします。

Stream Manager Proxy Transcoder
ABRブロードキャストのStream Managerに新しいプロビジョニングを投稿し、Transcoderを使用して単一のバリアントブロードキャストを開始する簡単なフォームを提供します。

認証を備えたStream Manager Proxy Transcoder
ABRブロードキャストのStream Managerに新しいプロビジョニングを投稿し、認証を含むTranscoderを使用して単一のバリアントブロードキャストを開始する簡単なフォームを提供します。

ストリームマネージャーのプロキシ検証
Red5 Proで検証パラメーターを使用して、Stream Manager Proxyを使用する例。

マルチ

双方向
サブスクライブ中に同時に公開します - 会話を許可します。ストリーム検出と自動接続が含まれます。

双方向のストリームマネージャープロキシ
プロキシの使用を含む、ストリームマネージャーを介した双方向の例。ストリーム検出と自動接続が含まれます。

会議
Red5 Proを使用したマルチパーティ通信を示します。また、共有オブジェクトを通知として使用して、当事者の放送の追加と削除を認識することを実証しています。

会議 - ストリームマネージャー
Red5 Pro over Stream Managerを使用して、マルチパーティ通信を示します。また、共有オブジェクトを通知として使用して、当事者の放送の追加と削除を認識することを実証しています。

共有オブジェクト（websocketsのみ）
RED5 Pro HTML SDKからのWebsocketプロキシを介して共有オブジェクトの使用を実証します。

サブスクライバー
フェールオーバーの基本的なサブスクライバーの例。つまり、WeBRTCブラウザのサポートがない場合、最初のフラッシュプレーヤーが検出され、次にHLSが検出されます。

360
360カメラストリームを購読する例

オーディオのみ
オーディオのみのストリームの再生を示します。

認証
購読のためのSimple-Auth-Pluginを使用した認証を示します。

画像キャプチャ
消費されているライブビデオの画像をキャプチャすることを示しています。

クラスタ
RED5 Pro Cluster APIからIPにアクセスすることを実証して、ライブストリームを登録します。

HLS
これは、HLSのみを使用してストリームを購読する例です。 HLSがブラウザによってネイティブにサポートされていない場合、HLS.JSサードパーティライブラリが利用されます。

画像キャプチャ
この例では、 `CanvasRenderingContext2D`の`drawImage` APIを使用して、再生の静止画をキャプチャすることを示しています。

リモートコール
放送局からリモートメッセージを受信することを示します。

無効な名前で再試行します
Intializingの後に`subscribe`要求からエラー時にWebSocket接続を維持するために、サブスクライバーの`maintainConnectionOnSubscribeErrors`構成プロパティを使用しています。

往復認証
Red5 Pro over Stream Manager Proxyを使用して往復認証を利用する例

購読 - ストリームマネージャーの例

ストリームマネージャー
RED5 Pro Stream Manager APIを利用し、SSL Websocket Proxyとして機能することを実証して、Edge Server IPにアクセスしてライブストリームをサブスクライブします。

ストリームマネージャーのプロキシ
Red5 Pro Stream Manager APIを使用してEdge Server IPにアクセスしてライブストリームを購読することを示します。

Stream Manager Proxy Reconnect
RED5 Pro HTML SDKのフェールオーバーメカニズムを実証して、ブラウザーのサポートに基づいてサブスクライバーを選択し、ブロードキャストの閉鎖または接続の損失で自動再接続します。

ストリームマネージャープロキシ地域
Red5 Pro Stream Manager APIを使用してEdge Server IPにアクセスしてライブストリームを購読することを示します。

ストリームマネージャープロキシラウンドトリップ認証
指定された領域の往復認証を使用した購読を示します。

Stream Manager Proxy Transcoder（RTC）
RED5 Pro Stream Manager APIを利用して、Accedive Bitrateコントロールを備えたライブWEBRTCベースのストリームをサブスクライブするために、Red5 Pro Stream Manager APIとEdge Server IPにアクセスします。

Stream Manager Proxy Transcoder（RTMP）
RED5 Pro Stream Manager APIを利用して、Accestive Bitrateコントロールを備えたライブフラッシュベースのストリームをサブスクライブするために、Red5 Pro Stream Manager APIとAccess ProgisionsとEdge Server IPにアクセスします。

Stream Manager Proxy Transcoder（HLS）
RED5 Pro Stream Manager APIを利用して、Accedive Bitrateコントロールを備えたライブHLSベースのストリームを購読するために、Red5 Pro Stream Manager APIとEdge Server IPにアクセスすることを実証します。

ストリームマネージャープロキシ画面共有
ChromeとFirefoxの画面共有機能を利用する例。パブリッシュ画面共有の例で使用します。

ミキサー - ストリームマネージャーの例

Stream Manager Proxy Conference参加者
Red5 Pro Stream Manager APIを利用して、単一の返品ストリームを使用してビデオ会議に参加することを示します。

Stream Manager Proxy Conferenceホスト
Red5 Pro Stream Manager APIを利用して、単一の返品ストリームを使用してビデオ会議をホストおよび管理することを示します。

ストリームマネージャーグリッド構成ホスト
Red5 Pro Stream Manager APIを利用して、いくつかのライブストリームの構成を1つのストリームに作成および管理することを示します。

ストリームマネージャー2x2グリッドレイアウトの例
ライブストリームのセットを2x2グリッドに構成することを実証します。2x2グリッドは、Red5 Proミキサーにロードして、最大4つのストリームの構成を作成できます。

ストリームマネージャー3x3グリッドレイアウトの例
ライブストリームのセットを3x3グリッドに構成することを実証し、RED5 Proミキサーにロードして最大9ストリームの構成を作成できます。

ストリームマネージャーNXNグリッドレイアウトの例
ライブストリームのセットをNXNグリッドに構成することを示します。これは、新しいストリームが追加されると自動的にサイズを変更できます。ページをRED5 Proミキサーにロードして、多くのストリームを備えた構成を作成できます。

ストリームマネージャーカンファレンスレイアウト
プレゼンターが強調表示されているビデオ会議のために、一連のライブストリームをフォーカスレイアウトに作成することを示します。ページをRED5 Proミキサーにロードして、単一の返品ストリームを備えたビデオ会議を作成できます。

メモ

サブスクライバーの例については、設定のストリーム1名フィールドに基づいて現在公開および名前が付けられているライブストリームが必要です。別のデバイスを使用してこのWebAppを使用してストリーミングを開始することも、Webブラウザーを使用してFlash、http：// your_red5_pro_server_ip：5080/liveで公開することもできます。
http：// your_red5_pro_server_ip：5080/live/subscribe.jspに移動することにより、アクティブストリームのリストを見ることができます（公開を開始した後、このページを更新する必要があります）。
http：// your_red5_pro_server_ip：5080/を開き、ページの上部に印刷されたIPを見つけることにより、Red5 Pro ServerインストールのサーバーIPにアクセスできます。
サーバーをローカルで実行している場合を除き、WeBRTC Publishingには有効なSSL証明書が必要です。

拡大する

追加情報