Передать растровое изображение изображения в пакет SDK Azure Face для обнаруженияWithStream()

Я пытаюсь написать приложение React, которое захватывает кадр с веб-камеры и передает его в SDK Azure Face (documentation) для обнаружения лиц на изображении и получения атрибутов этих лиц — в данном случае эмоций и позы головы. .

Я получил модифицированную версию здесьпример кода быстрого запуска работает, который вызывает метод detectWithUrl(). Однако изображение, которое у меня есть в моем коде, представляет собой растровое изображение, поэтому я подумал, что вместо этого могу попробовать вызвать функциюDetectWithStream(). В документации к этому методу говорится, что ему нужно передать что-то типа msRest.HttpRequestBody — я нашел несколько документацию для этого типа, который выглядит так, как будто он хочет быть большим двоичным объектом, строкой, ArrayBuffer или ArrayBufferView. Проблема в том, что я не очень понимаю, что это такое или как я могу получить от растрового изображения HttpRequestBody этого типа. Раньше я работал с HTTP-запросами, но не совсем понимаю, почему они передаются этому методу или как это сделать.

Я нашел несколько похожих примеров и ответов на то, что я пытаюсь сделать, например этот. К сожалению, все они либо на другом языке, либо делают вызовы Face API вместо использования SDK.

Редактировать: я забыл связать метод detectFaces() раньше, и поэтому я изначально получал другую ошибку, связанную с этим. Теперь, когда я исправил эту проблему, я получаю следующую ошибку: Uncaught (in promise) Error: image must be a string, Blob, ArrayBuffer, ArrayBufferView, or a function returning NodeJS.ReadableStream

Внутри конструктора():

this.detectFaces = this.detectFaces.bind(this); 

const msRest = require("@azure/ms-rest-js");
const Face = require("@azure/cognitiveservices-face");
const key = <key>;
const endpoint = <endpoint>;
const credentials = new msRest.ApiKeyCredentials({ inHeader: { 'Ocp-Apim-Subscription-Key': key } });
const client = new Face.FaceClient(credentials, endpoint);

this.state = {
  client: client
}

// get video
const constraints = {
  video: true
}
navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
  let videoTrack = stream.getVideoTracks()[0];
  const imageCapture = new ImageCapture(videoTrack);
  imageCapture.grabFrame().then(function(imageBitmap) {
    // detect faces
    this.detectFaces(imageBitmap);
  });
})

Метод обнаружения лиц():

async detectFaces(imageBitmap) {
    const detectedFaces = await this.state.client.face.detectWithStream(
        imageBitmap,
        {
          returnFaceAttributes: ["Emotion", "HeadPose"],
          detectionModel: "detection_01"
        }
      );
    console.log (detectedFaces.length + " face(s) detected");
});

Может ли кто-нибудь помочь мне понять, что передать методу detectWithStream(), или, может быть, помочь мне понять, какой метод лучше использовать вместо этого для обнаружения лиц на изображении с веб-камеры?


azure node.js face-api bitmapimage
person Keara    schedule 12.03.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я понял это благодаря этой странице под заголовком Image to blob! Вот код, который я добавил перед вызовом detectFaces():

    // convert image frame into blob
    let canvas = document.createElement('canvas');
    canvas.width = imageBitmap.width;
    canvas.height = imageBitmap.height;
    let context = canvas.getContext('2d');
    context.drawImage(imageBitmap, 0, 0);
    canvas.toBlob((blob) => {

      // detect faces
      this.detectFaces(blob);

    })

Этот код преобразует растровое изображение в BLOB-объект, а затем передает BLOB-объект detectFaces(). Я также изменил detectFaces(), чтобы принять blob вместо imageBitmap, вот так, и тогда все заработало:

  async detectFaces(blob) {
    const detectedFaces = await this.state.client.face.detectWithStream(
        blob,
        {
          returnFaceAttributes: ["Emotion", "HeadPose"],
          detectionModel: "detection_01"
        }
      );
    ...
  }
person Keara    schedule 14.03.2021