Video + KI: Anreicherung von Videostreams mit QR-Codes und Watermarking

Dieser Artikel wurde im Mai 2025 aktualisiert.

Einführung

Im heutigen digitalen Zeitalter wird die Verbesserung von Videostreams immer beliebter, sei es für Branding, Werbung oder die Bereitstellung zusätzlicher Informationen auf nicht aufdringliche Weise. In diesem Blogbeitrag erfahren Sie, wie Sie mithilfe der Vonage Video API QR-Codes und Wasserzeichen zu einem Videostream hinzufügen können.

Um dies zu erreichen, werden wir die Möglichkeiten der Medienprozessor-API nutzen. Diese innovative API bietet die Möglichkeit, Audio- und Videostreams durch die Integration von Transformatoren in den Stream zu personalisieren. Eine detaillierte Untersuchung der API und ihrer potenziellen Einsatzmöglichkeiten folgt später in diesem Blogbeitrag.

TL;DR: Wenn Sie den Vorgang überspringen und direkt mit dem Einsatz beginnen möchten, finden Sie den gesamten Code für die App auf GitHub

Projekt einrichten

1. Node und npm installieren

2. Kopieren Sie das GitHub-Repository

3. ausführen. npm install

4. ausführen. npm run serve

Medienprozessoren-API

Die Vonage Media Processor-Bibliothek, die über npm verfügbar ist, ist ein leistungsfähiges Tool, das die Verwendung der Insertable Streams API für die Umwandlung von Video- und Audiospuren vereinfacht. In diesem Blog-Beitrag werden wir nur die Video-Methoden verwenden.

Die Bibliothek führt zwei Hauptklassen ein:

• MediaProzessor: Diese Klasse verwaltet Transformatoren und verfügt über eine setTransformers() Methode, um die Transformatoren einzurichten.

• MediaProcessorConnector: Diese Klasse benötigt ein MediaProcessor-Objekt für ihren Konstruktor und ist für die Handhabung von Eingangs- und Ausgangsspuren verantwortlich. Während die Implementierung der Spuren vom Vonage Video JS Client übernommen wird, müssen Sie nur die Instanz von MediaProcessorConnector bereitstellen. Die entsprechende Dokumentation finden Sie unter https://developer.vonage.com/en/video/guides/media-processor/web

Lassen Sie uns nun in die Erstellung der Videoprozessoren für den QR-Code und die Wasserzeichenfunktion eintauchen.

QR-Codes verwenden

QR-Codes haben in der Praxis zahlreiche Anwendungen gefunden. Sie können Daten wie URLs, Text usw. enthalten, die mit einer Smartphone-Kamera gescannt werden können. In einem Videostream können QR-Codes für verschiedene Zwecke verwendet werden, z. B. um den Nutzer zu einer bestimmten URL weiterzuleiten oder einen benutzerspezifischen Text anzuzeigen.

Stellen Sie sich vor, Sie veranstalten ein Webinar, bei dem Sie Ihren Zuschauern nützliche Links zur Verfügung stellen möchten. Durch die Integration eines QR-Codes in Ihren Live-Stream können Sie Ihr Publikum mühelos zu diesen Links leiten und ihnen eine einfache Echtzeitmethode für den Zugriff auf relevante Inhalte bieten.

Technische Umsetzung

Wir generieren QR-Codes mithilfe eines benutzerdefinierten Transformators. Um den QR-Code zu erzeugen, verwenden wir eine Bibliothek eines Drittanbieters namens QrCode. Die URL für den QR-Code wird als Benutzereingabe verwendet. Wir verwenden den qrCode Transformer aus unserem transformers Verzeichnis, um den QR-Code zu erstellen und im Videostream zu positionieren. Sie können die Position und Größe des QR-Codes anpassen.

// file add-qr-code.js

 _createQrCodeWithBorder() {
    // --- Step 1: Generate the base QR code using the library ---


    // Create a temporary container DIV (required by qrcode.js)
    // This div is never added to the document.
    let tempQrContainer = document.createElement('div');


    // Generate the QR code *without* internal padding/border from the lib
    new QRCode(tempQrContainer, {
      text: this.text,
      width: this.qrWidth, // Use the data area width
      height: this.qrHeight, // Use the data area height
      colorDark: this.colorDark,
      colorLight: this.colorLight, // Background of QR code itself
      correctLevel: QRCode.CorrectLevel.H, // Or choose appropriate level
    });


    // qrcode.js generates either a <canvas> or an <img> inside the div.
    // Prefer canvas if available.
    const originalQrCanvas = tempQrContainer.querySelector('canvas');
    const originalQrImg = tempQrContainer.querySelector('img');


    if (!originalQrCanvas && !originalQrImg) {
      throw new Error('QRCode library did not generate canvas or img element.');
    }


    // --- Step 2: Create the final canvas with the border ---


    const finalCanvas = new OffscreenCanvas(this.finalWidth, this.finalHeight);
    const finalCtx = finalCanvas.getContext('2d');


    if (!finalCtx) {
      throw new Error('Unable to create final QR CanvasRenderingContext2D');
    }


    // --- Step 3: Draw the border (background) and the QR code ---


    // Fill the entire final canvas with the border color (usually white)
    finalCtx.fillStyle = this.colorLight; // Use colorLight for the border
    finalCtx.fillRect(0, 0, this.finalWidth, this.finalHeight);


    // Draw the generated QR code (canvas or img) onto the center of the final canvas
    const drawX = this.borderSize;
    const drawY = this.borderSize;


    if (originalQrCanvas) {
      finalCtx.drawImage(
        originalQrCanvas,
        drawX,
        drawY,
        this.qrWidth,
        this.qrHeight
      );
    } else {
      // If it generated an image, draw the image
      finalCtx.drawImage(
        originalQrImg,
        drawX,
        drawY,
        this.qrWidth,
        this.qrHeight
      );
    }


    // No need for the temporary div anymore
    tempQrContainer = null; // Let garbage collection handle it


    console.log('QR Code with border generated successfully.');
    return finalCanvas; // Return the canvas with the border
  }


  async transform(frame, controller) {
    // Ensure QR code generation was successful
    if (!this.qrCanvasWithBorder_) {
      // If QR code failed, just pass the frame through unmodified
      controller.enqueue(frame);
      return;
    }


    // Resize internal canvas only if needed (slight optimization)
    if (
      this.canvas_.width !== frame.displayWidth ||
      this.canvas_.height !== frame.displayHeight
    ) {
      this.canvas_.width = frame.displayWidth;
      this.canvas_.height = frame.displayHeight;
    }
    const timestamp = frame.timestamp;


    // Draw the incoming video frame
    this.ctx_.drawImage(frame, 0, 0);
    frame.close(); // Close the original frame


    // Draw the pre-generated QR code (with border) onto the video frame
    // Use the finalWidth and finalHeight for drawing
    this.ctx_.drawImage(
      this.qrCanvasWithBorder_,
      this.x, // Position defined in constructor
      this.y, // Position defined in constructor
      this.finalWidth, // Draw with full border width
      this.finalHeight // Draw with full border height
    );


    // Enqueue the modified frame
    controller.enqueue(
      new VideoFrame(this.canvas_, { timestamp, alpha: 'discard' })
    );
  }

Auf der Benutzeroberfläche können Sie die URL für den QR-Code, die Größe und die Position des QR-Codes im Videostream festlegen.

QR code transformer

Wasserzeichen verwenden

Wasserzeichen werden in der Regel für das Branding und den Schutz digitaler Inhalte verwendet. Im Zusammenhang mit Videostreaming kann ein Wasserzeichen mehreren Zwecken dienen: Es kann ein Firmenlogo für das Branding, ein Copyright-Symbol für den Schutz von Inhalten oder jedes andere Bild sein.

Technische Umsetzung

Für das Wasserzeichen akzeptieren wir eine Bilddatei vom Benutzer als Eingabe. Das ausgewählte Bild wird dann horizontal gespiegelt, um dem Spiegeleffekt des Videostroms entgegenzuwirken. Der watermark Transformator aus unserem transformers Verzeichnis positioniert dann das Wasserzeichen auf dem Videostream. Sie können die Position des Wasserzeichens individuell anpassen.

_computePosition(frame) {
    if (this._position === "top-left") {
      return { x: frame.displayWidth - 150, y: 0 };
    } else if (this._position === "top-right") {
      return { x: 0, y: 0 };
    } else if (this._position === "bottom-left") {
      return { x: frame.displayWidth - 150, y: frame.displayHeight - 150 };
    } else if (this._position === "bottom-right") {
      return { x: 0, y: frame.displayHeight - 150 };
    }
    return { x: 0, y: 0 };
  }

  async transform(frame, controller) {
    this.canvas_.width = frame.displayWidth;
    this.canvas_.height = frame.displayHeight;
    const timestamp = frame.timestamp;

    this.ctx_.drawImage(frame, 0, 0, frame.displayWidth, frame.displayHeight);

    const { x, y } = this._computePosition(frame);
    this.ctx_.drawImage(this._image, x, y, 100, 80);
    frame.close();
    controller.enqueue(
      new VideoFrame(this.canvas_, { timestamp, alpha: "discard" })
    );
  }

Watermark transformer

Code-Durchgang

Auf der Hauptseite beginnen wir mit dem Importieren der erforderlichen Pakete und der Initialisierung des Video-Stream-Publishers. Wir haben zwei Formulare, eines für jede Funktion (QR-Code und Wasserzeichen). Je nach Auswahl des Benutzers wird das entsprechende Formular angezeigt.

In der applyQrCode werden die Benutzereingaben für den QR-Code (URL, Größe und Position) abgerufen, der QR-Code-Transformator eingerichtet und auf den Videostrom angewendet.

In ähnlicher Weise wird in der applyWatermark nehmen wir das hochgeladene Bild, passen es nach Bedarf an (horizontal spiegeln), richten den Wasserzeichentransformer ein und wenden ihn auf den Videostream an.

Die Schaltfläche "Anwenden" ruft je nach ausgewählter Option die entsprechende Funktion auf, und die Schaltfläche "Löschen" kann verwendet werden, um alle Transformationen aus dem Videostrom zu entfernen.

QR code generator example

Watermark generator example

Schlussfolgerung

Die Aufwertung von Videostreams durch das Hinzufügen von QR-Codes oder Wasserzeichen ist eine leistungsstarke Möglichkeit, die Interaktivität zu erhöhen, einen Mehrwert zu schaffen und Inhalte zu schützen. Mit der Vonage Video-API und ein wenig JavaScript ist es ziemlich einfach, diese Funktionen zu einem Videostream hinzuzufügen. Ich hoffe, dass dieser Blogbeitrag für Sie hilfreich war, und möchte Sie ermutigen, mit verschiedenen Möglichkeiten der Videostream-Transformation zu experimentieren, um Ihre Projekte zu verbessern.

Sie finden das GitHub-Code-Repositorium hier. Wenn Sie Fragen oder Feedback haben, schließen Sie sich uns auf dem Vonage Entwickler-Slack oder senden Sie uns eine Nachricht an Xund wir werden uns bei Ihnen melden!