streaming html5

Anforderungen • Veröffentlichung • Abonnieren

Red5 Pro HTML -Streaming Testbed

Dieses Repository enthält ein einfaches Projekt mit einer Reihe von Beispielen, die für das Testen und die Referenz für das Red5 Pro -WEBRTC -SDK verwendet werden können.

Anforderungen

Sie benötigen ein funktionales, ausführender Red5 Pro-Server-Web- (oder lokal), der für den Clientbrowser (Mobile & Desktop) zugänglich ist, um eine Verbindung herzustellen.

Weitere Informationen finden Sie unter https://www.red5.net/.

Browser -Komposition

Der Red5 Pro WebBRTC SDK zielt darauf ab, WEBRTC für seine Streaming -Lösung (sowohl Veröffentlichung als auch Abonnement) zu verwenden, bietet aber auch HLS -Unterstützung für Browser, die es nativ unterstützen (z. B. Mobile und Desktop Safari).

Weitere Informationen zur Browser -Komposition können unter den Webrtc -Peer -Connection -Informationen auf Caniuse.com angezeigt werden.

Herausgeber

Der Begriff Publisher im Kontext von Red5 Pro bezieht sich auf einen Kunden, der einen Broadcast -Stream produziert. Es gibt zwei Arten von Fällen aus dem SDK, die zum Starten eines Verlags verwendet werden können:

1. WHIPClient - Der WHIPClient basiert auf dem Web -HEBRTC -HTTP -Aufnahmeprotocl, um eine Verbindung durch eine Reihe von HTTP/s -Anforderungen herzustellen.
2. RTCPublisher - Der RTCPublisher ist auf eine WebSocket -Verbindung angewiesen, um eine Sendungssitzung einzurichten.

Die WHEPClient -Verbindungssequenz ist sehr schnell - ~ 1 Sekunde -, während der RTCPublisher aufgrund seiner Abhängigkeit von einem WebSocket ungefähr 3 - 5 Sekunden dauern kann, damit eine Verbindung zum Stream verbunden ist.

Teilnehmer

Der Begriff Abonnent im Kontext von Red5 Pro bezieht sich auf einen Kunden, der einen bereits Live -Broadcast -Stream konsumiert und zurückspielt. Es gibt drei Arten von Instanzen aus dem SDK, die zum Starten eines Abonnenten verwendet werden können:

1. WHEPClient - Der WHEPClient basiert auf dem WebRTC -HTTP -Ausgangsprotokoll, um eine Verbindung durch eine Reihe von HTTP/s -Anforderungen herzustellen.
2. RTCSubscriber - Der RTCSubscriber stützt sich auf eine WebSocket -Verbindung, um eine Sendungssitzung einzurichten.
3. HLSSubscriber - Der HLSSubscriber stützt sich auf die native Fähigkeit zur Wiedergabe HLS -Streams (z. B. Mobil- und Desktop -Safari).

Die WHEPClient -Verbindungssequenz ist sehr schnell - ~ 1 Sekunde -, während der RTCPublisher aufgrund seiner Abhängigkeit von einem WebSocket ungefähr 3 - 5 Sekunden dauern kann, damit eine Verbindung zum Stream stream

Der HLSSubscriber durchläuft keine Verbindungssequenz und streamt die HLS direkt vom Server, hat jedoch aufgrund der Länge seiner Live -Segmente eine bis zu 6 Sekunden Latenz.

HINWEIS : Der WHIPClient und WHEPClient wurde in der Veröffentlichung 11.0.0 der Red5 Pro WebBRTC SDK eingeführt.

Aufstellen

Sie müssen das Host -Feld auf der Seite "Einstellungen" ändern, um auf die IP -Adresse Ihrer Serverinstanz zu verweisen. Wenn Sie dies nicht tun, funktionieren die Beispiele beim Erstellen nicht. Wenn Sie den Server lokal ausführen, müssen Ihr Computer- und Mobilgerät im selben WLAN -Netzwerk sein.

Hinweis zu TLS und CORs

Es ist wichtig zu beachten, dass einige dieser Beispiele - insbesondere solche, die die Veröffentlichung mit WEBRTC beinhalten - auf TLS ausgeführt werden müssen und damit somit über HTTPS serviert werden. Wenn Sie die Beispiele auf localhost ausführen, sollten Sie keine Probleme sehen. Wenn Ihr Server jedoch remote bereitgestellt wird, müssen Sie sicherstellen, dass diese Beispiele über HTTPS und die ordnungsgemäßen CORS -Ressourcenfreigabe (Cross Origin Resource Sharing) bedient werden, die für den Server definiert sind.

• Lesen Sie mehr über Red5 Pro und SSL.
• Weitere Informationen zu CORs.

Anweisungen

Um die IP -Adresse der Serverinstanz zu definieren, öffnen Sie den Teststand in einem Browser und navigieren Sie zur Seite "Einstellungen" , wenn Sie beim Start nicht angezeigt werden. Um auf die Einstellungen zurückzugreifen, wählen Sie das Home -Element aus der Beispielliste oben oben.

Um den Host mit der IP der Serverinstanz zu definieren, klicken Sie auf das Formular des Hosts f das Formular und geben Sie in die lokale oder Remote -IP -Adresse ein - z. B. 10.0.0.5 , 76.199.199.199 .

Hinweis: Sie können auch die Zielseite Ihrer Serverinstanz unter Port 5080 öffnen (dh http://localhost:5080 wenn sie lokal gestartet werden), und auf der Seite wird die IP in der oberen rechten Ecke angezeigt.

Peitschen-/Weip -Einstellungsoption

Sie können auswählen, um Peitsche/Weip auf der Seite "Einstellungen" zu bevorzugen. Durch die Auswahl dieser Option werden alle WHEPClient zum Veröffentlichen bzw. WHIPClient .

Wenn Sie sich entscheiden, die Option für Peitsche/WHEP abzuwählen, werden alle Tests zur Verwendung des RTCPublisher und RTCSubscriber zur Veröffentlichung bzw. Subscibing zurückgeführt. Diese Instanzen erfordern während ihrer Verhandlungsphase die Unterstützung von Websocket im Browser. Sobald die Verbindung hergestellt ist, wechselt das Messaging -Transportsystem auf RTCDataChannel und das Websocket ist geschlossen.

Beispiele

Veröffentlichung

Herausgeber
Basic Publisher Beispiel Verwenden von WEBRTC mit der Option, entweder die WEBRTC-HTTP-Einnahme (AKA, WHIP ) oder WebSockets zu verwenden, um eine Broadcast-Verbindung herzustellen.

1080p
Ein hochwertiger Verlag.

Anhängen
Demonstriert das Aufzeichnen eines Streams für den Server mit Append -Option.

Authentifizierung
Demonstriert die Authentifizierung mit dem einfachen AUTH-Plugin zum Veröffentlichen.

Kameraquelle
Demonstriert die Auswahl der gewünschten Kamera zum Veröffentlichen.

Kamera -Tausch
Demonstriert eine Anfrage nach einem MediaStream mit einer definierten video für die Einschränkung, die auf der hinteren und vorderen Gesichtskameras eines mobilen Geräts basiert, und eines Browsers, das die Medienkontrakten facingMode unterstützt.

Benutzerdefinierte Einstellungen
Ermöglicht das Anpassen der Medienübertragungseinstellungen für einen WebRTC -Verlag.

Benutzerdefinierte Audioeinstellungen
Ermöglicht das Anpassen der Audioeinstellungen für einen WebRTC -Verlag.

Medienstream -Swap
Demonstriert die Verwendung von replaceTrack zum Swap in einer anderen Kamera-Quelle für WEBRTC-basierte Publisher.

Bildaufnahme
Demonstriert, dass ein Bild eines Live -Videos veröffentlicht wird.

Stumm
Muting und unmutieren Audio für ein Live -Video, das veröffentlicht wird.

Aufzeichnen
Demonstriert das Aufzeichnen eines Streams auf dem Server für VOD (Video-on-Demand) -Wiedergabe.

Anhängen
Demonstriert die Aufzeichnungsfunktion Ein Stream auf den Server für VOD-Wiedergabe (Video-on-Demand).

Fernanruf
Demonstriert, wie eine Remote -Nachricht an alle abonnierten Clients gesendet wird.

Hin- und Rückfahrt Authentifizierung
Ein Beispiel für die Verwendung der Roundtrip-Authentifizierung mit Red5 Pro.

Bildschirmfreigabe
Ein Beispiel für die Verwendung der Bildschirmfreigabefunktionen von Chrom und Firefox . Zur Verwendung mit Abonnement -Bildschirmfreigabe Beispiel.

Gemeinsames Objekt
Demonstriert die Verwendung von Remote Shared Objekt zum Senden und Erhalt von Informationen zwischen verbundenen Clients.

Social Media Stream Push
Ein Beispiel für die Wiederholung eines Live -Streams auf eine Social -Media -Plattform.

VP8
Ein Beispiel für die Anforderung von VP8 Video -Codec beim Veröffentlichen

Veröffentlichung - Beispiele für Stream Manager

Stream Manager
Demonstriert die Verwendung der Red5 Pro Stream Manager -API, um den Ursprung eines autoscaling -Clusters zu veröffentlichen.

Stream Manager Proxy
Demonstriert die Verwendung des Red5 Pro -Stream -Managers als SSL WebSocket -Proxy zur Veröffentlichung von WEBRTC für den Ursprung eines Autoscaling -Clusters.

Stream Manager Proxy -Kamera auswählen
Demonstriert die Verwendung des Red5 Pro -Stream -Managers als SSL WebSocket -Proxy zur Veröffentlichung von WEBRTC an den Ursprung eines Autoscaling -Clusters mit der Kameraauswahl.

Stream Manager -Proxy -Einstellungen
Demonstriert die Verwendung des Red5 Pro -Stream -Managers als SSL WebSocket -Proxy zur Veröffentlichung von WEBRTC mit benutzerdefinierten Videoeinstellungen an den Ursprung eines Autoscaling -Clusters.

Stream Manager -Proxy -Einstellungen mit Audio
Die Verwendung des Red5 Pro -Stream -Managers als SSL WebSocket -Proxy zur Veröffentlichung von WEBRTC mit benutzerdefinierten Audioeinstellungen für den Ursprung eines Autoscaling -Clusters.

Stream Manager Proxy Round Trip Authenticaion
Ein Beispiel für die Verwendung der Roundtrip-Authentifizierung mit Red5 Pro über Stream Manager-Proxy.

Stream Manager Proxy -Bildschirmfreigabe
Ein Beispiel für die Verwendung der Bildschirmfreigabefunktionen von Chrom und Firefox . Zur Verwendung mit Stream Manager -Proxy abonnieren Bildschirmfreigabe Beispiel.

Stream Manager Proxy Social Media Stream Push
Ein Beispiel für die Wiederholung eines Live -Streams auf eine Social -Media -Plattform.

Stream Manager Transcode -Bereitstellungsformular
Bietet eine einfache Form, um dem Stream -Manager eine neue Bestimmung für ABR -Sendungen zu veröffentlichen. Sobald die Bestimmung veröffentlicht ist, verwenden Sie Ihren bevorzugten Mediencodierer, um die Varianten zu übertragen.

Stream Manager Proxy Transcoder
Bietet eine einfache Form, um eine neue Bestimmung an den Stream -Manager für ABR -Sendungen zu veröffentlichen und eine einzelne Variante mit dem Transcoder zu starten.

Stream Manager Proxy Transcoder mit Authentifizierung
Bietet eine einfache Form, um eine neue Bestimmung an den Stream -Manager für ABR -Sendungen zu veröffentlichen und eine einzelne Variante mit dem Transcoder, einschließlich der Authentifizierung, zu starten.

Stream Manager -Proxy -Validierung
Ein Beispiel für die Verwendung von Validierungsparametern mit Red5 Pro über Stream Manager -Proxy.

Multi

Zwei-Wege
Demonstriert gleichzeitig Veröffentlichung beim Abonnieren - und ein Gespräch zulässt. Beinhaltet die Erkennung von Streams und die automatische Verbindung.

Zwei-Wege-Stream-Manager-Proxy
Das Zwei -Wege -Beispiel über einen Stream -Manager - einschließlich der Verwendung eines Proxy. Beinhaltet die Erkennung von Streams und die automatische Verbindung.

Konferenz
Demonstriert die Mehrparteien-Kommunikation mit Red5 Pro. Es zeigt auch, dass gemeinsame Objekte als Benachrichtigungen verwendet werden, um die Zugabe und Entfernung von Parteien zu erkennen.

Konferenz - Stream Manager
Demonstriert die Mehrparteien-Kommunikation mit Red5 Pro über Stream Manager. Es zeigt auch, dass gemeinsame Objekte als Benachrichtigungen verwendet werden, um die Zugabe und Entfernung von Parteien zu erkennen.

Shared Objekt (nur WebSockets)
Demonstriert die Verwendung gemeinsamer Objekte über einen WebSocket -Proxy aus dem Red5 Pro HTML SDK.

Abonnieren

Teilnehmer
Basic -Abonnentenbeispiel mit Failover. Wenn kein Webrtc -Browser -Unterstützung, wird zuerst Flash Player erkannt, dann HLS.

360
Beispiel für das Abonnieren eines 360 -Kamera -Streams

Nur Audio
Demonstriert die Wiedergabe von Audio-Stream.

Authentifizierung
Demonstriert die Authentifizierung mit dem Simple-Auth-Plugin zum Abonnieren.

Bildaufnahme
Zeigt, dass ein Bild eines Live -Videos erfasst wird, das verzehrt wird.

Cluster
Demonstriert auf eine IP von der Red5 Pro -Cluster -API, um einem Live -Stream zu unterschreiben.

HLS
Dies ist ein Beispiel für das Abonnieren eines Streams nur mit HLS. Für den Fall, dass HLS vom Browser nicht nativ unterstützt wird, wird die HLS.js-3.-Party-Bibliothek verwendet.

Bildaufnahme
Dieses Beispiel zeigt, dass ein Still der Wiedergabe durch die drawImage -API von CanvasRenderingContext2D verwendet wird.

Wieder verbinden
Demonstriert den Failover-Mechanismus des Red5 Pro HTML SDK, um einen Abonnenten basierend auf dem Browserunterstützung auszuwählen und zum Abschluss der Sendung oder des Verbindungsverlusts automatisch zu reduzieren.

Fernanruf
Demonstriert, eine Remote -Nachricht vom Sender zu empfangen.

Wiederholen Sie den ungültigen Namen
Zeigt die Verwendung der Konfigurationseigenschaft maintainConnectionOnSubscribeErrors -Eigenschaft eines Abonnenten, um die WebSocket -Verbindung nach Fehlern aus der subscribe nach der Intialisierung zu verwalten.

Hin- und Rückfahrt Authentifizierung
Ein Beispiel für die Verwendung der Roundtrip-Authentifizierung mit Red5 Pro über Stream Manager-Proxy

Bildschirmfreigabe
Ein Beispiel für die Verwendung der Bildschirmfreigabefunktionen von Chrom und Firefox . Für die Verwendung mit dem Beispiel für das Veröffentlichungsbildschirm Freigabe.

Gemeinsames Objekt
Demonstriert die Verwendung von Remote Shared Objekt zum Senden und Erhalt von Informationen zwischen verbundenen Clients.

Stehen zu
Ein Beispiel für die Verwendung der Standby -API zur Anfrage einer "Pause" beim Empfangen von Video- und Audiodaten auf dem Medienstream und gleichzeitig eine Verbindung des Clients zum Server.

Stream -Schalter
Ein Beispiel, das das Wechsel des aktuellen Abonnentenstroms auf einen anderen Live -Stream über WebRTC zeigt.

Zwei Streams
Ein Beispiel, das zwei Streams abonniert, wobei der Stream1 Name und Stream 2 Name -Namensvariablen auf der Seite "Einstellungen" verwendet werden.

Video Stumm
Beispiel, um das Abonnieren einer Sendung zu demonstrieren, in der der Video -Stream "gedämpft" ist.

VP8
Demonstriert das Anfordern von VP8 -Videocodierung für einen Wiedergabestream.

Abonnieren - Stream Manager -Beispiele

Stream Manager
Demonstriert die Verwendung der Red5 Pro -Stream -Manager -API und als SSL WebSocket -Proxy, um auf eine Edge -Server -IP zuzugreifen, um einen Live -Stream zu abonnieren.

Stream Manager Proxy
Demonstriert die Verwendung der Red5 Pro -Stream -Manager -API, um auf eine Edge -Server -IP zuzugreifen, um einen Live -Stream zu abonnieren.

Stream Manager -Proxy verbinden
Demonstriert den Failover-Mechanismus des Red5 Pro HTML SDK, um einen Abonnenten basierend auf dem Browserunterstützung auszuwählen und zum Abschluss der Sendung oder des Verbindungsverlusts automatisch zu reduzieren.

Stream Manager Proxy Region
Demonstriert die Verwendung der Red5 Pro -Stream -Manager -API, um auf eine Edge -Server -IP zuzugreifen, um einen Live -Stream zu abonnieren.

Stream Manager Proxy Round Trip Authentifizierung
Demonstriert das Abonnieren mit der Authentifizierung der Roundtrips, angegeben.

Stream Manager Proxy TransCoder (RTC)
Demonstriert die Verwendung der Red5 Pro-Stream-Manager-API zum Zugriff auf Bestimmungen und ein Edge-Server-IP, um einen Live-WEBRTC-Stream mit adaptiver Bitrate-Steuerung zu abonnieren.

Stream Manager Proxy TransCoder (RTMP)
Zeigt die Verwendung der Red5 Pro-Stream-Manager-API zum Zugriff auf Bestimmungen und ein Edge-Server-IP, um einen Live-Flash-basierten Stream mit adaptiver Bitrate-Steuerung zu abonnieren.

Stream Manager Proxy Transcoder (HLS)
Die Verwendung der Red5 Pro-Stream-Manager-API zum Zugriff auf Bestimmungen und ein Edge-Server-IP-Abonnement für einen Live-HLS-basierten Stream mit adaptiver Bitrate-Steuerung.

Stream Manager Proxy -Bildschirmfreigabe
Ein Beispiel für die Verwendung der Bildschirmfreigabefunktionen von Chrom und Firefox . Für die Verwendung mit dem Beispiel für das Veröffentlichungsbildschirm Freigabe.

Beispiele für Mixer - Stream Manager

Stream Manager Proxy Conference Teilnehmer
Demonstriert die Verwendung der Red5 Pro -Stream -Manager -API, um einer Videokonferenz mit einem einzigen Rücklauf zu beitreten.

Stream Manager Proxy Conference Host
Demonstriert die Verwendung der Red5 Pro -Stream -Manager -API, um eine Videokonferenz mit einem einzigen Rücklaufstrom zu hosten und zu verwalten.

Stream Manager Grid Composition Host
Demonstriert die Verwendung der Red5 Pro -Stream -Manager -API, um eine Komposition mehrerer Live -Streams in einen einzelnen Stream zu erstellen und zu verwalten.

Stream Manager 2x2 Grid Layout Beispiel
Demonstriert, wie ein Satz Live -Streams in ein 2x2 -Raster kompetiert wird, das in einen Red5 Pro -Mixer geladen werden kann, um eine Komposition mit bis zu 4 Streams zu erstellen.

Stream Manager 3x3 Grid Layout Beispiel
Demonstriert, wie ein Satz Live -Streams in ein 3x3 -Raster kompetiert wird, das in einen RED5 Pro -Mixer geladen werden kann, um eine Komposition mit bis zu 9 Streams zu erstellen.

Stream Manager NXN Grid Layout Beispiel
Demonstriert, dass das Verfassen einer Reihe von Live -Streams in ein NXN -Gitter komponiert wird, das automatisch geändert werden kann, wenn neue Streams hinzugefügt werden. Die Seite kann in einen Red5 -Pro -Mixer geladen werden, um eine Komposition mit vielen Streams zu erstellen.

Stream Manager -Konferenzlayout
Demonstriert, eine Reihe von Live -Streams in ein fokussiertes Layout für eine Videokonferenz zu komponieren, auf der der Moderator hervorgehoben wird. Die Seite kann in einen Red5 Pro -Mixer geladen werden, um eine Videokonferenz mit einem einzigen Rücklaufstream zu erstellen.

Notizen

1. Für die Abonnentenbeispiele müssen Sie derzeit einen Live -Stream veröffentlicht und basierend auf dem Feld Stream 1 -Namen der Einstellungen genannt werden. Mit einem anderen Gerät können Sie mit diesem WebApp das Streaming starten, oder Sie können auch einen Webbrowser verwenden, um über Flash zu veröffentlichen, http: // your_red5_pro_server_ip: 5080/live.
2. Sie können eine Liste mit aktiven Streams sehen, indem Sie zu http: // your_red5_pro_server_ip: 5080/live/abonnungsschriften.jsp navigieren (muss diese Seite nach dem Publizieren aktualisieren).
3. Sie können auf die Server -IP Ihrer Red5 Pro -Server -Installation zugreifen, um im Feld Host der Einstellungen verwendet zu werden -, indem Sie http: // your_red5_pro_server_ip: 5080/und das in der oberen Recht der Seite gedruckte IP finden.
4. Sofern Sie den Server nicht lokal ausführen, erfordert das WEBRTC Publishing ein gültiges SSL -Zertifikat.