Введение

Во время встречи по видеосвязи иногда бывает трудно почувствовать связь с другими по сравнению с личной встречей. Это связано с тем, что мы не можем внимательно следить за эмоциями, чувствами и языком тела других людей во время видеозвонка. Кроме того, люди всегда держат дистанцию ​​между собой и веб-камерой. Это затрудняет ведущему немедленный ответ аудитории.

Поэтому внедрено использование мл-трансформеров Vonage и библиотек медиа-процессоров для приближения лица звонящего во время видеозвонка. Это отличная функция, которая может обеспечить дополнительную заботу во время сеанса медицинского консультанта. Мл-трансформеры могут распознавать лицо пациента, а медиапроцессор можно использовать для фокусировки на лице пациента во время сеанса консультации. Таким образом, теперь врачи могут поставить более точный диагноз, четко отслеживая мимические реакции пациентов, язык тела или даже болезненные сигналы, такие как бледное или опухшее лицо, на протяжении всего разговора.

Эта статья покажет вам, как интегрировать Vonage Video API с библиотеками Vonage ml-transformers и media-processor для создания видеовызова, который автоматически масштабирует и центрирует публикатор.

Предпосылки

  1. Аккаунт Vonage Video API. Если у вас его еще нет, вы можете создать учетную запись в Видео панели.
  2. Версия Node.js ›= 16.8
  3. Версия Vite.js ›= 2.9

Присоединиться к сеансу

Чтобы присоединиться к сеансу видеовызова, вам потребуется идентификатор сеанса, JWT и ключ API. Вы можете сгенерировать идентификатор сеанса и токен в разделах проекта «Создать идентификатор сеанса» и «Создать токен» вашей учетной записи Vonage Video API.

Затем используйте эту информацию для инициализации и подключения к сгенерированному сеансу, вызвав initSession и connect. Не забудьте добавить Vonage Video API library в свой HTML-файл. Для получения дополнительной информации о библиотеке Vonage Video API посетите Vonage Video API Client SDK.

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

Вы можете добавить прослушиватели событий streamCreated, streamDestroyed и streamPropertyChanged для сеанса, поскольку вам может потребоваться внести некоторые изменения в макет в браузере, чтобы макет выглядел лучше во время видеовызова.

Событие StreamCreated запускается, если другой пользователь (подписчик AKA) присоединяется к тому же сеансу. С другой стороны, событие streamDestroyed информирует вас о том, что подписчик вышел из сеанса. В то время как событие streamPropertyChange сообщает вам, что свойство видео, например размер видео, состояние звука или состояние видео подписчика, было изменено.

Трансформаторы МЛ

Библиотека @vonage/ml-transformers состоит из множества функций — например, сетка лица, распознавание лиц, эффект размытия фона, замена виртуального фона и т. д.

В этом руководстве показано, как использовать библиотеку ml-transformers для определения лица издателя.

Во-первых, инициализируйте mediaPipeHelper с помощью модели «face_detection». Затем периодически отправляйте изображение с веб-камеры в mediaPipeHelper с помощью mediaPipeHelper.send(image).

Как только библиотека завершит процесс обнаружения, она передаст результат функции прослушивателя, созданной во время инициализации. В этом случае функция слушателя получает результат обнаружения лица и передает результат веб-воркеру для постобработки.

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

Результатом является ограничивающая рамка, содержащая информацию об обнаруженном размере лица, которая была преобразована в нормализованные размеры. Фактическое значение можно получить, умножив результат на размеры видео, например. faceWidth = resultWidth * videoWidth.

Обрезанный размер применяется для увеличения видео. Как правило, обрезанный размер необходимо настроить в соответствии с обнаруженным размером лица с разумным запасом, чтобы включить фон вокруг лица. Затем новые рассчитанные размеры будут использоваться для обрезки видео во время преобразования потока.

Медиа процессор

Традиционно для управления видео необходим посредник, такой как элемент <canvas>. Напротив, вставляемый поток позволяет разработчикам напрямую обрабатывать видео/аудиопотоки, например изменять размер видео, добавлять виртуальный фон или голосовые эффекты. Библиотека @vonage/media-processor использует фоновые вставляемые потоки для управления видеопотоком.

Библиотека может обрабатывать множество функций преобразования во время манипулирования потоком. В этом случае требуется только одна функция преобразования для создания нового видеопотока с желаемыми размерами.

Во-первых, инициализируйте и установите медиапроцессор с помощью функции преобразования, вызвав функцию медиапроцессора setTransformers. Эта функция преобразования создаст новый видеокадр с рассчитанным ранее размером. Теперь новый видеофрейм можно использовать для публикации в вашем видеозвонке.

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

Опубликовать поток

После выполнения всех вышеперечисленных шагов вы сможете создать видео, которое фокусируется на лице издателя. Затем вам нужно опубликовать видео в сеансе, чтобы все пользователи в том же сеансе были видны в видеопотоке.

Чтобы опубликовать видео, вы должны создать объект издателя, используя сгенерированную видеодорожку, а затем вызвать publish для публикации объекта издателя в сеансе. Обратитесь к документации для получения подробной информации о настройке издателя.

let publisher = OT.initPublisher('croppedVideo', {
        insertMode: 'append',
        videoSource: videoTracks[0]
}, handleError);
    session.publish(publisher, handleError);

Заключение

Теперь вы готовы опубликовать видео, ориентированное на лицо, во время видеозвонка! Надеюсь, вы получили представление о том, как можно быстро создать видео, ориентированное на лица, с помощью библиотек ml-transformers и media-processor.

Более подробная информация и образцы кода доступны в нашем репозитории GitHub.

Если у вас есть какие-либо вопросы, присоединяйтесь к нашему Community Slack или отправьте нам сообщение в Twitter.

Первоначально опубликовано на странице https://developer.vonage.com/en/blog/auto-zoom-and-center-published-video-calls-with-vonage-video-api#introduction