Heim >Web-Frontend >js-Tutorial >Erstellen von Webrtc -Video -Chat -Anwendungen

Erstellen von Webrtc -Video -Chat -Anwendungen

Jennifer Aniston
Jennifer AnistonOriginal
2025-02-09 13:10:13397Durchsuche

Building WebRTC Video Chat Applications

Der Aufstieg von WEBRTC und die verbesserte Fähigkeit von Browsern, in Echtzeit-Point-to-Point-Kommunikation zu handhaben, erleichtern Echtzeitanwendungen, die Echtzeit-Anwendungen als je zuvor zu erstellen. In diesem Artikel wird SimpleWebrtc und seine Anwendung bei der Implementierung der WebRTC -Technologie untersucht und andere Alternativen einführen, die das gleiche Ziel erreichen können.

Wenn Sie Hintergrundkenntnisse über die Kommunikation von WEBRTC und Peer-to-Peer benötigen, wird empfohlen, "Morgendämmerung von Webrtc" und "Einführung in die GetUsermedia-API" zu lesen.

Aufgrund der Komplexität des Erstellens benutzerdefinierter WEBRTC-Anwendungen enthält dieser Artikel keine Schritt-für-Schritt-Build-Tutorials. Stattdessen werden wir uns die Arten von Bibliotheken und Servern ansehen, die zum Erstellen zuverlässiger Anwendungen erforderlich sind. Ich werde einen vollständigen Beispiel für den Antragsantrag bereitstellen, auf den Sie beim Erstellen Ihrer eigenen Bewerbung verweisen können.

Wir werden uns hauptsächlich auf die SimpleWebrtc -Plattform konzentrieren. Später werden wir kurz andere kommerzielle und Open -Source -Alternativen abdecken, mit denen Sie die gleichen Ziele erreichen können.

Schlüsselpunkte

  • weBRTC ermöglicht eine direkte Punkt-zu-Punkt-Echtzeitkommunikation innerhalb eines Webbrowsers, ohne dass Plug-In-Ins von Drittanbietern erforderlich ist, und unterstützt moderne Browser wie Chrome, Firefox und Safari.
  • Unterzeichnung in WEBRTC (kritisch für die Einrichtung von Peer-to-Peer-Verbindungen) stützt sich auf Stun- und Wend-Server, um die NAT (Netzwerkadressübersetzung) und Firewalls zu umgehen, um die Konnektivität in verschiedenen Netzwerkkonfigurationen sicherzustellen.
  • SimpleWebrtc bietet eine umfassende Plattform zum Erstellen und Bereitstellen von WEBRTC -Anwendungen, Bereitstellung von SDKs, Hosting -Diensten und technischen Support, damit Entwickler benutzerdefinierte Video -Chat -Lösungen implementieren.
  • Alternativen zu SimpleWebrtc wie Daily.co und anderen kommerziellen Plattformen bieten unterschiedliche Benutzerfreundlichkeit und Anpassungsoptionen, um die Anforderungen eines schnellen Setups für vollständig Markenlösungen zu erfüllen.
  • Die Bereitstellung von WEBRTC -Anwendungen erfordert die Überlegungen zur Kompatibilität von Netzwerkzuverlässigkeit, Sicherheit und Browser, und die kommerzielle Plattform vereinfacht viele der Komplexität, die mit der kundenspezifischen Entwicklung verbunden ist.

Was ist webrtc?

weBRTC (Web-Echtzeitkommunikation) ist ein Open-Source-Projekt, mit dem die Punkt-zu-Punkt-Echtzeitkommunikation zwischen Webbrowsern, die Echtzeit-Video-, Audio- und Datenströme über das Netzwerk übertragen wird. Google Chrome, Mozilla Firefox, Safari, Opera und andere Browser auf Chrombasis haben diese Technologie nativ implementiert. Dies sind gute Nachrichten, da Benutzer auf die Technologie zugreifen können, ohne Plugins oder Anwendungen von Drittanbietern zu installieren.

ältere Browserversionen und herkömmliche Browser wie Internet Explorer haben diese Technologie nicht. Benutzer müssen den neuesten Browser verwenden. Sie können die vollständige Liste der unterstützten Browser anzeigen:

Im Januar 2021 verwandelte die World Wide Web Alliance (W3C) die WEBRTC 1.0 -Spezifikation von einem Empfehlungsstatus von Kandidaten in einen empfohlenen Zustand. Dies ist eine außergewöhnliche Leistung, wenn man bedenkt, dass die Technologie vor 10 Jahren erstmals veröffentlicht wurde.

WEBRTC-Spezifikation behandelt, wie Browser auf lokale Mediengeräte zugreifen und wie sie eine Reihe von Echtzeit-Protokollen verwenden, um Medien und gemeinsame Anwendungsdaten an den Browser zu übertragen. Dies geschieht durch eine Reihe von JavaScript -APIs, die im vorherigen Artikel behandelt wurden. Die Spezifikation stellt auch sicher, dass alle Mitteilungen verschlüsselt sind und dass unerwünschte Dritte auf Streams nicht belaufen können.

Es ist zu beachten, dass WEBRTC nicht alles abdeckt, z. B. Signalübertragung, der Prozess des Startens einer Verbindung zwischen Browsern. Um potenzielle neue technische Einschränkungen zu vermeiden, wird dieser Teil des Inhalts in der Spezifikation weggelassen. Der zweite Grund ist, dass WebRTC hauptsächlich Client -Technologie ist und es am besten ist, Servertechnologie zu verwenden, um mit Problemen wie Sitzungen umzugehen.

Wie die Browsersignalisierung

funktioniert

weBRTC ist als Punkt-zu-Punkt-Kommunikation zwischen Webbrowsern definiert. Die Realität ist, dass die meisten Browser auf Computern, die sich hinter NAT -Geräten (Netzwerkadressenübersetzungen) befinden, (optionale Firewall) gelten. NAT -Geräte (normalerweise Router oder Modems) ermöglichen es Computern mit privaten IP -Adressen, über eine einzige öffentliche IP -Adresse eine Verbindung zum Internet herzustellen.

NAT -Geräte schützen PCs vor direkten Angriffen von böswilligen Nutzern im Internet über IP -Adressen. Leider verhindert es auch Geräte mit privaten IP -Adressen, sich über das Internet mit einem anderen privaten IP -Gerät zu verbinden.

Um diese Herausforderung zu überwinden, schlug die Internet Engineering Task Force (IETF) das ICE -Protokoll (Interactive Connection Establishment) vor, das es private IP -Computer ermöglicht, andere private Computer in öffentlichen Netzwerken zu ermitteln und mit einer Verbindung herzustellen.

Dies beinhaltet die Verwendung eines öffentlichen Signalisierungsservers, mit dem beide Clients problemlos eine Verbindung herstellen können. Der Peer -Computer stellt eine Verbindung zu diesem Server her und tauschte ihn mit den von der Datenquelle und dem Empfänger erforderlichen IP -Adressen und -Ports aus. Mit diesen Informationen können sie eine direkte Verbindung zueinander herstellen und mit der Übertragung von Video, Audio und Daten beginnen.

Dies ist eine Animationsdemonstration:

Building WebRTC Video Chat Applications

Bildbeschreibung: WEBRTC -Signalisierung

Um die WEBRTC -Signalisierung einzurichten, müssen Sie das ICE -Framework benötigen, um die folgenden zwei Arten von Servern anzugeben.

1

Stun (Sitzung von Sitzungen für NAT) Server wie oben beschrieben. Es bietet lediglich einen Besprechungsraum für Computer, um Kontaktinformationen auszutauschen. Sobald der Informationsaustausch abgeschlossen ist, wird zwischen den Peer -Computern eine Verbindung hergestellt, und der Stun -Server verlässt den Rest der Konversation.

Dies ist ein Beispielskript, das auf dem Client ausgeführt wird, sodass der Browser eine Verbindung über den Stun -Server initiieren kann. Mit diesem Skript können mehrere Stun -Server -URLs bereitgestellt werden, wenn eines der Server fehlschlägt:

<code class="language-javascript">function createPeerConnection() {
  myPeerConnection = new RTCPeerConnection({
    iceServers: [
      {
        urls: "stun:stun.stunprotocol.org",
      },
    ],
  });
}</code>
Verbindungen, die über Stun-Server hergestellt wurden, sind die idealste und kostengünstigste Art der Webrtc-Kommunikation. Benutzer werden kaum laufende Kosten entstehen. Da jeder Peer eine andere Art von NAT -Gerät verwendet, werden einige Benutzerverbindungen möglicherweise nicht hergestellt. In diesem Fall verlangt das ICE -Protokoll, dass Sie einen Fallback, einen anderen Typ von Signalisierungsserver, der als Turn -Server bezeichnet wird, bereitstellen.

2

drehen (Reisen mit Relay Nat) Server ist eine Erweiterung des Stun -Servers. Was es von seinem Vorgänger unterscheidet, ist, dass es die gesamte Kommunikationssitzung übernimmt.

Im Grunde genommen erhält es nach der Herstellung einer Verbindung zwischen Gleichaltrigen einen Stream von einem Peer und leitet ihn an einen anderen Peer und umgekehrt weiter. Diese Art der Kommunikation ist teurer, und der Host muss die Verarbeitungs- und Bandbreitenlast bezahlen, die für den Ausführen des Turn -Servers erforderlich ist.

Folgendes ist eine grafische Beschreibung, die den gesamten Signalisierungsprozess umfasst, an dem zuerst der Stun -Server und dann der Turn -Server als Fallback beteiligt sind:

Building WebRTC Video Chat Applications

Bildbeschreibung: Zeigt ein vollständiges Architekturdiagramm des gesamten WebRTC -Prozesses an.

Erstellen Sie eine benutzerdefinierte Video -Chat -Anwendung

Während es möglich ist, eine eigene Video -Chat -Lösung mit einem reinen JavaScript -Code und einem kostenlosen öffentlichen Stun -Server einzurichten, kann nicht jeder auf Ihrer Plattform eine Verbindung zueinander herstellen. Wenn Sie allen Benutzern zuverlässige Dienste anbieten möchten, müssen Sie einen Turn -Server verwenden.

Wie bereits erwähnt, kann es kompliziert sein, eine WebRTC -Plattform einzurichten. Glücklicherweise haben wir eine All-in-One-Business-Plattform, die den Bau von Web-Video-Chat-Anwendungen für die Erstellung von WEBRTC-Applikationen zum Kinderspiel macht. Lassen Sie uns nun sehen, wie einfach, dass wir unsere Belastung lindern kann.

Was ist SimpleWebrtc?

SimpleWebrtc ist eine Plattform, die Entwicklern einen einfachen und kostengünstigen Service bietet, um benutzerdefinierte Echtzeitanwendungen mit React zu erstellen und bereitzustellen. Insbesondere liefern sie Folgendes:

    SimpleWebrtc SDK: Eine Front-End-Bibliothek
  • Host: Stun/Turn- und SFU -Server (selektive Weiterleitungseinheit)
  • Technischer Support
  • benutzerdefinierte Anwendungsentwicklung und WEBRTC -Beratungsdienste
  • Einzelmieter und lokale Infrastruktur
  • talky: Eine kostenlose Video -Chat -Anwendung, die ausschließlich mit SimpleWebrtc
  • erstellt wurde
Folgende Beispiele für einige benutzerdefinierte Video -Chat -Projekte, von denen sie den Kunden geholfen haben, sich zu entwickeln und zu starten.

Building WebRTC Video Chat Applications

Bildbeschreibung: Talky

Building WebRTC Video Chat Applications

Bildbeschreibung: Web -Tutoring -App

Die wichtigsten Webrtc -Dienste der SimpleWebrtc -Plattform umfassen:

    Sicherheitsübertragung von Video-, Sprach- und Bildschirmfreigabe
  • End-to-End-Verschlüsselung
  • Unterstützung bis zu 30 gleichzeitige Benutzer
  • Infinite Room
In Bezug auf die Preisgestaltung bieten sie folgende Pläne an:

  • Kleingruppe: Bis zu 6 Teilnehmer ab 5 USD pro Monat
  • Große Gruppe: Bis zu 30 Teilnehmer ab 3 USD pro Monat

Der Vorteil kleiner Gruppenpläne besteht darin, dass eine End-to-End-Verschlüsselung verwendet werden kann, während große Gruppenpläne dies nicht können. In einem kleinen Gruppenplan sind 60-80% der Sitzungen Peer-to-Peer-Verbindungen, und Medienströme berühren den Server nie. Für solche Sitzungen gibt es keine Gebühr für den Bandbreitenverbrauch.

Für große Gruppenpläne wird der Datenverkehr über einen Server namens SFU (Selektive Weiterleitungseinheit) geleitet und der gesamte Datenverkehr wird gemessen.

Es ist zu beachten, dass die meisten kommerziellen Alternativen (die wir später kurz beschreiben werden) bis winzige in Rechnung gestellt werden. Auf den ersten Blick scheint es ziemlich erschwinglich zu sein. Sie berechnen jedoch Peer-to-Peer-Verbindungen, und SimpleWebrtc ist kostenlos verfügbar.

(Der folgende Inhalt wird aufgrund der Länge des Artikels vereinfacht, und die Kerninformationen und Codebeispiele werden beibehalten. Weitere Informationen finden Sie im Originaldokument für den vollständigen Originaltext.)

Voraussetzungen

SimpleWebrtc Client Library basiert auf den React- und Redux -Ökosystemen. Sie benötigen grundlegende Fähigkeiten:

  • reagieren
  • Redux
  • asynchrone Redux -Bibliotheken - wie Redux Thunk, Redux -Saga und Redux Observables

Richten Sie ein Konto ein

Holen Sie sich die Registrierungsseite von SimpleWebrtc.com und registrieren Sie ein neues Konto. Sie erhalten 2 GB Bandbreite, und wenn Sie sich für ihren Newsletter anmelden, erhalten Sie eine zusätzliche 3 GB Bandbreite. Diese Quote sollte ausreichen, um Ihre Video -Chat -Anwendung zu entwickeln und zu testen.

Nach der Registrierung müssen Sie Ihre E -Mail -Adresse bestätigen. Nach Abschluss dieses Schritts sollten Sie sich auf der Dashboard -Seite befinden, auf der Sie Ihre API -Taste erhalten.

Verwenden Sie diesen API -Schlüssel, Sie können mit dem Erstellen einer eigenen benutzerdefinierten WebRTC -Anwendung beginnen. Im nächsten Abschnitt werden wir die vom SimpleWebrtc -Team erstellte vollständige Beispielanwendung ausführen.

Musteranwendung bauen und ausführen

(Code -Beispiel ist gestoppt)

Bereitstellung

(vereinfachte Bereitstellungsschritte)

Alternativen zu SimpleWebrtc

(eine kurze Einführung in Alternativen)

Schlussfolgerung

Auf jeden Fall ist es einfacher, eine Live -Video -Chat -Lösung mit WebRTC mithilfe einer kommerziellen Plattform zu erstellen. Die Übernahme einer Open -Source -Route ist machbar, aber Sie müssen Ihren eigenen Turn -Server hosten, um eine zuverlässige Verbindung für alle Benutzer zu gewährleisten. In beiden Fällen kann der Build -Prozess angesichts der relativen Komplexität der von uns gesehenen Stichprobenanwendung sehr zeitaufwändig sein.

Die wichtigste Frage, die Sie sich stellen sollten, ist, ob die Erstellung Ihrer eigenen benutzerdefinierten Echtzeitlösung Ihre Zeit wert ist. Wenn Sie nicht vorhaben, WEBRTC als Kerngeschäft zu verwenden, müssen Sie möglicherweise zunächst ein Unternehmen mit Erfahrung in der Behandlung dieser Technologie konsultieren.

(FAQ -Teil ist gestoppt)

Das obige ist der detaillierte Inhalt vonErstellen von Webrtc -Video -Chat -Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn