Вы знаете этого человека. Это может быть вашим значимым другим, ребенком, сотрудником или другом. Этот человек, который говорит одно, но вы можете сказать по их лицу, они значат что-то совершенно другое. Вы, наверное, просто изобразили их в своей голове. Может быть, вы помните точный разговор. Возможно, это пошло так:
Вы: Хорошо?
Их: Отлично.
Осторожно, спойлеры: Это было не в порядке.
Не было бы здорово, если бы вы могли знать настроение за тем, что они говорили? С Opentok и Azure’s Face API вы можете!
В этом руководстве мы построим многопартийную видеоконференцию, которая позволяет нам проанализировать настроение каждого участника на основе их выражения лица. Затем мы покажем это настроение как эмодзи по их видео.
Предварительные условия
Перед началом работы вам понадобится несколько вещей:
- Аккаунт токбокса – Создать один бесплатно Если вы еще не
- Бесплатный аккаунт Azure с Когнитивное обслуживание 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 = [];
Здесь происходит четыре вещи:
- Мы загружаем переменные на основе тех, которые мы указали в
config.js
файл - Мы создаем
Рульеррар
Метод, который мы будем использовать во время при возникновении ошибки - Мы добавляем
datauritoblob
Метод, который мы будем использовать для преобразования изображения Base64/URLENCODED в BLOB для отправки на Azure API Azure - Мы добавили два массива с именем
потоки
иэмоции
потоки
Массив проведет все активные потоки участников, чтобы мы могли получить доступ к ним для захвата изображений для отправки на 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
Файл, замените комментарий, который говорит, что говорит со следующим:
Это добавляет нижний колонтитул внизу страницы с помощью кнопки «анализировать» и неупорядоченным списком, который мы будем использовать в качестве легенды между 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. Это делает следующее:
- Добавляет предоставленный класс нашим
эмоции
множество - Добавляет div на соответствующую видеопанну с классом для дисплея Emoji для отображения
- Добавляет
. Используется
класс кЛи
в нашем нижнем колонтитуле для этой эмоджи, чтобы он будет отображаться в легенде
Процессмер
Метод получает полезную нагрузку данных для лица с 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? Проверьте следующие сообщения в блоге:
- Сравнение API-анализа настроений API
- Анализ настроений с использованием IBM Watson Tone Analyzer в PHP
- Добавление анализа настроения на SMS с IBM Watson
Оригинал: “https://dev.to/vonagedev/i-see-what-you-re-saying-sentiment-analysis-with-opentok-and-azure-face-api-35h”