Einführung in WebRTC

Installations- und Code-Handbuch

WebRTC (Web Real-Time Communication) ist eine Open-Source-Technologie, die Echtzeitkommunikation über einfache APIs in Webbrowsern und mobilen Apps ermöglicht. Es ermöglicht den direkten Austausch von Audio, Video und Daten zwischen Kollegen, ohne dass ein Zwischenserver erforderlich ist, und eignet sich daher perfekt für Anwendungen wie Videokonferenzen, Live-Streaming und Dateifreigabe.

In diesem Blog befassen wir uns mit den folgenden Themen:

1. Was ist WebRTC?
2. Hauptfunktionen von WebRTC
3. WebRTC installieren
4. Erstellen einer einfachen WebRTC-Anwendung
5. Den Kodex verstehen
6. Fazit

---

Was ist WebRTC?

WebRTC ist eine Reihe von Standards und Protokollen, die eine Echtzeit-Audio-, Video- und Datenkommunikation zwischen Webbrowsern ermöglichen. Es umfasst mehrere Schlüsselkomponenten:

• getUserMedia: Erfasst Audio- und Videostreams vom Gerät des Benutzers.
• RTCPeerConnection: Verwaltet die Peer-to-Peer-Verbindung und verwaltet Audio- und Video-Streaming.
• RTCDataChannel: Ermöglicht die Datenübertragung in Echtzeit zwischen Peers.

Hauptmerkmale von WebRTC

1. Echtzeitkommunikation: Kommunikation mit geringer Latenz und minimaler Verzögerung.
2. Browserkompatibilität: Unterstützt von den meisten modernen Webbrowsern (Chrome, Firefox, Safari, Edge).
3. Keine Plugins erforderlich: Funktioniert direkt im Browser ohne zusätzliche Plugins oder Software.
4. Sicher: Verwendet Verschlüsselung für sichere Kommunikation.

WebRTC installieren

WebRTC ist eine clientseitige Technologie und erfordert keine spezielle Serverinstallation. Sie benötigen jedoch einen Webserver, um Ihre HTML- und JavaScript-Dateien bereitzustellen. Für die lokale Entwicklung können Sie einen einfachen HTTP-Server verwenden.

Voraussetzungen

• Node.js: Zum Einrichten eines lokalen Servers.
• Ein moderner Webbrowser: Chrome, Firefox, Safari oder Edge.

Einrichten eines lokalen Servers

1. Node.js installieren: Laden Sie Node.js von nodejs.org herunter und installieren Sie es.

2. Erstellen Sie ein Projektverzeichnis: Öffnen Sie ein Terminal und erstellen Sie ein neues Verzeichnis für Ihr Projekt.
   

   mkdir webrtc-project
   cd webrtc-project
   

3. Node.js-Projekt initialisieren:
   

   npm init -y
   

4. HTTP-Server installieren:
   

   npm install --save http-server
   

5. Erstellen Sie Ihre Projektdateien:

   • index.html
   • main.js

Erstellen Sie eine index.html-Datei mit folgendem Inhalt:

```html
8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
93f0f5c25f18dab9d176bd4f6de5d30e
    1fc2df4564f5324148703df3b6ed50c1
    4f2fb0231f24e8aef524fc9bf9b9874f
    b2386ffb911b14667cb8f0f91ea547a7WebRTC Example6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    4a249f0d628e2318394fd9b75b4636b1WebRTC Example473f0a7621bec819994bb5020d29372a
    886e14ee2bf2e07562cf694bdd704993a6a9c6d3f311dabb528ad355798dc27d
    fc3cb8de349c32412815ef2a53a0fb7ca6a9c6d3f311dabb528ad355798dc27d
    e803653d6fd93b3996ebf69dd59af1622cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
```

Erstellen einer einfachen WebRTC-Anwendung

Wir erstellen eine einfache Peer-to-Peer-Videoanrufanwendung. In diesem Beispiel werden zwei Browser-Registerkarten verwendet, um die Peer-Verbindung zu simulieren.

Code-Erklärung

1. Lokales Video aufnehmen: Verwenden Sie getUserMedia, um Videos von der Kamera des Benutzers aufzunehmen.

2. Peer-Verbindung erstellen: Stellen Sie eine Peer-Verbindung zwischen den lokalen und Remote-Peers her.

3. Angebot und Antwort austauschen: Verwenden Sie SDP (Session Description Protocol), um Verbindungsdetails auszutauschen.

4. Behandeln Sie ICE-Kandidaten: Tauschen Sie ICE-Kandidaten aus, um die Verbindung herzustellen.

Erstellen Sie eine main.js-Datei mit folgendem Inhalt:

const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');

let localStream;
let peerConnection;
const serverConfig = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
const constraints = { video: true, audio: true };

// Get local video stream
navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
        localStream = stream;
        localVideo.srcObject = stream;
        setupPeerConnection();
    })
    .catch(error => {
        console.error('Error accessing media devices.', error);
    });

function setupPeerConnection() {
    peerConnection = new RTCPeerConnection(serverConfig);

    // Add local stream to the peer connection
    localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

    // Handle remote stream
    peerConnection.ontrack = event => {
        remoteVideo.srcObject = event.streams[0];
    };

    // Handle ICE candidates
    peerConnection.onicecandidate = event => {
        if (event.candidate) {
            sendSignal({ 'ice': event.candidate });
        }
    };

    // Create an offer and set local description
    peerConnection.createOffer()
        .then(offer => {
            return peerConnection.setLocalDescription(offer);
        })
        .then(() => {
            sendSignal({ 'offer': peerConnection.localDescription });
        })
        .catch(error => {
            console.error('Error creating an offer.', error);
        });
}

// Handle signals (for demo purposes, this should be replaced with a signaling server)
function sendSignal(signal) {
    console.log('Sending signal:', signal);
    // Here you would send the signal to the other peer (e.g., via WebSocket)
}

function receiveSignal(signal) {
    if (signal.offer) {
        peerConnection.setRemoteDescription(new RTCSessionDescription(signal.offer))
            .then(() => peerConnection.createAnswer())
            .then(answer => peerConnection.setLocalDescription(answer))
            .then(() => sendSignal({ 'answer': peerConnection.localDescription }));
    } else if (signal.answer) {
        peerConnection.setRemoteDescription(new RTCSessionDescription(signal.answer));
    } else if (signal.ice) {
        peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice));
    }
}

// Simulate receiving a signal from another peer
// This would typically be handled by a signaling server
setTimeout(() => {
    receiveSignal({
        offer: {
            type: 'offer',
            sdp: '...' // SDP offer from the other peer
        }
    });
}, 1000);

Den Kodex verstehen

1. Medienerfassung: navigator.mediaDevices.getUserMedia erfasst den lokalen Videostream.
2. Peer-Verbindungs-Setup: RTCPeerConnection verwaltet die Peer-Verbindung.
3. Angebot und Antwort: SDP-Angebote und -Antworten werden zur Aushandlung der Verbindung verwendet.
4. ICE-Kandidaten: ICE-Kandidaten werden verwendet, um Konnektivität zwischen Kollegen herzustellen.

Das obige ist der detaillierte Inhalt vonEinführung in WebRTC. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!