将图像位图传递给 Azure 人脸 SDK detectWithStream()答案

【问题标题】：Pass Image Bitmap to Azure Face SDK detectWithStream()将图像位图传递给 Azure 人脸 SDK detectWithStream()
【发布时间】：2021-03-15 06:24:12
【问题描述】：

我正在尝试编写一个 React 应用程序，它从网络摄像头抓取一帧并将其传递给 Azure Face SDK (documentation) 以检测图像中的人脸并获取这些人脸的属性——在这种情况下，情绪和头部姿势。

我得到了the quickstart example code here 的修改版本，它调用了detectWithUrl() 方法。但是，我的代码中的图像是位图，所以我想我会尝试调用 detectWithStream()。这个方法的文档说它需要传递 msRest.HttpRequestBody 类型的东西——我找到了一些documentation for this type，它看起来像是一个 Blob、字符串、ArrayBuffer 或 ArrayBufferView。问题是，我真的不明白这些是什么，或者我如何从位图图像到该类型的 HttpRequestBody。我之前处理过 HTTP 请求，但我不太明白为什么将一个请求传递给此方法，或者如何制作它。

我找到了一些类似的例子和我正在尝试做的事情的答案，比如this one。不幸的是，它们要么使用不同的语言，要么调用 Face API 而不是使用 SDK。

编辑：我之前忘记绑定 detectFaces() 方法，所以我最初遇到了与此相关的不同错误。现在我已经解决了这个问题，我收到以下错误： Uncaught (in promise) Error: image must be a string, Blob, ArrayBuffer, ArrayBufferView, or a function returning NodeJS.ReadableStream

在constructor()内部：

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

detectFaces() 方法：

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() 方法，或者可以帮助我了解哪种方法更适合用于从网络摄像头图像中检测人脸？

【问题讨论】：

标签： node.js azure bitmapimage face-api

【解决方案1】：

感谢this page 在标题“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"
        }
      );
    ...
  }

【讨论】：