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: 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: 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:123Zu 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 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:
|
<<: Jmeter stellt eine Verbindung zum Datenbankprozessdiagramm her
>>: Einfache Implementierung von Mini-Vue-Rendering
Artikel empfehlen
Detaillierte Erklärung der neuen CSS-Eigenschaft display:box
1. Anzeige:Box; Wenn Sie diese Eigenschaft für ei...
JavaScript-Grundlagenvariablen
Inhaltsverzeichnis 1. Variablenübersicht 1.1 Spei...
Vue+openlayer5-Methode zum Abrufen der Koordinaten des aktuellen Mauszeigers
Vorwort: Wie erhält man die Koordinaten der aktue...
Übersicht über die Definition der HTC-Komponenten nach IE5.0
Vor der Veröffentlichung von Microsoft IE 5.0 best...
JavaScript-Canvas zum Erzielen von Meteoreffekten
In diesem Artikel wird der spezifische Code für J...
Zusammenfassung zum Ändern des Root-Passworts in MySQL 5.7 und MySQL 8.0
MySQL 5.7-Version: Methode 1: Verwenden Sie den B...
Lösung zum Anwenden von CSS3-Transformationen auf Hintergrundbilder
CSS-Transformationen sind zwar cool, wurden aber ...
Zusammenfassung der JavaScript-Timertypen
Inhaltsverzeichnis 1.setInterval() 2.setTimeout()...
Tutorial zu HTML-Formular-Tags (2):
Dieses Tutorial stellt die Anwendung verschiedene...
Methode zum dynamischen Laden von Geojson basierend auf Vue+Openlayer
Laden eines oder mehrerer Features <Vorlage>...
Mysql teilt Zeichenfolge durch gespeicherte Prozedur in Array auf
Um einen String in ein Array aufzuteilen, müssen ...
Der Unterschied zwischen clientWidth, offsetWidth, scrollWidth in JavaScript
1. Konzept Sie alle sind Attribute des Elements u...
Einführung in den Swap-Speicher des Linux-Systems
Swap-Speicher ist heutzutage ein gängiger Aspekt ...
Beispielcode zum Konvertieren des Mysql-Abfrageergebnissatzes in JSON-Daten
Mysql konvertiert Abfrageergebnissatz in JSON-Dat...
Lösung für das Problem des verstümmelten chinesischen Codes in der dekomprimierten Version von MySQL
Die dekomprimierte Version von MySQL ist installi...