Erfahrung mit WebRTC. Yandex Vortrag

Was ist bei der Entwicklung von Software besser - native oder Web-Technologien? Holivar zu diesem Thema wird nicht bald enden, aber nur wenige werden argumentieren, dass es nützlich ist, native Funktionen für die Verwendung in Browsern oder WebView zu duplizieren. Und wenn Anwendungen für Anrufe früher ausschließlich getrennt vom Browser existierten, sind sie jetzt einfach im Web zu implementieren. Entwickler Grigory Kuznetsov erklärte, wie die WebRTC-Technologie für P2P-Verbindungen verwendet wird.


- Wie Sie alle wissen, gibt es in den letzten Jahren eine ganze Reihe von Anwendungen, die auf dem direkten Datenaustausch zwischen zwei Browsern basieren, dh P2P. Dies sind alle Arten von Instant Messenger, Chats, Dialern und Videokonferenzen. Es können auch Anwendungen sein, die eine Art verteiltes Rechnen ausführen. Die Grenzen der Fantasie sind in keiner Weise begrenzt.

Wie machen wir eine solche Technologie? Stellen Sie sich vor, wir möchten von einem Browser zum anderen telefonieren. Und stellen Sie sich vor, welche Schritte wir brauchen, um dieses Ziel zu erreichen. Zunächst scheint es, dass der Anruf unser Bild, unsere Stimme, unser Bild ist und wir Zugang zu den an den Computer angeschlossenen Mediengeräten erhalten müssen: zur Kamera und zum Mikrofon. Nachdem Sie Zugriff erhalten haben, benötigen Sie Ihre beiden Browser, zwei Clients, um sich zu finden. Es ist notwendig, ihnen zu helfen, sich irgendwie zu verbinden, zu erreichen und Metainformationen zu vermitteln.

Wenn Sie erreichen, müssen Sie mit der Datenübertragung im P2P-Modus beginnen, um die Übertragung von Medienströmen sicherzustellen. Wir haben alle notwendigen Dinge, wir sind bereit, unser cooles neues Fahrrad zu implementieren. Aber das ist ein Witz, wir sind Ingenieure und wir verstehen, dass es teuer, ungerechtfertigt und riskant ist. Lassen Sie uns als klassische Ingenieure zunächst darüber nachdenken, welche Lösungen bereits existieren.

Zuallererst die alte aussterbende Adobe Flash-Technologie. Sie stirbt wirklich und Adobe wird es bis 2020 nicht mehr unterstützen. Mit dieser Technologie können Sie wirklich auf Ihre Mediengeräte zugreifen. In ihr können Sie alle erforderlichen Mechanismen implementieren, um den Browsern die Verbindung zu erleichtern, sodass sie P2P-Informationen übertragen können. Sie werden Ihr Fahrrad jedoch erneut erfinden, da es keinen einzigen Standard gibt, sondern nur einen einzigen Ansatz für die Implementierung dieser Methode Datenübertragung.

Sie können ein Browser-Plugin schreiben. So funktioniert Skype für Browser, die keine moderneren Technologien unterstützen. Sie müssen Ihr Fahrrad implementieren, da es keinen einzigen Standard gibt und es auch für Benutzer schlecht ist, da der Benutzer eine Art Plug-In in seinem Browser installieren und zusätzliche Aktionen ausführen muss. Benutzer mögen dies nicht und wollen es nicht tun.

Und es gibt WebRTC-Technologie - Google Hangouts und Facebook Messenger arbeiten damit. Voximplant verwendet es, damit Sie Ihre Anrufe tätigen können. Lassen Sie uns näher darauf eingehen. Dies ist eine neue Entwicklungstechnologie, die 2011 erschien und sich weiterentwickelt. Was erlaubt sie zu tun? Erhalten Sie Zugang zu Kamera und Mikrofon. Stellen Sie eine P2P-Verbindung zwischen zwei Computern und zwei Browsern her. Natürlich können Sie Medienströme in Echtzeit übertragen. Darüber hinaus können Sie Informationen übertragen, dh jedes binäre Datum, Sie können auch P2P übertragen, Sie können Ihr eigenes verteiltes Computersystem erstellen.

Ein wichtiger Punkt: WebRTC bietet Browsern keine Möglichkeit, sich gegenseitig zu finden. Wir können alle notwendigen Metainformationen über unsere Lieben generieren, aber wie kann ein Browser etwas über die Existenz eines anderen erfahren? Wie verbinde ich sie? Betrachten Sie ein Beispiel.



Es gibt zwei Kunden. Der erste Client möchte den zweiten Client anrufen. WebRTC bietet Ihnen alle Informationen, die Sie benötigen, um sich zu identifizieren. Es bleibt jedoch die Frage, wie man einen anderen Browser findet, wie man diese Metainformationen sendet und wie man den Anruf initialisiert. Dies bleibt den Entwicklern überlassen, wir können absolut jede Methode anwenden, diese Metainformationen nehmen, auf ein Stück Papier drucken, per Kurier senden, ein anderer wird sie verwenden und alles wird funktionieren.

Und wir können uns einen Signalmechanismus ausdenken. In diesem Fall handelt es sich um einen Mechanismus von Drittanbietern, mit dem wir, wenn wir über unsere Kunden Bescheid wissen, sicherstellen können, dass einige Informationen, die zum Herstellen einer Verbindung erforderlich sind, zwischen ihnen übertragen werden.

Betrachten Sie ein Beispiel mit einem Signalserver. Es gibt einen Signalserver, der eine ständige Verbindung zu unseren Clients aufrechterhält, beispielsweise über Web-Sockets oder über HTTP. Der erste Client generiert Metainformationen und sendet diese über Web-Sockets oder HTTP an den Signalserver. Es sendet auch einen Teil der Informationen, mit denen es eine Verbindung herstellen möchte, z. B. einen Spitznamen oder andere Informationen.

Der Signalserver, der diese Kennung verwendet, bestimmt, welcher Client unsere Metainformationen umleiten muss, und leitet sie weiter. Der zweite Client nimmt es, verwendet es, installiert sich selbst, bildet eine Antwort und sendet es mithilfe des Signalisierungsmechanismus an den Signalserver, der es wiederum an den ersten Client weiterleitet. Somit verfügen beide Clients derzeit über alle erforderlichen Datums- und Metainformationen, um eine P2P-Verbindung herzustellen. Fertig.

Schauen wir uns genau an, was die Clients austauschen: Sie tauschen ein SDP-Datagramm, Session Description Protocol, aus.



Dies ist im Wesentlichen eine Textdatei, die alle erforderlichen Informationen zum Herstellen einer Verbindung enthält. Es gibt Informationen über die IP-Adresse, über die verwendeten Ports, darüber, welche Art von Informationen zwischen Clients verfolgt werden, was es ist - Audio, Video, welche Codecs verwendet werden. Alles was wir brauchen ist da.

Achten Sie auf die zweite Zeile. Es zeigt die IP-Adresse des Clients, 192.168.0.15. Dies ist offensichtlich die IP-Adresse eines Computers, der sich in einem lokalen Netzwerk befindet. Wenn wir zwei Computer haben, von denen sich jeder im lokalen Netzwerk befindet und von denen jeder seine IP-Adresse in diesem Netzwerk kennt, möchten sie anrufen. Werden sie dies mit einem solchen Datagramm tun können? Offensichtlich nicht, sie kennen die externen IP-Adressen nicht. Wie man ist



Lassen Sie uns beiseite treten und sehen, wie NAT funktioniert. Im Internet sind viele Computer hinter Routern versteckt. Es gibt lokale Netzwerke, in denen Computer ihre Adressen kennen, es gibt einen Router mit einer externen IP-Adresse, und alle diese Computer weisen die IP-Adresse dieses Routers auf. Wenn ein Paket von einem Computer im lokalen Netzwerk an den Router gesendet wird, überprüft der Router, wohin es weitergeleitet werden soll. Wenn er sich in einem anderen dieser lokalen Netzwerke befindet, leitet er es einfach weiter. Wenn Sie es nach draußen ins Internet senden müssen, wird eine Routing-Tabelle erstellt.



Wir geben die interne IP-Adresse des Computers ein, der das Paket weiterleiten möchte, seinen Port, legen die externe IP-Adresse und die IP-Adresse des Routers fest und führen auch eine Portänderung durch. Wofür ist es? Stellen Sie sich vor, zwei Computer greifen auf dieselbe Ressource zu, und wir müssen die Antwortpakete korrekt weiterleiten. Wir werden sie anhand des Ports identifizieren. Der Port ist für jeden Computer eindeutig, während die externe IP-Adresse übereinstimmt.

Wie kann man leben, wenn es NAT gibt, wenn Computer unter derselben IP-Adresse herausragen, sich aber im Inneren voneinander kennen?

Das ICE-Framework für die Einrichtung der Internetverbindung hilft dabei. Es werden Möglichkeiten beschrieben, NAT zu umgehen und eine Verbindung herzustellen, wenn NAT vorhanden ist.

Dieses Framework verwendet das sogenannte STUN-Serverattribut.



Dies ist ein so spezieller Server, auf den Sie Ihre externe IP-Adresse herausfinden können. Daher muss jeder Client beim Herstellen einer P2P-Verbindung eine Anfrage an diesen STUN-Server stellen, um seine IP-Adresse herauszufinden und zusätzliche Informationen zu generieren, IceCandidate und IceCandidate mit dem Signalisierungsmechanismus auszutauschen. Dann kennen sich die Clients mit den richtigen IP-Adressen und können eine P2P-Verbindung herstellen.

Es gibt jedoch kompliziertere Fälle. Zum Beispiel, wenn der Computer hinter Double NAT versteckt ist. In diesem Fall erfordert das ICE-Framework die Verwendung eines TURN-Servers.



Dies ist ein solcher spezieller Server, der eine Client-Client-Verbindung, P2P, in eine Client-Server-Client-Verbindung verwandelt, dh als Relay fungiert. Die gute Nachricht für Entwickler ist, dass unabhängig davon, zu welchem ​​der drei Szenarien die Verbindung hergestellt wurde, ob wir uns im lokalen Netzwerk befinden, ob wir uns an einen STUN- oder TURN-Server wenden müssen, die API-Technologie für uns identisch ist. Wir geben zu Beginn einfach die Konfiguration der ICE- und TURN-Server an, geben an, wie auf sie zugegriffen werden soll, und danach erledigt die Technologie alles für uns unter der Haube.



Eine kurze Zusammenfassung. Um eine Verbindung herzustellen, müssen Sie einen Signalisierungsmechanismus auswählen und implementieren, einen bestimmten Vermittler, der uns beim Senden von Metainformationen hilft. WebRTC wird uns dafür alle notwendigen Meta geben.

Wir müssen mit NAT kämpfen, dies ist unser Hauptfeind in dieser Phase. Um dies zu umgehen, verwenden wir den STUN-Server, um unsere externe IP-Adresse herauszufinden, und verwenden den TURN-Server als Relay.

Was genau senden wir? Über Medienströme.



Medienströme sind Kanäle, die Titel in sich enthalten. Tracks innerhalb des Medienstroms werden synchronisiert. Audio und Video werden nicht voneinander abweichen, sie werden mit einem einzigen Timing geliefert. Sie können eine beliebige Anzahl von Spuren innerhalb des Medienstroms erstellen. Die Spuren können separat gesteuert werden. Sie können beispielsweise den Ton stummschalten und nur ein Bild hinterlassen. Sie können auch eine beliebige Anzahl von Medienströmen übertragen, um beispielsweise eine Konferenz zu implementieren.

Wie greife ich über einen Browser auf Medien zu? Lassen Sie uns über die API sprechen.



Es gibt eine getUserMedia-Methode, die eine Reihe von Konstanten als Eingabe akzeptiert. Dies ist ein spezielles Objekt, in dem Sie angeben, auf welche Geräte Sie zugreifen möchten, auf welche Kamera, auf welches Mikrofon. Sie geben die Eigenschaften an, die Sie haben möchten, welche Auflösung, und es gibt auch zwei Argumente - successCallback und errorCallback, die bei Erfolg oder Misserfolg aufgerufen werden. Modernere Technologieimplementierungen verwenden Versprechen.

Es gibt auch eine praktische enumerateDevices-Methode, die eine Liste aller an Ihren Computer angeschlossenen Mediengeräte zurückgibt. Auf diese Weise können Sie sie dem Benutzer anzeigen und eine Art Auswahl zeichnen, damit der Benutzer die Kamera auswählt, die er verwenden möchte.



Das zentrale Objekt in der API ist RTCPeerConnection. Wenn wir die Verbindung herstellen, nehmen wir die RTCPeerConnection-Klasse, die das PeerConnection-Objekt zurückgibt. Als Konfiguration geben wir eine Reihe von ICE-Servern an, dh STUN- und TURN-Server, auf die wir während des Installationsprozesses zugreifen. Und es gibt ein wichtiges Ereignis, das jedes Mal ausgelöst wird, wenn wir die Hilfe unseres Signalmechanismus benötigen. Das heißt, die WebRTC-Technologie hat beispielsweise eine Anfrage an einen STUN-Server gestellt. Wir haben unsere externe IP-Adresse erkannt, ein neuer ICEC-Kandidat wurde angezeigt, und wir müssen ihn mithilfe eines Mechanismus eines Drittanbieters weiterleiten. Das Ereignis war stärker.



Wenn wir eine Verbindung herstellen und den Aufruf initialisieren möchten, verwenden wir die Methode createOffer (), um das anfängliche SDP zu bilden und SDP anzubieten, die gleichen Metainformationen, die an den Partner gesendet werden müssen.

Um es auf PeerConnection zu setzen, verwenden wir die Methode setLocalDescription (). Der Gesprächspartner empfängt diese Informationen über den Signalisierungsmechanismus, setzt sie mithilfe der Methode setRemoteDescription () auf sich selbst und generiert mithilfe der Methode createAnswer () eine Antwort, die ebenfalls über den Signalisierungsmechanismus an den ersten Client gesendet wird.



Wenn wir Zugriff auf die Medien haben, den Medienstrom erhalten haben, übertragen wir ihn mithilfe der addStream-Methode auf unsere P2P-Verbindung, und unser Gesprächspartner erfährt davon, dass das Ereignis onaddstream abgeschnitten wurde. Er wird unseren Stream empfangen und anzeigen können.



Sie können auch mit Datenströmen arbeiten. Es ist der Bildung einer regulären PeerConnection sehr ähnlich. Geben Sie einfach RtpDataChannels: true an und rufen Sie die Methode createDataChannel () auf. Ich werde nicht im Detail darauf eingehen, da solche Arbeiten der Arbeit mit Web-Sockets sehr ähnlich sind.

Ein paar Worte zur Sicherheit. WebRTC funktioniert nur unter HTTPS. Ihre Site muss mit einem Zertifikat signiert sein. Medienströme werden ebenfalls mit DTLS verschlüsselt. Die Technologie erfordert keine zusätzliche Installation, keine Plug-Ins, und das ist gut so. Und es wird nicht funktionieren, eine Spyware-Anwendung zu erstellen, die Site wird den Benutzer nicht belauschen oder ausspionieren, er wird dem Benutzer eine spezielle Eingabeaufforderung anzeigen, den Zugriff von ihm anfordern und diese nur erhalten, wenn der Benutzer den Zugriff auf Audio- und Mediengeräte zulässt.



Was die Browserunterstützung betrifft - IE bleibt und bleibt rot. Ende letzten Jahres wurde die Safari-Unterstützung hinzugefügt, dh alle modernen Browser können bereits mit dieser Technologie arbeiten und wir können sie sicher verwenden.

Ich möchte eine Reihe von Dienstprogrammen aller Art freigeben, die Ihnen bei der Arbeit mit WebRTC helfen. Dies ist in erster Linie ein Adapter . Die Technologien entwickeln sich ständig weiter und es gibt einen Unterschied bei den Browser-APIs. Die Adapterbibliothek beseitigt diesen Unterschied und erleichtert die Arbeit. Eine bequeme Bibliothek für die Arbeit mit Datenströmen ist Peerjs . Sie können sich auch die Open Source-Implementierungen der Server STUN und TURN ansehen. Eine große Auswahl an Tutorials, Beispielen und Artikeln befindet sich auf der awesome-webrtc-Seite . Ich kann es nur empfehlen.

Das letzte nützliche Tool zum Debuggen sind webrtc-internals. Während der Entwicklung können Sie einen speziellen Befehl in die Adressleiste eingeben. Im Chrome-Browser ist dies beispielsweise Chrome: // webrtc-internals. Sie sehen eine Seite mit allen Informationen zu Ihrer aktuellen WebRTC-Verbindung. Es gibt Sequenzen von Aufrufen in Methoden und alle zwischen Browsern ausgetauschten Datagramme und Diagramme, die Ihre Verbindung irgendwie charakterisieren. Im Allgemeinen werden alle Informationen vorhanden sein, die während des Debuggens und der Entwicklung benötigt werden. Vielen Dank für Ihre Aufmerksamkeit.

Source: https://habr.com/ru/post/de419951/


All Articles