Einführung

Hallo! ?

In diesem Tutorial zeige ich Ihnen, wie Sie die WebCodec-API zum Senden und Empfangen von Videos verwenden.

Lass uns zunächst mit der Codierung des Servers beginnen.

Einrichten des Servers

Um Pakete zwischen Peers zu senden und zu empfangen, benötigen wir einen Websocket-Server.

Dazu erstellen wir einen sehr einfachen Server mit NodeJS. Initialisieren Sie zuerst das Projekt:

npm init -y

Dann installieren Sie die erforderlichen Module:

npm i ws express

Erstellen Sie als Nächstes eine neue Datei mit dem Namen „index.js“ und füllen Sie sie mit dem folgenden Code:

// server.js
const WebSocket = require('ws');
const express = require('express');

const app = express();
const port = 3000;
const connectedClients = new Set();

app.use(express.static(__dirname   '/public'));

const wss = new WebSocket.Server({ noServer: true });

wss.on('connection', ws => {
  console.log('new connection');
  connectedClients.add(ws);

  ws.on('message', message => {
    connectedClients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.once('close', () => {
    connectedClients.delete(ws);
    console.log('connection closed');
  });
});

const server = app.listen(port, () => {
  console.log(`server running on port ${port}`);
});

server.on('upgrade', (request, socket, head) => {
  wss.handleUpgrade(request, socket, head, (ws) => {
    wss.emit('connection', ws, request);
  });
});

Nichts allzu kompliziertes, der obige Code bedient das öffentliche Verzeichnis und kümmert sich um die WebSocket-Verbindung, die Pakete an alle verbundenen Peers sendet. ?

Als nächstes kümmern wir uns um den Absenderteil, erstellen aber zunächst ein neues Verzeichnis mit dem Namen „public“

mkdir public

Den Absender erstellen

Die erste Frontend-Datei, die wir erstellen, ist diejenige, die sendet. Erstellen Sie unter „öffentlich“ eine neue Datei mit dem Namen „sender.html“ und füllen Sie sie mit dem folgenden HTML-Code:

Um aufzuschlüsseln und zu erklären, was der Code tut.

1. HTML-Struktur
   • Das Videoelement zeigt Live-Video von der Kamera des Benutzers an
   • Das Canvas-Element wird verwendet, um einzelne Frames des Video-Feeds anzuzeigen. Dies bietet eine visuelle Vorschau jedes codierten Frames
2. JavaScript-Code
   • Die initWebSocket-Funktion stellt eine Verbindung zu einem WebSocket-Server her. Diese Verbindung ist für das Streamen der codierten Frames an einen Empfänger unerlässlich
   • Die Funktion initEncoder erstellt ein VideoEncoder-Objekt. Es definiert einen Ausgaberückruf, der jedes Mal ausgeführt wird, wenn der Encoder einen neuen Block erzeugt
   • videoEncoder.configure() stellt den Codec auf VP8 mit einer Bitrate von 1 Mbit/s und 30 FPS ein und sorgt so für eine reibungslose und qualitativ hochwertige Kodierung.
   Der Aufruf
   • getUserMedia wird verwendet, um den Zugriff auf die Kamera anzufordern. Der Video-Feed wird dem Videoelement zugewiesen und der VideoTrackProcessor ermöglicht die Verarbeitung jedes Frames in Echtzeit
   • Die Funktion „processFrames“ liest Frames aus dem Video, zeigt sie auf dem Canvas-Element an und codiert jeden Frame mit videoEncoder.encode(). Jeder Frame wird dann als codierter Block an den Server gesendet.

Puh! Hoffentlich war das für Sie verständlich. Als nächstes erstellen wir die Datei, die den Stream empfängt. ?

Erstellen des Empfängers

Diese Datei empfängt die codierten Videoblöcke über WebSocket, decodiert sie und zeigt sie auf einem Canvas-Element an.

Erstellen Sie im öffentlichen Verzeichnis eine neue Datei mit dem Namen „receiver.html“ und füllen Sie sie mit Folgendem:

Um die obige Datei aufzuschlüsseln:

1. HTML
   • Das Canvas-Element ist der primäre Anzeigebereich für die dekodierten Videobilder. Sie hat eine feste Breite, Höhe und einen festen Rand, genau wie die Absenderseite.
2. JavaScript
   • Die initWebSocket-Funktion erstellt eine neue WebSocket-Verbindung, empfängt codierte Frames vom Absender und übergibt sie zur Dekodierung an decodeFrame().
   • initDecoder initialisiert ein VideoDecoder-Objekt, das für den VP8-Codec konfiguriert ist. Der Decoder gibt jeden Frame auf der Leinwand aus.
   • decodeFrame nimmt die codierten Daten, verpackt sie in einen EncodedVideoChunk (als Schlüsselbild mit dem aktuellen Zeitstempel) und decodiert sie über videoDecoder.decode(). Jeder Frame wird in Echtzeit auf der Leinwand angezeigt

Puh! Nachdem wir nun alle benötigten Teile haben, können wir es tatsächlich ausführen! ?

Den Code ausführen

Um den Code auszuführen, führen Sie einfach den folgenden Befehl aus:

node index.js

Dann richten Sie Ihren Browser auf http://localhost:3000/sender.html
Erlauben Sie den Zugriff auf Ihre Kamera und öffnen Sie dann einen weiteren Tab, um
http://localhost:3000/receiver.html

Sie sollten sehen, wie der Stream vom Absender gesendet wird.

Abschluss

In diesem Tutorial habe ich gezeigt, wie man Zugriff auf die Kamera erhält, sie kodiert, die Chunks über WebSocket sendet und sie dekodiert und auf der Empfängerseite anzeigt. Ich hoffe, dieses Tutorial war für Sie von Nutzen. ?

Den Code könnt ihr wie immer über meinen Github bekommen:
https://github.com/ethand91/webcodec-stream

Viel Spaß beim Codieren! ?

Gefällt mir meine Arbeit? Ich poste über eine Vielzahl von Themen. Wenn Sie mehr sehen möchten, liken Sie mich bitte und folgen Sie mir.
Außerdem liebe ich Kaffee.

Wenn Sie Algorithmusmuster lernen möchten, um das Coding-Interview zu meistern, empfehle ich den [folgenden Kurs](https://algolab.so/p/algorithms-and-data-structure-video-course?affcode=1413380_bzrepgch