Automatisches Zoomen und Zentrieren von veröffentlichten Videoanrufen mit der Vonage Video API

Einführung

Bei einem Videoanruf ist es manchmal schwierig, eine Verbindung mit anderen zu spüren, verglichen mit einem persönlichen Treffen. Das liegt daran, dass wir während eines Videoanrufs die Emotionen, Gefühle und Körpersprache der anderen nicht genau beobachten können. Außerdem halten die Menschen immer einen gewissen Abstand zwischen sich und der Webcam. Das macht es für den Vortragenden schwieriger, sofort auf das Publikum zu reagieren.

Daher wurde die Verwendung von Vonage ml-Transformatoren und Medienprozessorbibliotheken eingeführt, um das Gesicht des Anrufers während eines Videoanrufs zu vergrößern. Dies ist eine großartige Funktion, die während einer medizinischen Beratungssitzung für zusätzliche Aufmerksamkeit sorgen kann. Die ml-transformers können das Gesicht des Patienten erkennen, während ein Media-Prozessor verwendet werden kann, um das Gesicht des Patienten während der Beratung zu fokussieren. So können die Ärzte jetzt eine genauere Diagnose stellen, indem sie die Gesichtsreaktionen der Patienten und die Körpersprache oder sogar Krankheitssignale wie ein blasses oder geschwollenes Gesicht während des gesamten Gesprächs deutlich beobachten.

Dieser Artikel zeigt Ihnen, wie Sie Vonage Video API mit Vonage ml-transformers und media-processor libraries integrieren können, um einen Videoanruf zu erstellen, der den Herausgeber automatisch zoomt und zentriert.

Voraussetzungen

1. Ein Vonage Video API-Konto. Wenn Sie noch kein Konto haben, können Sie ein Konto auf der Seite Video-Dashboard.

2. Node.js-Version >= 16.8

3. Vite.js Version >= 2.9

An einer Sitzung teilnehmen

Um einer Videoanrufsitzung beizutreten, benötigen Sie eine Sitzungs-ID, ein JWT und einen API-Schlüssel. Sie können eine Sitzungs-ID und ein Token unter den Projektabschnitten "Sitzungs-ID erstellen" und "Token generieren" Ihres Vonage Video API Accounts generieren.

Verwenden Sie dann diese Informationen, um die erzeugte Sitzung zu initialisieren und eine Verbindung zu ihr herzustellen, indem Sie initSession und connect. Vergessen Sie nicht, die Vonage Video API-Bibliothek zu Ihrer HTML-Datei hinzuzufügen. Weitere Informationen zur Vonage Video API Bibliothek finden Sie unter Vonage Video API Client SDKs.

session = OT.initSession(apiKey, sessionId);

 // Connect to the session

 await session.connect(token, function(error) {

   // If the connection is successful, publish to the session
   if (error) {
     console.log("SESSION CONNECT ERROR", error);
     handleError(error);
   } else {
     console.log("SESSION CONNECT SUCCESS");
     initializeStream();
     layout.layout();
   }
 });

Sie können Folgendes hinzufügen streamCreated, streamDestroyed, und streamPropertyChanged Ereignis-Listener für die Sitzung hinzufügen, da Sie möglicherweise einige Layout-Änderungen im Browser vornehmen müssen, um ein besseres Layout während des Videoanrufs zu erhalten.

StreamCreated wird ausgelöst, wenn ein anderer Benutzer (AKA-Abonnent) der gleichen Sitzung beitritt. Andererseits informiert das Ereignis streamDestroyed Ereignis informiert Sie darüber, dass ein Teilnehmer die Sitzung verlassen hat. Während das streamPropertyChange Ereignis teilt Ihnen mit, dass die Videoeigenschaft, wie z. B. die Videodimension, der Audiostatus oder der Videostatus des Teilnehmers geändert wurde.

ML-Transformatoren

Die @vonage/ml-transformers Bibliothek besteht aus mehreren Funktionen - z. B. dem Gesichtsnetz, der Gesichtserkennung, dem Effekt der Hintergrundunschärfe, der Ersetzung des virtuellen Hintergrunds usw.

Dieses Tutorial zeigt, wie man die ml-transformers Bibliothek benutzt, um das Gesicht des Herausgebers zu erkennen.

Initialisieren Sie zunächst mediaPipeHelper mit dem Modell "face_detection". Dann senden Sie das Webcam-Bild periodisch an den mediaPipeHelper mit mediaPipeHelper.send(image).

Sobald die Bibliothek den Erkennungsprozess abgeschlossen hat, übergibt sie das Ergebnis an die Listener-Funktion, die während der Initialisierung erstellt wurde. In diesem Fall empfängt die Listener-Funktion das Ergebnis der Gesichtserkennung und übergibt das Ergebnis zur Nachbearbeitung an den Webworker.

    import { isSupported, MediapipeHelper } from '@vonage/ml-transformers';

    const mediaPipeHelper = new MediapipeHelper();

    mediaPipeHelper.initialize({
     mediaPipeModelConfigArray: [{modelType: "face_detection", options: {
         selfieMode: false,
         minDetectionConfidence: 0.5,
         model: 'short'
       },
       listener: (results) => {
          if (results && results.detections.length !== 0) {
            worker.postMessage({
              operation: "faceDetectionResult",
              result: results.detections[0].boundingBox
            });
          }
       }}]
    });

Das Ergebnis ist ein Begrenzungsrahmen, der Informationen über die erkannte Gesichtsdimension enthält, die in normalisierte Dimensionen umgewandelt wurde. Der tatsächliche Wert kann durch Multiplikation des Ergebnisses mit den Videodimensionen ermittelt werden, z. B. faceWidth = resultWidth * videoWidth.

Der Ausschnitt wird zum Zoomen des Videos verwendet. Normalerweise muss das zugeschnittene Maß an das erkannte Gesicht angepasst werden, mit einem angemessenen Spielraum, um den Hintergrund um das Gesicht herum einzuschließen. Die neu berechneten Abmessungen werden dann zum Zuschneiden des Videos bei der Streamtransformation verwendet.

Medienprozessor

Traditionell wird ein Zwischenglied, wie z. B. das <canvas> Element, benötigt, um das Video zu manipulieren. Im Gegensatz dazu ermöglicht ein einfügbarer Stream den Entwicklern die direkte Bearbeitung von Video-/Audio-Streams, z. B. die Größenänderung von Videos, das Hinzufügen eines virtuellen Hintergrunds oder von Spracheffekten. Die Website @vonage/media-processor Bibliothek nutzt die einfügbaren Streams im Hintergrund, um einen Video-Stream zu bearbeiten.

Die Bibliothek kann während der Stream-Manipulation eine Reihe von Transformationsfunktionen verarbeiten. In diesem Fall wird nur eine Transformationsfunktion benötigt, um einen neuen Video-Stream mit den gewünschten Abmessungen zu erzeugen.

Initialisieren und setzen Sie zunächst den Medienprozessor mit einer Transformationsfunktion, indem Sie die Medienprozessor setTransformers Funktion. Diese Transformationsfunktion erzeugt einen neuen videoFrame mit der zuvor berechneten Dimension. Nun kann der neue videoFrame zur Veröffentlichung in Ihrem Videoaufruf verwendet werden.

import { MediaProcessor } from '@vonage/media-processor';

    mediaProcessor = new MediaProcessor();
    let transformers = [];
    transformers.push({transform});
    mediaProcessor.setTransformers(transformers);
 
    function transform(videoFrame, controller) {
       const cropVideo = new VideoFrame(videoFrame, {
           visibleRect: {
               x: visibleRectDimension.visibleRectX,
               y: visibleRectDimension.visibleRectY,
               width: visibleRectDimension.visibleRectWidth,
               height: visibleRectDimension.visibleRectHeight
           },
           alpha: 'discard'
       });

       videoFrame.close();
       controller.enqueue(cropVideo);
    }

Stream veröffentlichen

Nachdem Sie alle oben genannten Schritte ausgeführt haben, sollten Sie in der Lage sein, ein Video zu erstellen, das sich auf das Gesicht des Herausgebers konzentriert. Als Nächstes müssen Sie das Video in der Sitzung veröffentlichen, damit der Videostream für alle Benutzer in derselben Sitzung sichtbar ist.

Um das Video zu veröffentlichen, sollten Sie ein Publisher-Objekt mit der generierten Videospur erstellen und anschließend publish auf, um das Verlegerobjekt in der Sitzung zu veröffentlichen. Siehe die die Dokumentation für Details zur Anpassung des Publishers.

let publisher = OT.initPublisher('croppedVideo', {
        insertMode: 'append',
        videoSource: videoTracks[0]

    }, handleError);
    session.publish(publisher, handleError);

Schlussfolgerung

Jetzt sind Sie bereit, ein gesichtsfokussiertes Video in einem Videoanruf zu veröffentlichen! Sie haben hoffentlich eine Vorstellung davon bekommen, wie ein gesichtsfokussiertes Video mit Hilfe der ml-transformers und media-processor Bibliotheken schnell erstellt werden kann.

Weitere Details und Codebeispiele finden Sie in unserem GitHub-Repositorium.

Wenn Sie Fragen haben, treten Sie unserem Gemeinschaft Slack oder senden Sie uns eine Nachricht auf Twitter.