Zoom automático e centralização de chamadas de vídeo publicadas com a Video API da Vonage

Introdução

Em uma reunião por videochamada, às vezes é difícil sentir uma conexão com os outros em comparação com uma reunião presencial. Isso ocorre porque não conseguimos observar de perto as emoções, os sentimentos e a linguagem corporal dos outros durante uma videochamada. Além disso, as pessoas sempre mantêm uma certa distância entre si e a webcam. Isso torna mais difícil para o apresentador responder imediatamente ao público.

Portanto, foi introduzido o uso das bibliotecas ml-transformers e media-processor da Vonage para ampliar o rosto do interlocutor durante uma videochamada. Essa é uma excelente função que pode proporcionar um atendimento mais atencioso durante uma consulta médica. Os ml-transformers detectam o rosto do paciente, enquanto um processador de mídia pode ser usado para focar no rosto do paciente durante a consulta. Assim, agora os médicos podem fazer um diagnóstico mais aprofundado, observando claramente as reações faciais dos pacientes e certos sinais de linguagem corporal facial, ou mesmo sinais de mal-estar, como um rosto pálido ou inchado, ao longo da chamada.

Este artigo vai mostrar como integrar a Video API da Vonage com as bibliotecas ml-transformers e media-processor da Vonage para criar uma videochamada que amplie e centralize automaticamente o autor da transmissão.

Pré-requisitos

1. Uma conta da Video API da Vonage. Se você ainda não tiver uma, pode criar uma conta no Painel de Controle de Video.

2. Versão do Node.js >= 16.8

3. Vite.js versão >= 2.9

Participe de uma sessão

Para participar de uma sessão de videochamada, você precisa de um ID de sessão, um JWT e uma chave de API. Você pode gerar um ID de sessão e um token nas seções “Criar ID de sessão” e “Gerar token” do projeto na sua Account da Video API da Vonage.

Em seguida, use essas informações para inicializar e se conectar à sessão gerada, chamando initSession e connect. Lembre-se de adicionar a biblioteca da Video API do Vonage ao seu arquivo HTML. Para obter mais informações sobre a biblioteca da Video API da Vonage, acesse SDKs do Cliente da Video API da 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();
   }
 });

Talvez você queira adicionar streamCreated, streamDestroyed, e streamPropertyChanged ouvintes de eventos para a sessão, já que talvez seja necessário fazer algumas alterações no layout do navegador para obter uma aparência melhor durante sua videochamada.

StreamCreated O evento é acionado quando outro usuário (também conhecido como assinante) entra na mesma sessão. Por outro lado, o streamDestroyed evento informa que um assinante saiu da sessão. Já o streamPropertyChange evento indica que uma propriedade do Video — como dimensão do Video, estado do áudio ou estado do Video do assinante — foi alterada.

Transformadores ML

O biblioteca @vonage/ml-transformers consiste em várias funções — por exemplo, malha facial, detecção de rosto, efeito de desfoque de fundo, substituição de fundo virtual, etc.

Este tutorial mostrará como usar a biblioteca ml-transformers para detectar o rosto do editor.

Primeiro, inicialize o mediaPipeHelper com o modelo “face_detection”. Em seguida, envie a imagem da webcam para o mediaPipeHelper periodicamente usando mediaPipeHelper.send(image).

Assim que a biblioteca concluir o processo de detecção, ela passará o resultado para a função ouvinte criada durante a inicialização. Nesse caso, a função ouvinte recebe o resultado da detecção de rosto e o encaminha ao web worker para pós-processamento.

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

O resultado é uma caixa delimitadora que contém informações sobre as dimensões do rosto detectado, as quais foram convertidas em dimensões normalizadas. O valor real pode ser obtido multiplicando-se o resultado pelas dimensões do Video, por exemplo: faceWidth = resultWidth * videoWidth.

A dimensão de recorte é aplicada para ampliar o Video. Normalmente, a dimensão de recorte precisa ser ajustada à dimensão do rosto detectado, com uma margem razoável para incluir parte do fundo ao redor do rosto. As novas dimensões calculadas serão então utilizadas para recortar o Video durante a transformação da transmissão.

Processador de mídia

Tradicionalmente, é necessário um intermediário, como o <canvas> elemento, é necessário para manipular o vídeo. Em contrapartida, um fluxo inserível permite que os desenvolvedores processem fluxos de vídeo/áudio diretamente, como redimensionar o vídeo, adicionar fundo virtual ou efeitos de voz. O biblioteca @vonage/media-processor utiliza os fluxos inseríveis em segundo plano para manipular um fluxo de Video.

A biblioteca pode processar várias funções de transformação durante a manipulação do fluxo. Nesse caso, basta uma única função de transformação para gerar um novo fluxo de Video com as dimensões desejadas.

Primeiro, inicialize e configure o processador de mídia com uma função de transformação, chamando a função do processador de mídia setTransformers . Essa função de transformação gerará um novo `videoFrame` com a dimensão calculada anteriormente. Agora, o novo `videoFrame` pode ser usado para publicação em sua videochamada.

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 transmissão

Depois de executar todas as etapas acima, você deverá conseguir gerar um Video com foco no rosto do apresentador. Em seguida, é preciso publicar o Video na sessão para que todos os usuários da mesma sessão possam ser vistos na transmissão de Video.

Para publicar o Video, você deve criar um objeto publisher usando a trilha de vídeo gerada e, em seguida, chamar publish para publicar o objeto publisher na sessão. Consulte a documentação para obter detalhes sobre como personalizar o editor.

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

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

Conclusão

Agora você está pronto para publicar um Video com foco no rosto durante uma videochamada! Esperamos que você tenha entendido como é possível criar rapidamente um Video com foco no rosto usando as bibliotecas ml-transformers e media-processor.

Mais detalhes e exemplos de código estão disponíveis em nosso repositório do GitHub.

Se você tiver alguma dúvida, participe do nosso Comunidade no Slack ou envie-nos uma mensagem no Twitter.