Рубрики
Без рубрики

Я вижу, что вы говорите: анализ настроений с Opentok и Azure Face API

Вы знаете этого человека. Это может быть вашим значимым другим, ребенком, сотрудником или другом. Это за … с меченым руководством, Azure, JavaScript, Video.

Вы знаете этого человека. Это может быть вашим значимым другим, ребенком, сотрудником или другом. Этот человек, который говорит одно, но вы можете сказать по их лицу, они значат что-то совершенно другое. Вы, наверное, просто изобразили их в своей голове. Может быть, вы помните точный разговор. Возможно, это пошло так:

Вы: Хорошо?

Их: Отлично.

Осторожно, спойлеры: Это было не в порядке.

Не было бы здорово, если бы вы могли знать настроение за тем, что они говорили? С Opentok и Azure’s Face API вы можете!

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

Предварительные условия

Перед началом работы вам понадобится несколько вещей:

Хотите пропустить до конца? Вы можете найти все исходный код для этого руководства на Github Отказ

Начиная

Мы будем использовать JavaScript, чтобы сделать тяжелый подъем, поэтому давайте вытесним HTML & CSS с дороги.

mkdir video-sentiment
cd video-sentiment

В корне папки видео-настроения создайте index.html Файл и скопируйте следующее к нему.




  
    OpenTok Sentiment Analysis

    
    

    

    
    
    
  
  

    

Далее создайте CSS каталог и добавить app.csss файл к нему. Скопируйте CSS ниже в этот файл.

body,
html {
  height: 100%;
  background-color: black;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

#videos {
  width: 100%;
  height: 50%;
  margin-left: auto;
  margin-right: auto;
}

#subscriber {
  width: 100%;
  height: 100%;
}

#publisher {
  position: absolute;
  bottom: 50px;
  right: 0px;
  z-index: 100;
}

.OT_subscriber {
  width: 300px !important;
  height: 200px !important;
  float: left;
  margin: 5px !important;
}

.OT_widget-container {
  padding: 6px 0 0 6px !important;
  background-color: #70B7FD !important;
}

#publisher .OT_widget-container {
  padding: 6px 0 0 6px !important;
  background-color: hotpink !important;
}

.sentiment {
  position: absolute;
  z-index: 9000;
  height: 100px;
  width: 100px;
  font-size: 48px;
}

footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  padding: 10px;
  background-color: gray;
}

button {
  font-size: 16px;
  padding: 5px 10px;
  display: inline;
}

ul {
  float: right;
  display: inline;
  list-style: none;
  padding: 5px 10px;
  margin: 0;
}

li {
  display: inline;
  background-color: lightgrey;
  padding: 10px;
  display: none;
}
li.used {
  display: inline;
}

Давайте настроим настроены

Здорово! Теперь мы можем сделать, что довольно HTML & CSS делают что-то. Создать JS папка и добавить config.js файл.

config.js Файл содержит параметры конфигурации, которые мы получим с наших аккаунтов Tokbox и Azure. Скопируйте следующее в config.js файл.

// Replace these values with those generated in your TokBox and Azure Accounts
const OPENTOK_API_KEY = '';
const OPENTOK_SESSION_ID = '';
const OPENTOK_TOKEN = '';
const AZURE_FACE_API_SUBSCRIPTION_KEY = '';
const AZURE_FACE_API_ENDPOINT = '';

Настройки Opentok

Мы получим Opentok_api_key , Opentok_session_id. и Opentok_token Переменные с нашей учетной записи Tokbox.

В вашей учетной записи Tokbox щелкните меню «Проекты» и «Создать новый проект». Затем нажмите кнопку «Создать пользовательский проект». Дайте своему новому проекту имя и нажмите кнопку «Создать». Вы можете оставить предпочтительный кодек как «VP8».

Затем вы можете скопировать свой ключ API и вставьте его как значение для Opentok_api_key параметр.

Далее нажмите «Просмотр проекта». В нижней части страницы детализации проекта вы найдете инструменты проекта, где вы можете создать идентификатор сеанса и токен. Выберите «Расправожен» для медиа-режима вашего сеанса и нажмите кнопку «Создать идентификатор сеанса». Затем скопируйте сгенерированный идентификатор сеанса и вставьте его как значение Opentok_session_id параметр.

Наконец, вставьте сгенерированный идентификатор сеанса в поле ID сеанса формы Generate Token и нажмите кнопку «Generate Token». Скопируйте генерируемый токен как значение Opentok_token параметр.

Azure Face API Настройки

Войдите в свою учетную запись Azure и создайте новую когнитивную службу API для лица. После создания нажмите на службу и перейдите на лезвие «Быстрый запуск». Там вы найдете свой Ключ и Конечная точка Отказ Скопируйте эти два значения для Azure_Face_api_subscription_key и Azure_Face_api_endpoint. Настройки соответственно.

Я чувствую себя видно

С нашей конфигурацией готова, давайте добавим немного JavaScript для подключения к сеансу Opentok. Добавить app.js Файл к папке JS и скопируйте следующее к нему.

var opentok_api_key;
var opentok_session_id;
var opentok_token;
var azure_face_api_subscription_key;
var azure_face_api_endpoint;

// See the config.js file.
if (OPENTOK_API_KEY &&
  OPENTOK_SESSION_ID &&
  OPENTOK_TOKEN &&
  AZURE_FACE_API_SUBSCRIPTION_KEY &&
  AZURE_FACE_API_ENDPOINT) {

  opentok_api_key = OPENTOK_API_KEY;
  opentok_session_id = OPENTOK_SESSION_ID;
  opentok_token = OPENTOK_TOKEN;
  azure_face_api_subscription_key = AZURE_FACE_API_SUBSCRIPTION_KEY;
  azure_face_api_endpoint = AZURE_FACE_API_ENDPOINT;

  initializeSession();

} else {

  alert('Failed to get configuration variables. Make sure you have updated the config.js file.');

}

// Handling all of our errors here by logging them to the console
function handleError(error) {
  if (error) {
    console.log(error.message);
  }
}

function dataURItoBlob(dataURI) {
  // convert base64/URLEncoded data component to raw binary data held in a string
  var byteString;
  if (dataURI.split(",")[0].indexOf("base64") >= 0)
    byteString = atob(dataURI.split(",")[1]);
  else byteString = unescape(dataURI.split(",")[1]);

  // separate out the mime component
  var mimeString = dataURI
    .split(",")[0]
    .split(":")[1]
    .split(";")[0];

  // write the bytes of the string to a typed array
  var ia = new Uint8Array(byteString.length);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  return new Blob([ia], { type: mimeString });
}

var streams = [];
var emotions = [];

Здесь происходит четыре вещи:

  1. Мы загружаем переменные на основе тех, которые мы указали в config.js файл
  2. Мы создаем Рульеррар Метод, который мы будем использовать во время при возникновении ошибки
  3. Мы добавляем datauritoblob Метод, который мы будем использовать для преобразования изображения Base64/URLENCODED в BLOB для отправки на Azure API Azure
  4. Мы добавили два массива с именем потоки и эмоции

потоки Массив проведет все активные потоки участников, чтобы мы могли получить доступ к ним для захвата изображений для отправки на API Azure Face.

эмоции Массив будет держать строки, которые представляют любые эмоции, возвращаемые AZURE Face API. Это будет использоваться для отображения легенды emojis пользователю динамически.

Инициализация сеанса Opentok

Добавьте Инитализация Метод ниже до нижней части app.js файл.

function initializeSession() {
  var session = OT.initSession(opentok_api_key, opentok_session_id);

  // Subscribe to a newly created streams and add
  // them to our collection of active streams.
  session.on("streamCreated", function (event) {
    streams.push(event.stream);
    session.subscribe(
      event.stream,
      "subscriber",
      {
        insertMode: "append"
      },
      handleError
    );
  });

  // Remove streams from our array when they are destroyed.
  session.on("streamDestroyed", function (event) {
    streams = streams.filter(f => f.id !== event.stream.id);
  });

  // Create a publisher
  var publisher = OT.initPublisher(
    "publisher",
    {
      insertMode: "append"
    },
    handleError
  );

  // Connect to the session
  session.connect(opentok_token, function (error) {
    // If the connection is successful, initialize a publisher and publish to the session
    if (error) {
      handleError(error);
    } else {
      session.publish(publisher, handleError);
    }
  });
}

Инитализация Метод инициализирует наш клиент Opentok с сеансом, который мы указываем с идентификатором сеанса. Затем добавляет обработчики событий для Streamcreated и StreamdeStryed События для управления добавлением и удалением потоков из нашего потоки множество. Наконец, он подключается к сеансу, используя токен, который мы устанавливаем в нашем config.js файл.

Теперь вы можете открыть index.html в Chrome или Firefox. Когда вы загружаете страницу, вам может потребоваться позволить браузеру получить доступ к вашей веб-камеру и микрофону. После этого вы должны увидеть видеопоток себя (или все, что смотрит на веб-камеру), на котором смотрится), отображаемое на странице.

Если это сработало, отключите ваш аудио, а затем откройте другую вкладку (сохраняя оригинал открытой) и загрузите один и тот же файл. Теперь вы должны увидеть второе видео.

Устранение неполадок Совет: Если на странице нет видео, не отображающую вкладку «Консоль» в инструментах браузера (команда + опция + I на Mac, Ctrl + I в Windows) и проверьте наличие ошибок. Наиболее вероятным проблемой является то, что ваш ключ API OPENTOK, идентификатор сеанса или токен не устанавливается должным образом. Поскольку вы жесткокодировали свои учетные данные, также возможно, что ваш токен истек.

Я знаю Этот взгляд

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

В index.html Файл, замените комментарий, который говорит, что говорит со следующим:

  • Angry
  • Contempt
  • Disgust
  • Fear
  • Happiness
  • Neutral
  • Sadness
  • Surprise

Это добавляет нижний колонтитул внизу страницы с помощью кнопки «анализировать» и неупорядоченным списком, который мы будем использовать в качестве легенды между Emojis и Sentiments.

Теперь давайте добавим JavaScript для обработки наших настроений. Добавьте следующее в нижнюю часть app.js файл.

function assignEmoji(emojiClass, index) {
  var widgets = document.getElementsByClassName('OT_widget-container');
  emotions.push(emojiClass);

  var sentimentDiv = document.createElement("div");
  sentimentDiv.classList.add("sentiment");
  sentimentDiv.classList.add("em");
  sentimentDiv.classList.add(emojiClass);

  widgets[index].appendChild(sentimentDiv);

  const legendEl = document.getElementsByName(emojiClass);
  legendEl[0].classList.add('used');
}

function processEmotion(faces, index) {
  // for each face identified in the result
  for (i = 0; i < faces.length; i++) {
    const maxEmotion = Object.entries(
      faces[i].faceAttributes.emotion
    ).reduce((memo, [key, value]) =>
      memo[1] > value ? memo : [key, value]
    );

    let emojiClass = 'em-neutral_face';
    switch (maxEmotion[0]) {
      case 'angry':
        emojiClass = 'em-angry';
        break;
      case 'contempt':
        emojiClass = 'em-frowning';
        break;
      case 'disgust':
        emojiClass = 'em-face_vomiting';
        break;
      case 'fear':
        emojiClass = 'em-fearful';
        break;
      case 'happiness':
        emojiClass = 'em-grin';
        break;
      case 'sadness':
        emojiClass = 'em-cry';
        break;
      case 'surprise':
        emojiClass = 'em-astonished';
        break;
      default:
        break;
    }
    assignEmoji(emojiClass, index);
  }
}

// Gets a 

Давайте рассмотрим, что делает этот код.

НаседаниеМози Метод принимает в классе CSS, связанный с эмоцией для конкретного видеопотока и индекса этого потока в нашем интерфейсе UI. Это делает следующее:

  1. Добавляет предоставленный класс нашим эмоции множество
  2. Добавляет div на соответствующую видеопанну с классом для дисплея Emoji для отображения
  3. Добавляет . Используется класс к Ли в нашем нижнем колонтитуле для этой эмоджи, чтобы он будет отображаться в легенде

Процессмер Метод получает полезную нагрузку данных для лица с API Azure Face и идентифицирует эмоции с самым высоким рейтингом. Тогда звонит НаседаниеМози С соответствующими классом CSS для этой эмоции и индексом видео он обрабатывает.

SendSeazure Способ получает HTML видеоэлемент и индекс этого видеообъекта на нашей странице. Он получает поток, связанный с этим видеоэлементом, а затем создает HTML-холст в одних и тех же измерениях, что и поток. Далее он рисует захват потока к новым холсте и отправляет XMLHTTPREQUEST в API Azure Face с созданным его изображением. ASURE Face API вернет объект JSON, который мы отправим на Процессмер метод.

Наконец, PLACHIMAGES Метод очищает любую существующую эмохис из интерфейса UI и получает все видеотеги HTML в DOM и отправляет их на SendSeazure метод будет обработан. Этот метод называется нашим «анализе» кнопкой в нижнем колонтитуле.

Что ты действительно думаешь?

Теперь, когда мы открываем index.html Страница в наших браузерах мы можем нажать кнопку «Анализ», чтобы увидеть, что идентифицировано API Emotion Azure API. На данный момент есть несколько ограничений. Например, если Azure Face API распознает два лица в рамке, она вернет данные для обоих, но наш код в настоящее время только добавляет Emoji для первого.

Кроме того, я не уверен, но это может не работать для подростков. Я провел свою дочею подростковой дочерью десятки раз, но он только вернул «отвращение» и «презрением» как эмоции. Может быть, это не такая хорошая идея. Может быть, лучше не знать, что они действительно думают. ??

Дальнейшее чтение

Хотите узнать больше о использования анализа настроения с Nexmo? Проверьте следующие сообщения в блоге:

Оригинал: “https://dev.to/vonagedev/i-see-what-you-re-saying-sentiment-analysis-with-opentok-and-azure-face-api-35h”