streaming html5

要求•發布•訂閱

RED5 PRO HTML流測試床

該存儲庫包含一個簡單的項目，其中包含許多示例，可用於測試和參考Red5 Pro WebRTC SDK。

要求

您將需要一個功能性的運行Red5 Pro服務器Web（或本地）訪問客戶端瀏覽器（移動和桌面）才能連接到。

有關更多信息，請訪問https://www.red5.net/。

瀏覽器的複雜性

RED5 Pro WEBRTC SDK旨在利用WEBRTC用於其流媒體解決方案（出版和訂閱），但也為瀏覽器提供了HLS支持（例如，移動和桌面Safari）。

有關瀏覽器複雜性的更多信息，請訪問webrtc對等康納恩（Caniuse.com）上的信息。

出版商

在Red5 Pro的上下文中，術語發布者是指生產廣播流的客戶端。 SDK中有兩種類型的實例可以用於啟動發布者：

1. WHIPClient - WHIPClient依賴於WEBRTC -HTTP攝入原始量來通過一系列HTTP/S請求建立連接。
2. RTCPublisher RTCPublisher依靠WebSocket連接來建立廣播會話。

WHEPClient連接序列非常快-〜1秒 - 而RTCPublisher由於其依賴WebSocket的依賴，大約需要3-5秒才能獲得流的連接。

訂戶

在Red5 Pro的背景下，術語訂閱者是指消耗並播放已經實時廣播流的客戶。 SDK中有三種類型的實例可以用來啟動訂戶：

1. WHEPClient WHEPClient依靠WEBRTC -HTTP出口協議來通過一系列HTTP/S請求建立連接。
2. RTCSubscriber RTCSubscriber依靠WebSocket連接來建立廣播會話。
3. HLSSubscriber HLSSubscriber依賴於播放HLS流的本地能力（例如，移動和桌面Safari）。

WHEPClient連接序列非常快-〜1秒 - 而RTCPublisher由於其對WebSocket的依賴，大約需要3-5秒

HLSSubscriber不會通過連接序列並直接從服務器流式傳輸HLS，但是由於其實時段的長度，它確實具有高達6秒的延遲。

注意： WHIPClient和WHEPClient是在RED5 Pro WebRTC SDK的11.0.0發行中引入的。

設定

您需要將主機字段從設置頁面進行修改，以指向服務器實例的IP地址。如果您不這樣做，則構建時示例將不起作用。如果您在本地運行服務器，則您的計算機和移動設備需要在同一WiFi網絡上。

關於TLS和CORS的註釋

重要的是要注意，其中一些示例（特別是涉及使用WEBRTC發布的示例）需要在TLS上運行，因此可以通過HTTPS運行。如果在localhost上運行示例，則不應該看到問題，但是如果遠程部署服務器，則需要確保通過HTTPS提供這些示例，並且為服務器定義了適當的交叉原點資源共享（CORS）設置。

• 閱讀有關Red5 Pro和SSL的更多信息。
• 有關CORS的更多信息。

指示

要定義服務器實例的IP地址，請在瀏覽器中打開測試床WebApp，並在啟動時導航到設置頁面。要訪問設置，請從位於頂部的示例列表中選擇“主項目”。

要使用服務器實例的IP來定義主機，請單擊“主機”字段f form f，然後輸入本地或遠程IP地址 - 例如， 10.0.0.5 76.199.199.199

提示：您還可以在端口5080上打開服務器實例的著陸頁（即， http://localhost:5080 ，如果本地啟動），並且該頁面將在右上角顯示其IP。

WHIP/WHEP設置選項

您可以選擇從“設置”頁面中選擇鞭子/惠普。通過選擇此選項，所有測試將分別利用WHEPClient和WHIPClient來發布和訂閱。

如果您決定取消選擇鞭子/WHEP選項，則所有測試將恢復為使用RTCPublisher和RTCSubscriber分別發布和替補出現。這些實例需要在其談判階段的瀏覽器中的網絡支持。連接建立後，消息傳輸系統將切換到RTCDataChannel ，並且Websocket已關閉。

例子

出版

出版商
基本出版商使用WEBRTC，並選擇使用WEBRTC-HTTP攝入（又名， WHIP ）或WebSockets來建立廣播連接。

1080p
高質量的出版商。

附加
用附錄選項演示將流錄製到服務器的流。

驗證
用簡單的作者插圖證明了用於發布的簡單驗證。

相機來源
演示選擇要發布的所需相機。

相機交換
根據移動設備的後部和前面攝像頭以及支持facingMode媒體違規的瀏覽器，展示了具有定義的video源的MediaStream的請求。

自定義設置
允許您為WEBRTC發布者自定義媒體廣播設置。

自定義音頻設置
允許您自定義WEBRTC Publisher的音頻設置。

MediaStream交換
證明使用replaceTrack將基於WEBRTC的發布者動態交換在不同的相機源中。

圖像捕獲
展示捕獲正在發布的現場視頻的圖像。

沉默的
發表現場視頻的靜音和解開音頻。

記錄
演示將流錄為VOD（視頻點播）播放的服務器。

附加
演示錄音函數的函數流到服務器的VOD（視頻按需）播放。

遠程通話
演示向所有訂閱客戶端發送遠程消息。

往返身份驗證
使用RED5 Pro利用往返身份驗證的示例。

屏幕共享
使用Chrome和Firefox的屏幕共享功能的一個示例。 用於訂閱屏幕共享示例。

共享對象
演示使用遠程共享對像在連接的客戶端之間發送和收到信息。

社交媒體流推動
將直播流到社交媒體平台的重新播放的一個示例。

VP8
在發布上請求VP8視頻編解碼器的示例

出版 - 流管理器示例

流管理器
演示利用RED5 Pro Manager API發佈到自動群集的起源。

流管理器代理
演示將RED5 Pro流管理器作為SSL WebSocket代理，以將WEBRTC發佈到自動群集的起源。

流管理器代理攝像頭選擇
演示使用RED5 Pro Stream Manager作為SSL WebSocket代理，將WEBRTC發佈到Autoscalsing Cluster的起源，並使用Camera Select。

流管理器代理設置
演示將RED5 Pro流管理器作為SSL WebSocket代理，以自定義視頻設置發布WEBRTC，以自動群集的來源。

帶有音頻的流管理器代理設置
演示將Red5 Pro流管理器作為SSL WebSocket代理，以自定義音頻設置發布WEBRTC，以自動群集的來源。

Stream Manager代理往返Authenticaion
使用RED5 PRO通過流管理器代理使用RED5 Pro的往返身份驗證的示例。

流管理器代理屏幕共享
使用Chrome和Firefox的屏幕共享功能的一個示例。與Stream Manager代理訂閱屏幕共享示例一起使用。

Stream Manager代理社交媒體流推動
將直播流到社交媒體平台的重新播放的一個示例。

流管理器Transcode Provision表格
提供了一個簡單的表格，向流管理器以ABR廣播發布新的規定。發布後，使用您喜歡的媒體編碼器來廣播這些變體。

流管理器代理轉碼
提供了一個簡單的表格，向流管理器發布新的ABR廣播並使用Transcoder啟動單個變體廣播。

流Manager代理轉碼與身份驗證
提供了一個簡單的表格，向流管理器以ABR廣播發布新的規定，並使用Transcoder（包括身份驗證）啟動單個變體廣播。

流管理器代理驗證
使用RED5 PRO通過流管理器代理使用RED5 PRO的驗證參數的示例。

多

雙向
在訂閱時同時出版 - 允許對話。包括流檢測和自動連接。

雙向流管理器代理
通過流管理器的雙向示例 - 包括使用代理。包括流檢測和自動連接。

會議
使用RED5 Pro演示多方通信。它還證明使用共享對像作為通知，以識別當事方廣播的添加和刪除。

會議 - 溪流經理
使用RED5 Pro通過流管理器演示多方通信。它還證明使用共享對像作為通知，以識別當事方廣播的添加和刪除。

共享對象（僅WebSockets）
通過RED5 Pro HTML SDK的Websocket代理演示共享對象的使用。

訂閱

訂戶
基本訂戶示例與故障轉移。 即，如果沒有WebRTC瀏覽器支持，則檢測到第一個Flash播放器，則是HLS。

360
訂閱360相機流的示例

僅音頻
演示僅音頻流的播放。

驗證
用簡單的作者插圖來訂閱身份驗證。

圖像捕獲
展示捕獲正在消費的現場視頻的圖像。

簇
演示從RED5 Pro cluster API訪問IP以將其列出為實時流。

HLS
這是僅使用HLS訂閱流的一個示例。如果瀏覽器本地不支持HLS，則使用HLS.JS第三方庫。

圖像捕獲
此示例通過使用CanvasRenderingContext2D的drawImage API來演示捕獲播放的靜止。

重新連接
演示RED5 Pro HTML SDK的故障轉移機制，以根據瀏覽器支持選擇訂戶，並在廣播關閉或連接喪失時自動連接。

遠程通話
演示從廣播公司接收遠程消息。

在無效的名稱上重試
展示了使用訂戶的maintainConnectionOnSubscribeErrors配置屬性，以便在Intializing後在subscribe請求中的錯誤時維護Websocket連接。

往返身份驗證
使用RED5 Pro通過流管理器代理使用RED5 Pro的往返身份驗證的示例

屏幕共享
使用Chrome和Firefox的屏幕共享功能的一個示例。與發布屏幕共享示例一起使用。

共享對象
演示使用遠程共享對像在連接的客戶端之間發送和收到信息。

支持
使用備用API在接收MediaStream上接收視頻和音頻數據時請求“暫停”的示例，同時還保持客戶端與服務器的連接。

流開關
一個示例，證明了通過WEBRTC切換當前訂戶流到另一個實時流。

兩個流
使用Stream1 Name和Stream 2 Name變量從設置頁面頁面上訂閱了兩個流的示例。

視頻靜音
示例以證明訂閱的廣播，該廣播具有“靜音”的視頻流。

VP8
演示要求為播放流提供VP8視頻編碼。

訂閱 - 流管理器示例

流管理器
演示使用RED5 Pro流管理器API並充當SSL Websocket代理，以訪問Edge Server IP以訂閱實時流。

流管理器代理
演示利用Red5 Pro流管理器API訪問Edge Server IP以訂閱實時流。

流管理器代理重新連接
演示RED5 Pro HTML SDK的故障轉移機制，以根據瀏覽器支持選擇訂戶，並在廣播關閉或連接喪失時自動連接。

流管理器代理區
演示利用Red5 Pro流管理器API訪問Edge Server IP以訂閱實時流。

流管理器代理往返身份驗證
使用往返身份驗證（指定區域）證明訂閱。

Stream Manager代理Transcoder（RTC）
演示利用RED5 Pro Manager API訪問配置和Edge Server IP訂閱具有自適應比特率控件的基於實時WEBRTC的流。

Stream Manager代理Transcoder（RTMP）
演示利用Red5 Pro Manager API訪問“配置”和Edge Server IP訂閱具有自適應比特率控件的基於實時閃存的流。

Stream Manager代理Transcoder（HLS）
演示利用RED5 Pro Manager API訪問配置和Edge Server IP訂閱具有自適應比特率控件的基於HLS的流。

流管理器代理屏幕共享
使用Chrome和Firefox的屏幕共享功能的一個示例。與發布屏幕共享示例一起使用。

混音器 - 流管理器示例

Stream Manager代理會議參與者
展示使用RED5 Pro Manager API加入帶有單個返回流的視頻會議。

Stream Manager代理會議主持人
展示利用RED5 Pro Manager API主持和管理帶有單個返回流的視頻會議。

流管理器電網組成主機
演示利用Red5 Pro Manager API將幾個實時流的組成創建和管理到單個流中。

流管理器2x2網格佈局示例
演示將一組直播流組成2x2網格，可以將其加載到Red5 Pro混合器中，以創建最多4個流的構圖。

流管理器3x3網格佈局示例
演示將一組實時流組成的3x3網格可以加載到Red5 Pro混合器中，以創建最多9個流的構圖。

流管理器NXN網格佈局示例
演示將一組實時流組成到NXN網格中，隨著新流的添加，可以自動調整大小。該頁面可以加載到Red5 Pro混合器中，以創建帶有許多流的構圖。

溪流管理會議佈局
演示將一組直播流構成一個集中的佈局，以重點介紹主持人。該頁面可以加載到Red5 Pro混音器中，以創建帶有單個返回流的視頻會議。

筆記

1. 對於訂戶示例，您需要根據設置的流1個名稱字段進行當前發布和命名的實時流。您可以使用另一個設備開始使用此WebApp開始流式傳輸，也可以使用Web瀏覽器通過Flash，http：// your_red5_pro_server_ip：5080/live發布。
2. 您可以通過導航到http：// your_red5_pro_server_ip：5080/live/subscribe.jsp來查看活動流的列表（在您開始發布後需要刷新此頁面）。
3. 您可以通過打開http：// your_red5_pro_server_ip：5080/並查找頁面上右上方打印的I​​P，可以訪問RED5 PRO服務器安裝的服務器IP-將在設置的主機字段中使用。
4. 除非您在本地運行服務器，否則WEBRTC發布需要有效的SSL證書。