Erstellen Sie in 5 Minuten einen WebRTC-Videochat

Im vorherigen Artikel habe ich den detaillierten Code eines Mehrpersonen-Video-Chat-Dienstes basierend auf WebRTC unter Ubuntu vorgestellt. Interessierte Freunde können sich darauf beziehen. Heute werde ich einen Artikel mit Ihnen teilen, wie Sie in 5 Minuten einen WebRTC-Videochat einrichten.

Suchen Sie einfach bei Baidu nach WebRTC, ich glaube, es gibt viele davon. Ich dachte, ich könnte mit der SkyRTC-Demo dieses Freundes (Building WebRTC Environment) problemlos chatten, aber nach langem Herumprobieren konnte ich nicht einmal Textnachrichten senden, geschweige denn Videos. Also habe ich es selbst gemacht.

Um Videokommunikation im öffentlichen Internet zu ermöglichen, sind die folgenden drei Kernelemente erforderlich:

• Einer davon ist der NAT-Penetrationsserver (ICE-Server), der Intranet-Penetration realisiert. Sie können Baidu nach seiner spezifischen Funktion durchsuchen.
• Ein WebSocket-basierter Signalisierungsserver zum Einrichten eines Punkt-zu-Punkt-Kanals. Webclient.
• Zur Benutzerinteraktion wird die Kamera über die WebRTC-Funktion von H5 aufgerufen.

Die drei Teile setzen sich wie folgt zusammen:

Der blaue Teil kann tatsächlich auf drei Servern bereitgestellt werden, aber die Demonstrationsumgebung hier befindet sich auf einem Server. Die zu öffnenden Ports sind 3478, 8888 und 8080. Natürlich können Sie diese auch selbst konfigurieren. Im Folgenden sind die detaillierten Kombinationsschritte aufgeführt:

Vorbereitung

Server-Betriebsumgebung: CentOS 7.3

Installationstools: nodejs, git, bitte installieren Sie es über Baidu

Clientumgebung: FireFox (oder mobile Version von FireFox). Da Chrome https-Unterstützung erfordert, muss der Server ein Zertifikat bereitstellen. Daher unterstützt das Demoprogramm nur Firefox. Bei Bedarf werde ich einen weiteren Artikel veröffentlichen, um es vorzustellen.

Installieren des NAT-Traversal-Servers (ICE-Server)

Es gibt zwei Hauptmethoden, um das Intranet zu erreichen: Stun und Turn. Im Allgemeinen werden die Adressen von Stun und Turn konfiguriert. Wenn Stun keine Verbindung herstellen kann, wird automatisch auf den Turn-Server umgeschaltet. Eine ausführliche Einführung finden Sie unter: Einführung in STUN, TURN, ICE Es gibt viele Open-Source-Stun-Server im Internet, aber ich hatte mit keinem davon noch Erfolg. Wenn Sie interessiert sind, können Sie Folgendes versuchen: https://www.jb51.net/article/181287.htm Ich werde Coturn direkt verwenden, um den Turn-Server zu erstellen. Der Installationsbefehl lautet wie folgt:

Git-Klon https://github.com/coturn/coturn
CD-Coturn
./konfigurieren
machen
installieren

P.S. Wenn ./configure fehlschlägt, werden wahrscheinlich openssl und Libevent2 benötigt:

yum install -y openssl openssl-devel

yum -y installiere libevent-devel

Nachdem die Installation abgeschlossen ist, kopieren Sie turnserver.conf in example/etc in den Bin-Ordner:

cp Beispiele/etc/turnserver.conf bin/turnserver.conf

Ändern Sie die Konfiguration turnserver.conf wie folgt:

#Abhörport listening-port=3478

#Alibaba Cloud Intranet IP
Abhör-IP=10.214.31.57

#Alibaba Cloud externe Netzwerk-IP-Adresse external-ip=118.24.78.34
#Zugriffsbenutzer und Passwort user=yubao:000000

Starten Sie den Dienst:

CD-Behälter
turnserver -v -r 118.24.78.34:3478 -a -o

Nach der Einrichtung können Sie unter https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/ wie folgt testen, ob es erfolgreich ist:

Sie können das laufende Protokoll auch jederzeit im Ordner /var/log anzeigen, wie zum Beispiel bei mir:

tail -f /var/log/turn_12447_2018-04-20.log

Signalisierungsserver

Der Signalserver verwendet Signalmaster, basierend auf WebSocket. Der Grund für diese Wahl liegt darin, dass sie direkt in den Turn-Server integriert werden kann.

Git-Klon https://github.com/andyet/signalmaster.git
CD-Signalmaster
npm install express
npm installiere Yetify
npm installiere getconfig
npm installiere Node-UUID
npm installiere socket.io

Signalmaster kann sich mit Turnserver verbinden, unterstützt aber keinen Benutzernamen/Passwort-Modus. Zeile 110 des Quellcodes sockets.js muss angepasst werden. Der angepasste Code lautet wie folgt:

wenn (!config.turnorigins || config.turnorigins.indexOf(origin) !== -1) {
  config.turnservers.forEach(Funktion (Server) {
  Anmeldeinformationen.push({
   Benutzername: Server.Benutzername,
   Anmeldeinformation: Server.Anmeldeinformation,
   URLs: server.urls || server.urls
  });
  });
 }

Ändern Sie nach Abschluss config/production.json und konfigurieren Sie den Benutzer und das Passwort des Turnservers wie folgt:

{
 "isDev": wahr,
 "Server": {
 "Port": 8888,
 "/* secure */": "/* ob die Verbindung über https hergestellt wird */",
 "sicher": falsch,
 "Schlüssel": null,
 "Zertifikat": null,
 "Passwort": null
 },
 "Zimmer": {
 "/* maxClients */": "/* Maximale Anzahl von Kunden pro Raum. 0 = keine Begrenzung */",
 "maxClients": 0
 },
 "Stunserver": [
 {
 "URLs": "stun:stun.ekiga.net:3478"
 }
 ],
 "Turnserver": [
 {
 "URLs": ["turn:qq.openauth.me:3478"],
 "Benutzername": "yubao",
 "Anmeldeinformationen": "000000", 
 "Ablauf": 86400
 }
 ]
}

Start-up:

nohup node server.js &

Web-Client

Der Client kann schnell eine HTML-Seite erstellen. Sie können sich auf Folgendes beziehen: Schrittweiser Aufbau eines Kundendienstsystems (1) Implementierung einer Webversion eines Text- und Video-Chatrooms für mehrere Personen in 3 Minuten (einschließlich des vollständigen Quellcodes). Wenn Sie zu faul sind, klicken Sie einfach zum Herunterladen. Sie können einen statischen Webserver finden und bereitstellen. Hinweis zum Ändern der Signalserveradresse im zweiten Teil:

var webrtc = neues SimpleWebRTC({

 localVideoEl: 'lokalesVideo',
 
 remoteVideosEl: 'remoteVideos',

 autoRequestMedia: true,

 url:'http://qq.openauth.me:8888', //Als eigenen Signalserver konfigurieren Nick: 'yubaolee' //Spitzname des Benutzers während des Textchats});

Die Adresse, die ich bereitgestellt habe, lautet: http://qq.openauth.me:8080/baortc/index.html (besuchen Sie sie nicht zufällig, ich wäre schüchtern, wenn Sie mich plötzlich sehen würden 🙂 (✿◡‿◡)), Computer FireFox (Chrome hat höhere Sicherheitsanforderungen und muss https verwenden, verwenden Sie vorübergehend Firefox zum Testen). Zugriffseffekt:

Wenn Sie die Seite über Firefox von einem anderen Computer oder Mobiltelefon aus aufrufen, werden Sie feststellen, dass bereits zwei Videofenster vorhanden sind (die soeben auf dem Computer geöffnete Seite hat automatisch auch zwei Videofenster) und Sie per Text und Video kommunizieren können:

Von da an wurde ein WebRTC-Programm erstellt.

Zusammenfassen

Dies ist das Ende dieses Artikels über das Erstellen eines WebRTC-Videochats in 5 Minuten. Weitere verwandte Inhalte zum WebRTC-Videochat finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!