Filter im Snapchat-Stil mit Tracking.js und Vonage

Sei Batman oder erschrecke einfach ein paar Leute. In dieser Anleitung werden Sie Gesichtsverfolgung mit Tracking.js hinzufügen und einige coole Filter im Stil von Snapchat für einen Videostream erstellen. Cool!

Vonage Video API

Vonage Video API bietet eine WebRTC-basierte Plattform zum Hinzufügen von Live-Video, Voice und Messaging zu Web-, Mobil- und Desktop-Applikationen. Wir werden die Vonage Video API verwenden, um von unserer Anwendung aus eine Verbindung zu einer Video-Streaming-Sitzung herzustellen. Wenn Sie mit der Vonage Video API arbeiten, werden Sie im Code oder in der Dokumentation möglicherweise den Namen OpenTok, den früheren Namen, sehen.

Verfolgung.js

Tracking.js ist eine leichtgewichtige und leistungsstarke Bibliothek zur Gesichtserkennung und Farbverfolgung in Echtzeit, die verschiedene Algorithmen und Techniken in die Browserumgebung bringt. Wir werden tracking.js verwenden, um Gesichter zu verfolgen, damit wir Masken anwenden können.

Voraussetzungen

Das brauchen Sie, um diesem Tutorial zu folgen.

Knotenpunkt & NPM

Um loszulegen, müssen Node und der Node Package Manager (npm) installiert sein. Prüfen wir, ob sie installiert sind, indem wir sie ausführen:

Wenn Sie node und npm nicht installiert haben, schauen Sie unter nodejs.org und installieren Sie die richtige Version für Ihr Betriebssystem. Ich habe diesen Artikel mit Node 11.8 und NPM 6.8 geschrieben.

Vonage Account

Gehen Sie rüber zu Vonage, um sich für eine kostenlose Testversion anzumelden.

Git

Prüfen Sie, ob Sie Git installiert haben.

Falls nicht, hat Atlassian eine großartige Anleitung für die Git installieren. Ich habe diesen Artikel mit installiertem Git 2.17 geschrieben.

Los geht's

Als Grundlage habe ich eine Version der Anwendung vorbereitet, die aus OpenTok-Webbeispiele für Streamfilter, die Sie bearbeiten können.

Schauen Sie sich meine Version der OpenTok-Webfilterbeispiele hier indem Sie den folgenden Befehl in einem Kommandozeilentool Ihrer Wahl ausführen, oder indem Sie Ihre Git-Schnittstelle verwenden, um diese URL zu überprüfen: https://github.com/nexmo-community/snapchat-filters-with-opentok-and-face-tracking.git

Anmerkung: Der master Verzweigung ist am Startpunkt, aber wenn Sie ungeduldig sind (und wie ich gerne zum Ende springen), können Sie git checkout demo-end und die Anwendung von dort aus starten.

Konfigurieren Sie die Anwendung

Bevor Sie also mit dem Programmieren beginnen, müssen Sie die Anwendung so konfigurieren, wie sie ist, um ein Gefühl für die Ausgangssituation zu bekommen. Dazu benötigen Sie den in den Voraussetzungen erwähnten Vonage Account. Wenn Sie noch keines haben, gehen Sie zu Vonage und melden Sie sich jetzt.

Ein Projekt erstellen

Sobald Sie Ihre E-Mail-Adresse bestätigt und sich angemeldet haben, können Sie auf Projekt erstellen in Ihrer Account-Übersicht. Erstellen Sie ein neues Vonage Video API-Projekt, indem Sie auf Benutzerdefiniertes Projekt erstellen. Geben Sie Ihrem Projekt einen Namen und klicken Sie auf erstellen..

Notieren Sie sich nun Ihren API-SCHLÜSSEL und SECRET für den Konfigurationsschritt.

Eine Sitzung erstellen

Nachdem Sie Ihr Projekt erstellt haben, werden Sie zum Projekt-Dashboard weitergeleitet. Scrollen Sie nach unten zu Projekt-Werkzeuge und klicken Sie auf Sitzungs-ID erstellen. Sie können auch wählen zwischen Weitergeleitet und Geroutet. Grundlegend, Weitergereicht versucht eine Peer-to-Peer-Verbindung, verwendet aber Relay-Server, wenn Firewalls Peer-to-Peer blockieren. Geroutet ist die Standardeinstellung, bei der Streams an den Media Router gehen. Sie können mehr über Sitzungen in der Dokumentation lesen.

Notieren Sie sich die SESSION-ID die erstellt wird.

Ein Token generieren

Bevor wir die Anwendung konfigurieren, müssen wir ein Token erzeugen. In Ihrem Projekt-Dashboard finden Sie unter Projekt-Werkzeuge (derselbe Abschnitt, in dem Sie Ihre Sitzungs-ID erstellt haben), geben Sie die SITZUNGS-ID ein, die Sie gerade erstellt haben, und klicken Sie auf Token generieren.

Notieren Sie sich den GENERIERTEN TOKEN für den nächsten Schritt.

Erstellen einer Konfigurationsdatei

Erstellen Sie eine Kopie von js/config.js.example und speichern Sie sie als js/config.js (im js-Verzeichnis) und ändern Sie dabei die Werte Ihres Vonage Accounts.

API-SCHLÜSSEL, SITZUNGS-IDund TOKEN werden alle oben erstellt. Wenn Sie die Anwendung lokal ausführen, indem Sie npm startausführen, benötigen Sie eine BASIS-URL von http://127.0.0.1:8080. Für etwas wie Heroku ist es mehr wie https://app-name.herokuapp.com.

Kurzer Tipp: Wenn Sie die Anwendung laufen lassen npm start können Sie sie mit STRG+C wieder stoppen.

Ihr js/config.js wird am Ende etwa so aussehen.

// js/config.js
(function closure(exports) {
  exports.BASE_URL = 'base url';
  exports.API_KEY = 'api key';
  exports.SESSION_ID = 'session id';
  exports.TOKEN = 'token';
})(exports);

Abhängigkeiten installieren

Verwenden Sie nun npm, um Ihre Abhängigkeiten zu installieren. Führen Sie dies in Ihrem Projektverzeichnis aus.

Ausführen der Anwendung

Sie können die Anwendung starten, indem Sie npm start. Dies ist eine intelligente kleine Funktion. Wenn Sie kein eigenes Startskript in package.jsonkonfigurieren, wird angenommen, Sie meinen node index.js wobei index.js die Hauptdatei ist, die in package.json. In unserem Fall wird es ausgeführt ./node_modules/bin/http-server um unseren knotenbasierten Webserver zu starten.

Sobald die Sitzung läuft, können Sie sie lokal anzeigen, indem Sie localhost:8080 in Ihrem Lieblingsbrowser öffnen. Es sollte in etwa so aussehen, aber mit Ihnen statt mit mir.

Basic Vonage Video example up and running

Laden Sie nun dieselbe URL in einem anderen Browserfenster, damit Sie mit sich selbst sprechen können!

Wichtige Anmerkung: Ich sehe nicht immer so schmuddelig aus :)

Basic Vonage Video conversation occuring

Einführung in die Technologie

Mit der Vonage Video API-Plattform lassen sich interaktive Videos, Nachrichten, Bildschirmfreigaben und vieles mehr in Echtzeit und hoher Qualität in Web- und Mobilanwendungen einbetten. Hier werden wir insbesondere die JavaScript-Client-SDKs verwenden.

Vonage Video SDK

Das JavaScript Client SDK ist für die eigentliche Arbeit zuständig. Es verwendet fest kodierte Anmeldeinformationen, um eine Verbindung zu einer Sitzung mit einem Token herzustellen, das wir im Entwicklerportal generieren. Anschließend werden Audio- und Videostreams in unserem Browser abonniert und veröffentlicht.

Verfolgung.js

Tracking.js ist eine leichtgewichtige JavaScript-Bibliothek zur Verfolgung von Gesichtspositionen in Bildern und Videos. Wir werden die Koordinaten auf der Leinwand abrufen.

Die Demo-Anwendung

Die Anwendung, die Sie geklont und gestartet haben, ist bereits mit einigen Filtern ausgestattet. Diese Filter arbeiten mit Bilddaten aus der Canvas-API und verändern sie. Die Bilddaten befinden sich in einem Objekt, das Breiten-, Höhen- und Pixeldaten enthält. Die Pixeldaten sind in einem Array enthalten. Alle 4 Elemente stellen jeweils ein Pixel R, G, B und A dar.

Die Anwendung von Bildeffekten kann also durch Änderung der RGBA-Daten erfolgen.

Hier ist ein hacky Beispiel. Der Code wird mit Hilfe von Kommentaren erklärt, aber er wird nicht wirklich ausgeführt.

// The existing image data.
const imgData = new ImageData(existingData, width, height);

// An empty typed data array for our new modified image data
const dataArray = new Uint8ClampedArray(imgData.data.length);

// Loop over the data, skipping to every 4th item.
for (let i = 0; i < imgData.data.length; i += 4) {
  // i is R / red
  // i+1 is G / green
  // i+2 is B / blue
  // i+3 is alpha - which specifies the opacity of the color.

  // here, we're addoing 80 to the relative channel value, effectively lighting this channel
  dataArray[i] = imgData.data[i] + 80;
  dataArray[i + 1] = imgData.data[i + 1] + 80;
  dataArray[i + 2] = imgData.data[i + 2] + 80;
  // lightening every channel will result in a whitewashed/brightened effect

  dataArray[i + 3] = imgData.data[i + 3];
}

return new ImageData(dataArray, imgData.width, imgData.height);

Sie können die vorhandenen Filter, die die RGB-Werte verändern, in js/filters.js.

Einige neue Filter erstellen

Nachfolgend finden Sie die Schritte zur Bearbeitung der Anwendung für die Erstellung von zwei neuen Filtern, zur Anpassung der Helligkeit und Schwellenwert unseres Streams.

Helligkeit

Die Anpassung der Helligkeit eines Bildes ist eine der einfachsten Bildverarbeitungsoperationen, die durchgeführt werden kann. Wie im vorherigen Codebeispiel gezeigt, müssen Sie lediglich die gewünschte Helligkeitsänderung zu jedem der Kanäle Rot, Grün und Blau hinzufügen.

Öffnen Sie js/filters.js und suchen Sie die Zeile mit dem Kommentar // Brighten und ersetzen Sie den Kommentar durch eine neue Funktion für unseren Filter.

Kurzer Tipp: Kommentare wie // ... und <!-- // ... --> zeigen an, dass weiterer Code existiert, der hier im Blog aus Gründen der Übersichtlichkeit entfernt wurde.

// js/filters.js
(function closure(exports) {
  var Filters = {

    // ...

    brighten: function brighten(imgData) {
      // New data

      // Loop 

      // Return
    }
  };

  // ...
})(exports);

Die Bilddaten sind in einem 8-Bit-Array ohne Vorzeichen geklemmt. Das heißt, es hat eine feste Länge und die Werte sind auf vorzeichenlose Werte zwischen 0-255 geklemmt. Perfekt für RGB-Werte. Wir müssen also ein neues, leeres 8-Bit-Array erstellen, in dem wir unsere geänderten Bilddaten speichern werden. Ersetzen Sie // New data wie hier gezeigt, wobei Sie die feste Länge durch die Länge der vorhandenen Daten setzen.

// js/filters.js
    // ...

    brighten: function brighten(imgData) {
      const res = new Uint8ClampedArray(imgData.data.length);

      // Loop 

      // Return
    }

    // ...

Führen Sie nun eine Schleife über die vorhandenen Daten und verschieben Sie die Werte, um einen Aufhellungseffekt zu erzielen. Ersetzen Sie // Loop wie hier gezeigt. Wie bereits im Artikel erläutert, durchlaufen Sie die Daten in einer Schleife und springen zu jedem 4.

// js/filters.js
    // ...

    brighten: function brighten(imgData) {
      const res = new Uint8ClampedArray(imgData.data.length);

      for (let i = 0; i < imgData.data.length; i += 4) {
        var inputRed = imgData.data[i];
        var inputGreen = imgData.data[i + 1];
        var inputBlue = imgData.data[i + 2];
        res[i] = inputRed + 80;
        res[i + 1] = inputGreen + 80;
        res[i + 2] = inputBlue + 80;
        res[i + 3] = imgData.data[i + 3];
      }

      // Return
    }

    // ...

Als letztes geben Sie bei dieser Funktion das neue Datenfeld zurück. Ersetzen Sie // Return wie gezeigt.

// js/filters.js
    // ...

    brighten: function brighten(imgData) {
      const res = new Uint8ClampedArray(imgData.data.length);

      for (let i = 0; i < imgData.data.length; i += 4) {
        var inputRed = imgData.data[i];
        var inputGreen = imgData.data[i + 1];
        var inputBlue = imgData.data[i + 2];
        res[i] = inputRed + 80;
        res[i + 1] = inputGreen + 80;
        res[i + 2] = inputBlue + 80;
        res[i + 3] = imgData.data[i + 3];
      }

      return new ImageData(res, imgData.width, imgData.height);
    }

    // ...

Nachdem Sie Ihre Funktion eingerichtet haben, müssen Sie sie nun auswählen können. Öffnen Sie also index.html und ersetzen Sie <!-- Brighten --> durch eine Option zur Auswahl unserer neuen Funktion.

<!-- index.html -->
<!-- // ... -->
          <select id="filter">
            <option value="none">Filter: None</option>
            <option value="grayscale">Filter: Grayscale</option>
            <option value="sepia">Filter: Sepia</option>
            <option value="invert">Filter: Invert</option>
            <option value="brighten">Filter: Brightening</option>
            <!-- Threshold -->
          </select>
<!-- // ... -->

Starten Sie nun die Anwendung erneut, indem Sie localhost:8080 und sehen Sie sich den neuen Aufhellungsfilter an. Der option Wert ist derselbe wie der Name der Funktion.

Vonage Video stream with a brightening filter

Schwellenwert

Als Nächstes wird das Bild mit einem Schwellenwert versehen.

Öffnen Sie js/filters.js und suchen Sie die Zeile mit dem Kommentar // Threshold und ersetzen Sie sie durch die folgende Funktion. Diesmal haben Sie die gesamte Funktion.

Bei der Schwellenwertbildung wird die Farbe auf der Grundlage eines Algorithmus, der die Summe der Werte des Rot-, Grün- und Blaukanals berücksichtigt, durch Weiß oder Schwarz ersetzt. Eine berechnete Summe über 100 (>= 100), die die helleren Farben repräsentiert, wird durch Weiß ersetzt. Alles andere wird schwarz.

// js/filters.js
(function closure(exports) {
  var Filters = {

    // ...

    threshold: function threshold(imgData) {
      const res = new Uint8ClampedArray(imgData.data.length);
      for (let i = 0; i < imgData.data.length; i += 4) {
        var inputRed = imgData.data[i];
        var inputGreen = imgData.data[i+1];
        var inputBlue = imgData.data[i+2];
        var v = (0.2126 * inputRed + 0.7152 * inputGreen + 0.0722 * inputBlue >= 100) ? 255 : 0;
        res[i] = res[i+1] = res[i+2] = v;
        res[i + 3] = imgData.data[i + 3];
      }

      return new ImageData(res, imgData.width, imgData.height);
    }

  };

  // ...
})(exports);

Jetzt fügen Sie eine Option zur Auswahl von Schwellenwerten hinzu. Öffnen Sie also index.html und ersetzen Sie <!-- Threshold --> durch eine Option zur Auswahl unserer neuen Funktion.

<!-- index.html -->
<!-- // ... -->
          <select id="filter">
            <option value="none">Filter: None</option>
            <option value="grayscale">Filter: Grayscale</option>
            <option value="sepia">Filter: Sepia</option>
            <option value="invert">Filter: Invert</option>
            <option value="brighten">Filter: Brightening</option>
            <option value="threshold">Filter: Thresholding</option>
          </select>
<!-- // ... -->

Starten Sie nun die Anwendung erneut, indem Sie localhost:8080 und sehen Sie sich den neuen Schwellenwertfilter an.

Vonage Video stream with a thresholding filter!

Gesichtsverfolgung mit Tracking.js

Als Nächstes fügst du Tracking.js hinzu und renderst ein Bild über dein Gesicht wie eine Maske.

Tracking.js installieren

Installieren Sie Tracking.js mit npm.

Fügen Sie die Bibliothek auf herkömmliche Weise zu Ihrer Anwendung hinzu. Bearbeiten Sie index.html und suchen Sie den Kommentar, in dem es heißt <!-- Scripts -->. Ersetzen Sie diesen durch die unten gezeigten neuen Skript-Tags. Die erste Datei tracking-min.js ist die verkleinerte Tracking.js-Bibliothek. Die zweite Datei face-min.js sind Daten, die von Tracking.js für die Verfolgung von Gesichtern in Medien verwendet werden. Andere Datensätze wie Gesichtsmerkmale, einschließlich Augen, Nase und Mund, sind ebenfalls verfügbar.

<!-- index.html -->
<!-- // ... -->
    
      var exports = {};
    
    <a href="http://node_modules/tracking/build/tracking-min.js">http://node_modules/tracking/build/tracking-min.js</a>
    <a href="http://node_modules/tracking/build/data/face-min.js">http://node_modules/tracking/build/data/face-min.js</a>
    <a href="http://js/config.js">http://js/config.js</a>
<!-- // ... -->

Da Filter und Masken etwas anders funktionieren, habe ich sie getrennt. Das hat mit den verfügbaren Objekten in der etablierten js/filters.js Datei zu tun.

Erstellen Sie eine neue Datei js/masks.js und geben Sie ihr zu Beginn den folgenden Inhalt.

// js/masks.js
(function closure(exports) {
  var Masks = {
    none: function none(tracker, canvas, ctx) {}

    // Guy Fawkes

    // Batman
  };

  // Set the initial mask to none
  Masks.selectedMask = Masks.none;

  // When the mask selector changes we update the selectedMask
  var maskSelector = document.querySelector('#mask');
  maskSelector.addEventListener('change', function change() {
    Masks.selectedMask = Masks[maskSelector.value];
  });

  exports.Masks = Masks;
})(exports);

Öffnen und bearbeiten Sie js/publish.js und finden Sie den // Tracker.js Kommentar. Ersetzen Sie diesen, wie hier gezeigt.

Dieser Objekt-Tracker liest die Medien und erkennt alle Gesichter. Die Verfolgung funktioniert im Allgemeinen so, dass eine "Form" schrittweise um das Medium herumgeführt wird, bis sie eine nahe Übereinstimmung findet. In der Konfiguration werden der Anfangsmaßstab der "Form" und die Schrittgröße festgelegt. Diese helfen bei der Feinabstimmung (und Verbesserung der Geschwindigkeit) des Trackers.

Anmerkung: Mit meinen eingebauten und 720p-Webcams hat diese Konfiguration in der Regel gut funktioniert.

// js/publish.js

    // ...
    var reqId;

    // Draw a box around face
    var tracker = new tracking.ObjectTracker('face');
    tracker.setInitialScale(10);
    tracker.setStepSize(2);
    tracker.setEdgesDensity(0.01);

    // ...

Und in derselben Datei finden Sie den // apply Mask Kommentar und ersetzen Sie ihn wie folgt.

// js/publish.js

      // ...
      ctx.putImageData(imgData, 0, 0);

      exports.Masks.selectedMask(tracker, canvas, ctx);

      // ...

Bearbeiten Sie index.html und finden Sie beide <!-- Masks --> Kommentare.

Um die Masken getrennt zu halten, werden Sie auch ein separates Auswahlfeld erstellen. Wir lassen die Auswahlfelder vorerst leer.

Sie müssen auch die neue js/masks.js Datei hier einfügen.

<!-- index.html -->
<!-- // ... -->
    <div id="videos">
        <div id="subscriber"></div>
        <div id="publisher">
          <!-- // ... -->
          
            Mask: None
            <!-- Guy Fawkes -->
            <!-- Batman -->
          
        </div>
    </div>
    <!-- // ... -->
    <a href="http://js/filters.js">http://js/filters.js</a>
    <a href="http://js/masks.js">http://js/masks.js</a>
<!-- // ... -->

Bevor Sie das Programm starten, müssen Sie das Auswahlfeld für die Masken noch etwas umgestalten. Bearbeiten Sie css/app.css und suchen Sie den Kommentar /* Masks menu css */ und ersetzen Sie ihn durch das folgende CSS.

/* css/app.css */
/* // ... */
#mask {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 102;
}

Sie haben noch keine Masken erstellt, sondern starten die Anwendung erneut unter localhost:8080 um zu prüfen, ob Sie keine Fehler gemacht haben. Wenn der Stream funktioniert, sind Sie auf dem richtigen Weg.

Die Guy-Fawkes-Maske

Die erste Maske wird Guy sein. Die Guy-Fawkes-Maske ist zu einem Symbol der Anonymität geworden, und genau das ist der Sinn des Tragens einer Maske!

Öffnen Sie js/masks.js und finden Sie den Kommentar // Guy Fawkes. Ersetzen Sie den Kommentar durch die neue Funktion.

// js/masks.js
// ...
(function closure(exports) {
  var Masks = {
    none: function none(tracker, canvas, ctx) {},

    guy: function guy(tracker, canvas, ctx) {
      // Load an image

      // Start tracking

      // Apply our image as a mask
    }

    // Batman
  };
// ...

Laden Sie das Bild, das Sie über alle vom Tracker gefundenen Flächen legen wollen, und ersetzen Sie den // Load an image Kommentar wie hier gezeigt. ../images/guy.png sollte im Repository verfügbar sein.

// js/masks.js

    // ...
    guy: function guy(tracker, canvas, ctx) {
      var mask = document.createElement("img");
      mask.src = '../images/guy.png';  

      // Start tracking

      // Apply our image as a mask
    }
    // ...

Aktivieren Sie nun das Tracking für unsere Medien. Das von Ihnen verwendete Medium ist der Canvas-Stream. Hier müssen Sie Kamera und Audio aktivieren. Ersetzen Sie den // Start tracking Kommentar wie folgt.

// js/masks.js

    // ...
    guy: function guy(tracker, canvas, ctx) {
      var mask = document.createElement("img");
      mask.src = '../images/guy.png';

      tracking.track(canvas, tracker, { camera: true, audio: true });

      // Apply our image as a mask
    }
    // ...

Sie müssen einen Ereignis-Listener für das track Ereignis des Trackers registrieren, damit er, wenn er ein Gesicht findet, die Maske über das erkannte Gesicht zeichnen kann.

// js/masks.js

    // ...
    guy: function guy(tracker, canvas, ctx) {
      var mask = document.createElement("img");
      mask.src = '../images/guy.png';  

      tracking.track(canvas, tracker, { camera: true, audio: true });

      tracker.on('track', function(event) {
        event.data.forEach(function(rect) {
          ctx.drawImage(mask, rect.x - 100, rect.y - 100, rect.width * 1.5, rect.height * 1.5);
        });
      });
    }
    // ...

Nun müssen Sie der Anwendung die Option für die Guy-Maske hinzufügen. Bearbeiten Sie index.html, suchen Sie den <!-- Guy Fawkes --> Kommentar und fügen Sie die Option wie unten gezeigt hinzu.

<!-- index.html -->
<!-- // ... -->
    <div id="videos">
        <div id="subscriber"></div>
        <div id="publisher">
          <!-- // ... -->
          
            Mask: None
            Mask: Guy Fawkes
            <!-- Batman -->
          
        </div>
    </div>
<!-- // ... -->

Drücken Sie die Daumen, dass alles funktioniert! Starten Sie die Anwendung erneut und öffnen Sie localhost:8080. Wählen Sie Ihre erste Maske aus und überprüfen Sie sie.

Vonage Video stream with a Guy Fawkes mask!

Batman sein

Die endgültige Maske und Bearbeitung unseres Codes wird Batman sein. Öffnen Sie js/masks.js und finden Sie den Kommentar // Batman. Ersetzen Sie den Kommentar durch diese neue Funktion.

// js/masks.js

    // ...

    batman: function batman(tracker, canvas, ctx) {
      var mask = document.createElement("img");
      mask.src = '../images/batman.png';  

      tracking.track(canvas, tracker, { camera: true, audio: true });
      tracker.on('track', function(event) {
        event.data.forEach(function(rect) {
          ctx.drawImage(mask, rect.x - 60, rect.y - 170, rect.width * 1.4, rect.height * 1.5);
        });
      });
    }
    // ...

Fügen Sie nun die Option für die Batman-Maske in die Anwendung ein. Bearbeiten Sie index.html, suchen Sie den <!-- Batman --> Kommentar und fügen Sie die Option wie unten gezeigt hinzu.

<!-- index.html -->
<!-- // ... -->
    <div id="videos">
        <div id="subscriber"></div>
        <div id="publisher">
          <!-- // ... -->
          
            Mask: None
            Mask: Guy Fawkes
            Mask: Batman
          
        </div>
    </div>
<!-- // ... -->

Kann ich Batman sein? Starten Sie die Anwendung erneut und öffnen Sie localhost:8080. Wählen Sie die Maske aus und probieren Sie sie aus.

Vonage Video stream with a Batman mask

Zusammenfassung

Das Schreiben von Snapchat-Filtern und das Tragen von Masken in Videostreams wird durch die SDKs von Vonage Video erleichtert. Mit Vonage Video können Sie Ihre Streams auch gleichzeitig an Plattformen wie YouTube Live, Twitch und Facebook senden. So können Sie nicht nur Ihre eigene Livestream-Website erstellen, sondern auch Menschen auf anderen Diensten erreichen.