Zoom automático y centrado de videollamadas publicadas con Video API de Vonage

Introducción

En una reunión por videollamada, a veces es difícil sentir una conexión con los demás en comparación con una reunión cara a cara. Esto se debe a que no podemos seguir de cerca las emociones, sentimientos y lenguaje corporal de los demás durante una videollamada. Además, la gente siempre mantiene cierta distancia entre ellos y la webcam. Esto hace que al presentador le resulte más difícil responder al público inmediatamente.

Por lo tanto, se ha introducido el uso de transformadores ml y bibliotecas de procesadores multimedia de Vonage para ampliar la cara de la persona que llama durante una videollamada. Se trata de una gran función que puede proporcionar atención adicional durante una sesión de consulta médica. Los ml-transformers pueden detectar la cara del paciente, mientras que un media-processor puede utilizarse para enfocar la cara del paciente durante la sesión de consulta. Así que ahora los médicos pueden tener un diagnóstico más profundo mediante un seguimiento claro de las reacciones faciales de los pacientes y de algún lenguaje corporal facial o incluso señales de enfermedad como una cara pálida o hinchada a lo largo de la llamada.

Este artículo te mostrará cómo integrar la Video API de Vonage con los ml-transformers y las bibliotecas de procesadores de medios de Vonage para crear una videollamada que ampliará y centrará automáticamente al editor.

Requisitos previos

1. Una cuenta de Video API de Vonage. Si aún no tienes una, puedes crear una Account en el Panel de Video.

2. Versión de Node.js >= 16.8

3. Vite.js versión >= 2.9

Participar en una sesión

Para unirte a una sesión de videollamada, necesitas un ID de sesión, un JWT y una clave de API. Puedes generar un ID de sesión y un token en las secciones "Crear ID de sesión" y "Generar token" del proyecto de tu cuenta de Video API de Vonage.

A continuación, utilice esa información para inicializar y conectarse a la sesión generada llamando a initSession y connect. Recuerda agregar la biblioteca de Video API de Vonage a tu archivo HTML. Para obtener más información sobre la biblioteca de Video API de Vonage, visita SDK de cliente de la API de 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();
   }
 });

Puede que desee añadir streamCreated, streamDestroyedy streamPropertyChanged para la sesión, ya que es posible que tenga que hacer algunos cambios de diseño en el navegador para tener una mejor apariencia durante la videollamada.

StreamCreated se activa si otro usuario (abonado) entra en la misma sesión. Por otra parte, el evento streamDestroyed le informa de que un abonado ha abandonado la sesión. Mientras que el evento streamPropertyChange le informa de que se ha modificado la propiedad de vídeo, como la dimensión de vídeo, el estado de audio o el estado de vídeo del abonado.

Transformadores ML

El @vonage/ml-transformadores consta de varias funciones, como la malla facial, la detección de caras, el efecto de desenfoque del fondo, la sustitución del fondo virtual, etc.

Este tutorial demostrará cómo utilizar la biblioteca ml-transformers para detectar la cara del editor.

Primero, inicializa mediaPipeHelper con el modelo "face_detection". A continuación, envía periódicamente la imagen de la webcam al mediaPipeHelper utilizando mediaPipeHelper.send(image).

Una vez que la biblioteca completa el proceso de detección, pasará el resultado a la función de escucha que se creó durante la inicialización. En este caso, la función de escucha recibe el resultado de la detección facial y lo pasa al web worker para su post-procesamiento.

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

El resultado es un cuadro delimitador que contiene información sobre la dimensión de la cara detectada que se ha convertido en dimensiones normalizadas. El valor real puede obtenerse multiplicando el resultado por las dimensiones del Video, por ejemplo faceWidth = resultWidth * videoWidth.

La dimensión recortada se aplica para ampliar el vídeo. Normalmente, la dimensión recortada debe ajustarse a la dimensión de la cara detectada con un margen razonable para incluir algo de fondo alrededor de la cara. Las nuevas dimensiones calculadas se utilizarán para recortar el vídeo durante la transformación del flujo.

Procesador multimedia

Tradicionalmente, se necesita un intermediario, como el <canvas> para manipular el vídeo. En cambio, un flujo insertable permite a los desarrolladores procesar directamente los flujos de vídeo/audio, como cambiar el tamaño del vídeo, añadir un fondo virtual o efectos de voz. La dirección @vonage/procesador multimedia utiliza los flujos insertables en segundo plano para manipular un flujo de vídeo.

La biblioteca puede procesar un montón de funciones de transformación durante la manipulación del flujo. En este caso, sólo se necesita una función de transformación para generar un nuevo flujo de vídeo con las dimensiones deseadas.

En primer lugar, inicialice y configure el procesador multimedia con una función de transformación llamando a la función de procesador multimedia setTransformers . Esta función de transformación generará un nuevo videoFrame con la dimensión calculada anteriormente. Ahora el nuevo videoFrame se puede utilizar para publicar en su llamada de vídeo.

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

Publicar flujo

Después de ejecutar todos los pasos anteriores, usted debe ser capaz de generar un video que se centra en la cara del editor. A continuación, debe publicar el vídeo en la sesión para que todos los usuarios de la misma sesión puedan ver el flujo de vídeo.

Para publicar el vídeo, debe crear un objeto editor utilizando la pista de vídeo generada y, a continuación, llamar a publish para publicar el objeto editor en la sesión. Consulte la documentación para más detalles sobre cómo personalizar el editor.

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

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

Conclusión

¡Ahora ya está listo para publicar un Video enfocado a la cara en una Videollamada! Esperamos que te hayas hecho una idea de cómo se puede crear rápidamente un vídeo enfocado a la cara utilizando las bibliotecas ml-transformers y media-processor.

Encontrará más información y ejemplos de código en nuestro repositorio de GitHub.

Si tiene alguna pregunta, únase a nuestra Slack de la comunidad o envíanos un mensaje a Twitter.