Detaillierter Code zum Erstellen eines Mehrpersonen-Video-Chat-Dienstes basierend auf WebRTC unter Ubuntu

Detaillierter Code zum Erstellen eines Mehrpersonen-Video-Chat-Dienstes basierend auf WebRTC unter Ubuntu

WebRTC steht für Web Real-Time Communication und ist eine Web-Echtzeit-Kommunikationstechnologie. Vereinfacht ausgedrückt geht es darum, Echtzeitkommunikation im Webbrowser einzuführen, einschließlich Audio- und Videoanrufen.

Während der Epidemie konnte ich nirgendwo hingehen, also habe ich zu Hause die WebRTC-Video-Liveübertragungstechnologie studiert. Ich habe im Internet einige Tutorials gefunden, aber keines davon funktionierte reibungslos. Es kann sein, dass die Artikel relativ alt geschrieben wurden, einige verwendete Open-Source-Komponenten aktualisiert wurden und einige Konfigurationen nicht mehr dieselben sind, sodass es beim Befolgen der vorherigen Schritte zu Problemen kommen wird. Nach einigem Mühen habe ich es endlich zum Laufen gebracht. Ich werde es aufzeichnen.

Eine einfache Chatroom-HTML-Seite

Diese Seite verwendet simple-webrtc zur Implementierung der WebRTC-Kommunikation. simple-webrtc ist eine Kapselung mehrerer WebRTC-Kernobjekte und daher relativ einfach zu verwenden.

<!DOCTYPE html>
<html>
<Kopf>
 <title>WebRTC-Chatroom</title>
 <Stil>
 Video
 Höhe: 200px;
 Breite: 200px;
 Rand: 1px durchgehendes Kornblumenblau;
 Rahmenradius: 3px;
 Rand: 10px;
 }
 </Stil>
</Kopf>
<Text>
 <div>
 Raum-ID: <input id="roomid" type="text" value=""/> <input type="button" id="btnStart" value="Raum betreten">
 </div>
 
 <div>
 Spitzname: <input id = "nickname" readonly = "readonly" type = "text" value = "">
 </div>
 <h3>
 selbst:
 </h3>
 <video id="localVideo"></video>
 <div id="remoteVideos">
 <h3>
 Remote-Clients:
 </h3>
 </div>
 <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
 <script src="js/simplewebrtc-with-adapter.bundle.js"></script>
 <script lang="javascript">
 $("#Spitzname").val(new Date().getTime()); 
 var qs = Funktion (Schlüssel) {
 Rückgabe (document.location.search.match(neuer RegExp("(?:^\\?|&)" + Schlüssel + "=(.*?)(?=&|$)")) || ['', null])[1];
 };

 var Zimmer-ID = qs("Zimmer-ID");
 if (Raum-ID) {
 $('#zimmerid').val(zimmerid);
 }
 anders {
 $('#roomid').val('99999');
 }
 // $('#zimmerid').val(zimmerid);
 var smUrl = "https://webrtc.xxx.com:8800";
 var webrtc = neues SimpleWebRTC({
 // das ID/Element-Dom-Element, das „unser“ Video enthalten wird
 localVideoEl: 'lokalesVideo',
 // das ID/Element-DOM-Element, das Remote-Videos enthalten wird
 remoteVideosEl: 'remoteVideos',
 // sofort nach Kamerazugriff fragen
 autoRequestMedia: true,
 URL:smURL,
 Spitzname: $('#nickname').val(),
 });

 webrtc.on('readyToCall', Funktion () {
 // Sie können es beliebig benennen
 console.log('verbunden .');
 });
 webrtc.on("erstellterPeer", Funktion (Peer) {
 console.log('erstellterPeer', peer, peer.nick);
 wenn (Peer.Nick) {
 Alarm('Client ' + Peer.Nick + ' beigetreten');
 }
 });
 webrtc.on("beigetretenerRaum", (Raumname)=>{
 console.log('beigetretenerRaum', Raumname );
 alert('Raum beigetreten ' + Raumname );
 });
 webrtc.on("linkerRaum", (Raumname)=>{
 console.log('linkerRaum', Raumname );
 });
 webrtc.on("videoAdded", (videoEl, peer )=>{
 console.log('videoAdded', videoEl, peer);
 wenn (Peer.Nick) {
 Alarm('Client ' + Peer.Nick + ' beigetreten');
 }
 });
 webrtc.on("videoEntfernt", (videoEl, peer )=>{
 console.log('videoEntfernt', videoEl, peer);
 });
 $('#btnStart').klick(function(){
 var Zimmer-ID = $('#Zimmer-ID').val();
 webrtc.joinRoom(Raum-ID); 
 // Alarm (,,Raum betreten‘ + Raum-ID + ,,Erfolg‘‘) 
 })
 //$('#btnStart').klick();
 </Skript>
</body>
</html>

Installieren Sie nginx und stellen Sie die Chatroom-Seite bereit

Installieren Sie nginx:

sudo apt-get install nginx

Konfigurieren Sie nginx:

Server {
 hören Sie 80;
 hören Sie 443;
 Servername webrtc.xxx.com;
 Standort / {
  Index Index.html;
  Stamm-HTML/WWW;
  }
 SSL aktiviert;
 SSL-Zertifikat /ssl/xxx.crt;
 SSL-Zertifikatsschlüssel /ssl/xxx.key;
 SSL-Sitzungszeitüberschreitung 5 Min.
 SSL-Protokolle TLSv1 TLSv1.1 TLSv1.2;
 ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HOCH:!aNULL:!MD5:!RC4:!DHE;

 }

Stellen Sie nach der Installation von nginx die obige HTML-Seite mit nginx auf dem Server bereit. Bitte beachten Sie, dass Sie https verwenden müssen, da Chrome so eingestellt ist, dass es kein https verwendet und daher die Kamera und das Mikrofon nicht aufrufen kann.

Installieren und Konfigurieren des Signalmaster-Signalisierungsdienstes

Der Signalisierungsdienst wird zum Übertragen von WebRTC-Clientinformationen zwischen Clients verwendet. Da WebRTC beim Herstellen einer P2P-Verbindung relevante Informationen des anderen Clients benötigt, wird ein Kanal zum Weiterleiten von Informationen zwischen Clients benötigt. SignalMaster ist ein node.js-basierter Dienst, der socket.io verwendet, um dauerhafte WebSocket-Verbindungen zu implementieren.

Signalmaster installieren:

git clone https://github.com/simplewebrtc/signalmaster.git

Signalmaster konfigurieren:

CD-Signalmaster
CD-Konfiguration
vim-entwicklung.json
//bearbeiten{
 "isDev": wahr,
 "Server": {
 "Port": 8800,
 "/* secure */": "/* ob die Verbindung über https hergestellt wird */",
 "sicher": wahr,
 "Zertifikat": "/ssl/xxx.crt",
 "Schlüssel": "/ssl/xxx.key",
 "Passwort": null
 },
 "Zimmer": {
 "/* maxClients */": "/* Maximale Anzahl von Kunden pro Raum. 0 = keine Begrenzung */",
 "maxClients": 0
 },
 "Stunserver": [
 {
 "URLs": "stun:webrtc.xxx.com:3478"
 }
 ],
 "Turnserver": [
 {
 "URLs": ["turn:webrtc.xxx.com:3478"],
 "Benutzername": "abc",
 "Anmeldeinformationen": "123",
 "Geheimnis": "",
 "Ablauf": 86400
 }
 ]
}
~

Das Wichtigste, was Sie hier beachten müssen, ist, dass Sie auch ein SSL-Zertifikat konfigurieren müssen. Sie können das oben genannte Nginx-Zertifikat verwenden. Wenn trunserver ein Kennwort festgelegt hat, müssen Sie außerdem den richtigen Benutzernamen und das richtige Kennwort konfigurieren.

Installieren und Konfigurieren des Coturn Penetration Service

Unsere Clients befinden sich im Allgemeinen im lokalen Netzwerk, sodass beim Herstellen einer P2P-Verbindung eine Intranet-Durchdringung erforderlich ist. Verwenden Sie Coturn, um Turnserver als Penetrationsdienst einzurichten.

Coturn installieren:

# Abhängigkeiten
apt-get install -y \
 emacs-nox \
 Build-essenziell \
 libssl-dev sqlite3 \
 libsqlite3-dev \
 libevent-dev \
 g++ \
 libboost-dev \
 libevent-dev

# herunterladen
wget https://github.com/coturn/coturn/archive/4.5.0.7.tar.gz
tar xvf 4.5.0.7.tar.gz

# erstellen und installieren
cd coturn-4.5.0.7
./configure --prefix=/opt
machen
installieren

#Umgebung
echo "export PATH=/opt/bin:$PATH" >> ~/.bashrc
Quelle ~/.bashrc

Coturn konfigurieren:

cd coturn-4.5.0.7
vim coturn.conf
#Server
Abhörport=3478
Abhör-IP= 
Relais-IP = 
alt-listening-port=0
externe-IP= 
realm=abc

# server-name={IHR_SERVERNAME}

kein TLS
keine-dtls
Mobilität
kein CLI
ausführlich
Fingerabdruck

# Authentifizierung
lt-cred-mech
veraltete Nonce = 3600

# Benutzer
# Dies ist eine Demonstration. Es ist keine Datenbank konfiguriert. Verwenden Sie use={name}:{password} zur Konfiguration # userdb=/opt/var/db/turndb
# Für mehrere Benutzer schreiben Sie mehrere Zeilen user=abc:123

Zu beachten ist hierbei vor allem die IP-Konfiguration: lists-ip = Intranet-IP, lists-ip = Intranet-IP, lists-ip = externe IP. Wenn ein Benutzer konfiguriert ist, muss auch der Signalisierungsserver mit dem entsprechenden Benutzernamen und Passwort konfiguriert werden.

Alle Dienste ausführen

Führen Sie den Signalisierungsdienst aus:

CD-Signalmaster
Knotenserver.js

Führen Sie den Penetrationsserver aus:

cd coturn-4.5.0.7
turnserver -c coturn.conf

Besuchen Sie einfach die von nginx bereitgestellte statische Seite. Öffnen Sie zwei Webseiten und probieren Sie es selbst aus. Am besten bitten Sie andere Freunde, es zu versuchen. Manchmal, wenn der Penetrationsdienst nicht richtig konfiguriert ist, können Sie es selbst ausprobieren, aber nicht bei anderen.


siehe

Coturn: TURN- und STUN-Server
Erstellen Sie in 5 Minuten einen WebRTC-Videochat

korkenzieher

Zusammenfassen

Dies ist das Ende dieses Artikels über den Beispielcode zum Erstellen eines webrtc-basierten Mehrpersonen-Videochatdienstes unter Ubuntu. Weitere relevante Ubuntu-Webrtc-Videochat-Inhalte 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!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung der WebRTC-Bibliothek von Python zur Implementierung der Erkennung von Sprachendpunkten

<<:  Jmeter stellt eine Verbindung zum Datenbankprozessdiagramm her

>>:  Einfache Implementierung von Mini-Vue-Rendering

Artikel empfehlen

So erstellen Webdesigner Bilder für Retina-Displays

Besonderer Hinweis: Dieser Artikel wurde basieren...

VMware12.0-Installation Ubuntu14.04 LTS-Tutorial

Ich habe verschiedene Images sowohl unter virtuel...

Die grundlegende HTML-Syntax ist praktisch für diejenigen, die gerade erst anfangen, HTML zu lernen

1.1 Allgemeine Kennzeichnung Ein allgemeines Tag ...

Implementierung einer Fuzzy-Abfrage wie %% in MySQL

1, %, steht für beliebige 0 oder mehr Zeichen. Es...

Der Datenordner konnte während der Installation von mysql8.0.14.zip nicht automatisch erstellt werden. Der Dienst kann nicht gestartet werden.

Nachdem ich das System heute neu installiert hatt...

Detaillierte Erklärung, wie MySQL Phantom-Lesevorgänge löst

1. Was ist Phantomlesen? Wenn bei einer Transakti...

Einführung in die Rolle des HTML-Doctypes

Der Dokumentmodus verfügt über die folgenden zwei ...

Eine kurze Diskussion über die MySQL-Optimierungslösung für große Tabellen

Hintergrund Die Menge neuer Daten in der Geschäft...

Vue-Komponente kapselt Beispielcode zum Hochladen von Bildern und Videos

Laden Sie zuerst die Abhängigkeiten herunter: cnp...

Erstellen einer einfachen Game-Engine mit React Native

Inhaltsverzeichnis Einführung Erste Schritte Eine...

Detaillierte Erläuterung der MySQL-Optimierung für Schreibprobleme im großen Maßstab

Zusammenfassung: Wenn über die Leistungsoptimieru...

Beispielcode für HTML-Layout links und rechts

CSS: Code kopieren Der Code lautet wie folgt: html...

Implementierungsschritte zum Erstellen mehrseitiger Programme mit Webpack

Es ist sehr üblich, webpack zum Erstellen einseit...

Zwei Methoden zum Strecken des Hintergrundbilds einer Webseite

Es gibt zwei Lösungen: Eine Möglichkeit ist CSS, b...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.5.27 winx64

1. Installationspaket MySQL-Dienst-Downloadadress...