Zoom automatique et centrage des appels vidéo publiés avec l'API Video de Vonage

Introduction

Lors d'une réunion par appel vidéo, il est parfois difficile de ressentir une connexion avec les autres par rapport à une réunion en face à face. En effet, nous ne pouvons pas suivre de près les émotions, les sentiments et le langage corporel des autres lors d'un appel vidéo. De plus, les gens gardent toujours une certaine distance entre eux et la webcam. Il est donc plus difficile pour le présentateur de répondre immédiatement au public.

C'est pourquoi l'utilisation des transformateurs ml de Vonage et des bibliothèques de processeurs média pour zoomer sur le visage de l'appelant au cours d'un appel vidéo a été introduite. Il s'agit d'une fonction intéressante qui peut apporter un soin supplémentaire lors d'une séance de consultation médicale. Les transformateurs ml peuvent détecter le visage du patient tandis qu'un processeur média peut être utilisé pour se concentrer sur le visage du patient pendant la session de consultation. Ainsi, les médecins peuvent désormais obtenir un diagnostic plus approfondi en surveillant clairement les réactions faciales et le langage corporel du patient, voire des signaux de maladie tels qu'un visage pâle ou gonflé, tout au long de l'appel.

Cet article vous montrera comment intégrer l'API Video de Vonage avec les transformateurs ml et les bibliothèques de processeur média de Vonage pour créer un appel vidéo qui zoomera et centrera automatiquement l'éditeur.

Conditions préalables

1. Un compte Video API de Vonage. Si vous n'en avez pas encore, vous pouvez créer un Account dans le Tableau de bord Video.

2. Version de Node.js >= 16.8

3. Version de Vite.js >= 2.9

S'inscrire à une session

Pour rejoindre une session d'appel Video, vous avez besoin d'un identifiant de session, d'un JWT et d'une clé API. Vous pouvez générer un identifiant de session et un jeton dans les sections "Create Session ID" et "Generate Token" de votre compte Vonage Video API.

Utilisez ensuite ces informations pour initialiser la session générée et vous y connecter en appelant initSession et connect. N'oubliez pas d'ajouter la bibliothèque bibliothèque Video API de Vonage à votre fichier HTML. Pour plus d'informations sur la bibliothèque Video API de Vonage, visitez le site suivant SDK du client de l'API Video de Vonage.

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();
   }
 });

Vous pouvez ajouter streamCreated, streamDestroyed, et streamPropertyChanged pour la session, car il se peut que vous deviez modifier la mise en page du navigateur pour améliorer l'aspect de la présentation lors de l'appel vidéo.

StreamCreated est déclenché si un autre utilisateur (AKA abonné) rejoint la même session. D'autre part, l'événement streamDestroyed vous informe qu'un abonné a quitté la session. Alors que l'événement streamPropertyChange vous informe que la propriété vidéo, telle que la dimension vidéo, l'état audio ou l'état vidéo de l'abonné a été modifiée.

Transformateurs ML

Le @vonage/ml-transformers se compose de plusieurs fonctions - par exemple, le maillage des visages, la détection des visages, l'effet de flou de l'arrière-plan, le remplacement de l'arrière-plan virtuel, etc.

Ce tutoriel montre comment utiliser la bibliothèque ml-transformers pour détecter le visage de l'éditeur.

Tout d'abord, initialiser mediaPipeHelper avec le modèle "face_detection". Ensuite, envoyez périodiquement l'image de la webcam à mediaPipeHelper en utilisant mediaPipeHelper.send(image).

Une fois que la bibliothèque a terminé le processus de détection, elle transmet le résultat à la fonction d'écoute créée lors de l'initialisation. Dans ce cas, la fonction d'écoute reçoit le résultat de la détection des visages et le transmet au travailleur web pour le post-traitement.

    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
            });
          }
       }}]
    });

Le résultat est une boîte de délimitation qui contient des informations sur la dimension du visage détecté qui a été convertie en dimensions normalisées. La valeur réelle peut être obtenue en multipliant le résultat par les dimensions de la vidéo, par exemple faceWidth = resultWidth * videoWidth.

La dimension recadrée est appliquée pour agrandir la Video. Généralement, la dimension recadrée doit être ajustée à la dimension du visage détecté avec une marge raisonnable pour inclure un arrière-plan autour du visage. Les nouvelles dimensions calculées seront ensuite utilisées pour recadrer la vidéo lors de la transformation du flux.

Processeur de médias

Traditionnellement, un intermédiaire, tel que l'élément <canvas> est nécessaire pour manipuler la Video. En revanche, un flux insérable permet aux développeurs de traiter directement les flux vidéo/audio, comme le redimensionnement de la vidéo, l'ajout d'un arrière-plan virtuel ou d'effets vocaux. L'interface @vonage/media-processor utilise les flux insérables en arrière-plan pour manipuler un flux vidéo.

La bibliothèque peut traiter un ensemble de fonctions de transformation lors de la manipulation du flux. Dans ce cas, une seule fonction de transformation est nécessaire pour générer un nouveau flux vidéo aux dimensions souhaitées.

Tout d'abord, initialisez et définissez le processeur de médias avec une fonction de transformation en appelant la fonction processeur de médias setTransformers (processeur de médias). Cette fonction de transformation génère un nouveau videoFrame avec la dimension calculée précédemment. Le nouveau videoFrame peut maintenant être utilisé pour publier dans votre appel vidéo.

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);
    }

Publier un flux

Après avoir exécuté toutes les étapes ci-dessus, vous devriez être en mesure de générer une vidéo qui se concentre sur le visage de l'éditeur. Ensuite, vous devez publier la vidéo dans la session afin que tous les utilisateurs de la même session soient visibles dans le flux vidéo.

Pour publier la vidéo, vous devez créer un objet éditeur à l'aide de la piste vidéo générée, puis appeler la commande publish pour publier l'objet éditeur dans la session. Reportez-vous à la la documentation pour plus de détails sur la personnalisation de l'éditeur.

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

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

Conclusion

Vous êtes maintenant prêt à publier une vidéo centrée sur le visage lors d'un appel vidéo ! Nous espérons que vous avez compris comment créer rapidement une vidéo centrée sur le visage à l'aide des bibliothèques ml-transformers et media-processor.

Des détails supplémentaires et des exemples de code sont disponibles sur notre GitHub repo.

Si vous avez des questions, rejoignez notre Communauté Slack ou envoyez-nous un message sur sur Twitter.