[Перевод] Разработка PWA с поддержкой распознавания лица и голоса08.01.2021 19:03

   
Emotion
   
Gender
   
Age

Далее, нужно поместить следующий фрагмент кода в нижней части index.html. Это позволит нам пользоваться API для распознавания лиц:

▍Шаг 4: импорт моделей в PWA

const startVideo = () => {
   navigator.mediaDevices.getUserMedia({video: {facingMode: 'user'}, audio: false})
       .then(stream => {
           videoPlayer.srcObject = stream;
           videoPlayer.style.display = 'block';
           videoPlayer.setAttribute('autoplay', '');
           videoPlayer.setAttribute('muted', '');
           videoPlayer.setAttribute('playsinline', '');
       })
       .catch(error => {
           console.log(error);
       });
}

Promise.all([
   faceapi.nets.tinyFaceDetector.loadFromUri("/src/models"),
   faceapi.nets.faceLandmark68Net.loadFromUri("/src/models"),
   faceapi.nets.faceRecognitionNet.loadFromUri("/src/models"),
   faceapi.nets.faceExpressionNet.loadFromUri("/src/models"),
   faceapi.nets.ageGenderNet.loadFromUri("/src/models")
]).then(startVideo);

▍Шаг 5: реализация логики проекта в файле facedetection.js

• faceapi.detectSingleFace — эта функция использует систему распознавания лиц SSD Mobilenet V1. Функции передают объект videoPlayer и объект с параметрами. Для того чтобы наладить распознавание нескольких лиц — detectSingleFace надо заменить на detectAllFaces.
• withFaceLandmarks — данная функция применяется для нахождения 68 ключевых точек (ориентиров) лица.
• withFaceExpressions — эта функция находит на изображении все лица и определяет выражения лиц, возвращая результаты работы в виде массива.
• withAgeAndGender — данная функция тоже находит на изображении все лица, определяет возраст и пол людей и возвращает массив.

videoPlayer.addEventListener("playing", () => {
const canvasForFaceDetection = faceapi.createCanvasFromMedia(videoPlayer);
let containerForFaceDetection = document.querySelector(".container-faceDetection");
containerForFaceDetection.append(canvasForFaceDetection);
const displaySize = { width: 500, height: 500};
faceapi.matchDimensions(canvasForFaceDetection, displaySize);
setInterval(async () => {
   const detections = await faceapi
     .detectSingleFace(videoPlayer, new faceapi.TinyFaceDetectorOptions())
     .withFaceLandmarks()
     .withFaceExpressions()
     .withAgeAndGender();
   const resizedDetections = faceapi.resizeResults(detections, displaySize);
     canvasForFaceDetection.getContext("2d").clearRect(0, 0, 500, 500);
   faceapi.draw.drawDetections(canvasForFaceDetection, resizedDetections);
   faceapi.draw.drawFaceLandmarks(canvasForFaceDetection, resizedDetections);
   if (resizedDetections && Object.keys(resizedDetections).length > 0) {
     const age = resizedDetections.age;
     const interpolatedAge = interpolateAgePredictions(age);
     const gender = resizedDetections.gender;
     const expressions = resizedDetections.expressions;
     const maxValue = Math.max(...Object.values(expressions));
     const emotion = Object.keys(expressions).filter(
       item => expressions[item] === maxValue
     );
     document.getElementById("age").innerText = `Age - ${interpolatedAge}`;
     document.getElementById("gender").innerText = `Gender - ${gender}`;
     document.getElementById("emotion").innerText = `Emotion - ${emotion[0]}`;
   }
}, 100);
});

Тут мы, в первую очередь, подключаем к videoPlayer обработчик события playing. Он срабатывает в ситуации, когда активна видеокамера.

Переменная videoPlayer даёт доступ к HTML-элементу . Видеоматериалы будут выводиться именно в этом элементе.

Затем создаётся элемент canvasElement, который представлен константой canvasForFaceDetection. Он используется для распознавания лица. Этот элемент размещается в контейнере faceDetection.

Функция setInterval() осуществляет вызовы faceapi.detectSingleFace с интервалом в 100 миллисекунд. Эта функция вызывается асинхронно, с применением конструкции async/await. В итоге результаты распознавания лица выводятся в полях с идентификаторами emotion, gender и age.

Распознавание речи средствами JavaScript

Ниже поля ввода имеются элементы управления, позволяющие выбрать язык.

Разберём, как и прежде, пошаговый план реализации соответствующих возможностей.

▍Шаг 1: файл index.html

• Уже имеющиеся в проекте стили из файла speech.css.
• Файл speech.js, в котором мы реализуем логику, необходимую для распознавания речи.

   
Click on the microphone icon and begin speaking.
   
Speak now.
   
No speech was detected. You may need to adjust your
       
           microphone settings.
   

       No microphone was found. Ensure that a microphone is installed and that
       
           microphone settings are configured correctly.
   
Click the "Allow" button above to enable your microphone.
   
Permission to use microphone was denied.
   
Permission to use microphone is blocked. To change,
       go to chrome://settings/contentExceptions#media-stream
   
Web Speech API is not supported by this browser.
       Upgrade to Chrome
       version 25 or later.


   
       


   
   
   



   

   

       
       
   

if ('webkitSpeechRecognition' in window) {
    start_button.style.display = 'inline-block';
    recognition = new webkitSpeechRecognition();
    recognition.continuous = true;
    recognition.interimResults = true;
    recognition.onstart = () => {
       recognizing = true;
       showInfo('info_speak_now');
       start_img.src = './src/images/mic-animate.gif';
    };
    recognition.onresult = (event) => {
       let interim_transcript = '';
       for (let i = event.resultIndex; i < event.results.length; ++i) {
          if (event.results[i].isFinal) {
             final_transcript += event.results[i][0].transcript;
          } else {
             interim_transcript += event.results[i][0].transcript;
          }
       }
       final_transcript = capitalize(final_transcript);
       title.innerHTML = linebreak(final_transcript);
       interim_span.innerHTML = linebreak(interim_transcript);
     };
    
    recognition.onerror = (event) => {
     // код обработки ошибок
    };
    recognition.onend = () => {
      // код, выполняемый при завершении распознавания речи
    };
}

const startButton = (event) => {
   if (recognizing) {
       recognition.stop();
       return;
   }
   final_transcript = '';
   recognition.lang = select_dialect.value;
   recognition.start();
   ignore_onend = false;
   title.innerHTML = '';
   interim_span.innerHTML = '';
   start_img.src = './src/images/mic-slash.gif';
   showInfo('info_allow');
   start_timestamp = event.timeStamp;
};