Erstellen einer WebRTC -Video -Chat -Anwendung mit SimpleWebrtc

Erstellen Sie eine Live -Video -Chat -Anwendung basierend auf SimpleWebrtc

Dieses Buch "6 JavaScript -Projekte" enthält diesen Artikel, mit dem Sie einen Einblick in die moderne JavaScript -Entwicklung erhalten möchten. Mit dem Aufstieg von WEBRTC und der verbesserten Fähigkeit von Browsern, die Echtzeit-Punkt-zu-Punkt-Kommunikation zu bewältigen, ist das Erstellen von Echtzeitanwendungen einfacher als je zuvor. In diesem Tutorial werden SimpleWebrtc und die Funktionsweise unserer Arbeit bei der Implementierung von WEBRTC untersucht. Während des gesamten Prozesses erstellen wir eine WebRTC -Video -Chat -Anwendung mit Messaging -Funktionen.

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

Kernpunkte

• SimpleWebrtc ist eine JavaScript-Bibliothek, die die Implementierung von WEBRTC vereinfacht und das Erstellen von Video- und Audioanwendungen in Echtzeit erleichtert, die auf verschiedenen Browsern ausgeführt werden können, ohne einen Browser-spezifischen Code zu schreiben.
• Dieses Tutorial zeigt, wie eine Video -Chat -Anwendung mit SimpleWebrtc erstellt wird, bei der eine einzelne Seitenanwendung auf einem Express -Server eingerichtet wird und Node.js und NPM für die Abhängigkeitsverwaltung erforderlich ist.
• Zu den wichtigsten Abhängigkeiten gehören SimpleWebrtc, semantische UI -CSS für Stileinstellungen, JQuery für DOM -Operationen, Lenker für Vorlagen und Express als Webserver.
• Die Anwendung unterstützt das Erstellen und Verbinden von Chatrooms, das Senden von Nachrichten und die Verarbeitung mehrerer Videostreams, wodurch die Fähigkeit von SimpleWebrtc, komplexe Punkt-zu-Punkt-Kommunikationsszenarien zu verwalten, demonstriert.
• Anwendungen können einfach mit dem ZEIT -CLI -Tool von ZEIT bereitgestellt werden, wodurch ein schnelles Setup und die öffentliche Freigabe von Anwendungen ermöglicht werden können. now
Dieses Tutorial bietet einen umfassenden Leitfaden zum Erstellen einer featurereichen Echtzeit-Kommunikationsanwendung mit SimpleWebrtc, wobei die Benutzerfreundlichkeit und die Kompatibilität der Bibliothek mit Kreuzbrowser hervorgehoben werden.

Was ist SimpleWebrtc?

Es ist wichtig, die wichtigsten Tools zu verstehen, die wir verwenden werden, bevor wir fortfahren. SimpleWebrtc ist eine JavaScript-Bibliothek, die WebRTC-Punkt-zu-Punkt-Daten-, Video- und Audioanrufe vereinfacht.

SimpleWebrtc fungiert als Wrapper für die Browser -WEBRTC -Implementierung. Wie Sie vielleicht bereits wissen, stimmen Browser -Anbieter nicht vollständig mit einem einzelnen Ansatz zur Implementierung verschiedener Funktionen überein, was bedeutet, dass jeder Browser eine andere WEBRTC -Implementierung hat. Als Entwickler müssen Sie für jeden Browser einen anderen Code schreiben, den Sie unterstützen möchten. SimpleWebrt fungiert als Wrapper für diesen Code. Die exponierte API ist einfach zu bedienen und zu verstehen, was es zu einer ausgezeichneten Wahl für die Implementierung von Cross-Browser-WEBRTC macht.

bauen webrtc Video -Chat -Anwendung

Es ist Zeit, Ihre App praktisch zu erstellen. Wir erstellen eine einzelne Seitenanwendung, die auf dem Express -Server ausgeführt wird.

Bitte beachten Sie, dass Sie den Code für dieses Tutorial aus unserem GitHub -Repository herunterladen können. Um es zu Hause auszuführen oder zu Hause zu folgen, müssen Sie Knoten und NPM installieren. Wenn Sie diese nicht mit diesen vertraut sind oder eine Installationshilfe benötigen, lesen Sie bitte unser vorheriges Tutorial:

• Mehrere Versionen von node.js mit nvm
installieren
• NPM Erste Schritte - Node Package Manager

Sie benötigen auch einen Computer oder einen Laptop mit einer Webcam. Wenn nicht, benötigen Sie eine USB -Webcam, die mit der Spitze des Monitors verbunden werden kann. Möglicherweise benötigen Sie einen Freund oder ein zweites Gerät, um die Remoteverbindung zu testen.

Abhängigkeiten

Wir werden die folgenden Abhängigkeiten verwenden, um unser Projekt zu erstellen:

• SimpleWebrtc - Webrtc Library
• semantische UI CSS - ein elegantes CSS -Rahmen
jQuery - Wird verwendet, um Elemente und Ereignisverarbeitung auf der Seite auszuwählen.
Lenker - eine JavaScript -Vorlagenbibliothek, mit der wir HTML für Nachrichten
• generieren können
Express - NodeJS -Server.

Projekteinstellungen

simplewebrtc-messenger Gehen Sie zu Ihrem Arbeitsbereich und erstellen Sie einen Ordner namens

. Öffnen Sie den Ordner in VSCODE oder Ihren bevorzugten Editor und erstellen Sie die folgende Datei- und Ordnerstruktur:

<code>simplewebrtc-messenger
├── public
│   ├── images
│   │   └── image.png
│   ├── index.html
│   └── js
│       └── app.js
├── README.md
└── server.js</code>

oder, wenn Sie es vorziehen, können Sie dasselbe über die Befehlszeile tun:

<code>mkdir -p simplewebrtc-messenger/public/{images,js}
cd simplewebrtc-messenger
touch public/js/app.js public/index.html .gitignore README.md server.js</code>

README.md öffnen

und kopieren Sie Folgendes:

<code># Simple WebRTC Messenger

A tutorial on building a WebRTC video chat app using SimpleWebRTC.</code>

node_modules Wenn Sie ein Git -Repository verwenden möchten, fügen Sie .gitignore zur package.json -Datei hinzu. Verwenden Sie den folgenden Befehl, um die Datei

zu generieren:

<code>npm init -y</code>

Sie sollten die folgende Ausgabe erhalten:

{
  "name": "simplewebrtc-messenger",
  "version": "1.0.0",
  "description": "A tutorial on building a WebRTC video chat app using SimpleWebRTC.",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

installieren wir jetzt unsere Abhängigkeiten:

<code>npm install express handlebars jquery semantic-ui-css simplewebrtc</code>

server.js Kopieren Sie diesen Code während der Installation in

:

const express = require('express');

const app = express();
const port = 3000;

// 设置公共文件夹为根目录
app.use(express.static('public'));

// 从客户端提供对node_modules文件夹的访问
app.use('/scripts', express.static(`${__dirname}/node_modules/`));

// 将所有流量重定向到index.html
app.use((req, res) => res.sendFile(`${__dirname}/public/index.html`));

app.listen(port, () => {
  console.info('listening on %d', port);
});

Der Servercode ist sehr Standard. Lesen Sie einfach die Kommentare, um zu sehen, was los ist.

public/index.html Setzen wir als nächstes die Datei

:

(Der Code index.html sollte hier eingefügt werden, und aufgrund von Platzbeschränkungen wird er hier weggelassen. Bitte beachten Sie den Originaltext, um den vollständigen Code zu erhalten)

public/js/app.js Als nächstes richten wir den grundlegenden Client -JavaScript -Code ein. Kopieren Sie diesen Code in

:

window.addEventListener('load', () => {
  // 将所有客户端代码放在这里
});

public/images Laden Sie dieses Bild schließlich von unserem Github -Repository herunter und speichern Sie es im Ordner

.

Jetzt können wir unsere Anwendung ausführen:

<code>npm start</code>

localhost:3000 URL in Ihrem Browser

öffnen, und Sie sollten Folgendes sehen:

(Bild sollte hier aufgrund von Platzbeschränkungen eingefügt werden, die hier weggelassen werden. Bitte beachten Sie den Originaltext, um das Bild zu erhalten)

(Der folgende Inhalt verarbeitet die Codesegmente weiterhin entsprechend der ursprünglichen Textstruktur. Aufgrund von Platzbeschränkungen werden alle nachfolgenden Codesegmente und Bilder hier weggelassen. Weitere Informationen finden Sie im Originaltext für den vollständigen Code und für den vollständigen Code und die vollständigen Bilder.)

Schlussfolgerung

In diesem Tutorial haben Sie SimpleWebrtc gelernt und wie man sie verwendet, um eine Live -Anwendung zu erstellen. Insbesondere haben wir eine Messaging -Anwendung erstellt, mit der Benutzer Text senden und Videoanrufe an Remote -Kollegen tätigen können. SimpleWebrtc ist eine großartige Cross-Browser-Bibliothek, mit der WEBRTC in Webanwendungen problemlos implementiert werden kann.

Vergessen Sie nicht, dass der in diesem Tutorial verwendete Code auf GitHub verfügbar ist. Klonen Sie es, kreieren Sie etwas Cooles und haben Sie Spaß!

(Der FAQ -Teil wird hier aus Platzbeschränkungen weggelassen. Hier finden Sie den Originaltext für den vollständigen FAQ -Inhalt.)

Das obige ist der detaillierte Inhalt vonErstellen einer WebRTC -Video -Chat -Anwendung mit SimpleWebrtc. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!