face-api.js 在隐藏视频源上使用面部表情模型

Question

刚刚发现很棒的东西 face-api.js repo，我在使用面部表情方面玩得很开心 API。可能是因为我笑得太多了（为了测试）。

无论如何，在我的应用程序中，我想检查用户是否在微笑但不在屏幕上显示相机视频。

现在，我可以非常准确地检查用户是否在微笑，但视频必须在我的屏幕上。

如何从屏幕上删除视频？

这里是js代码：

<video id="video" width="500" height="500" autoplay muted ></video>

async startVideo() {
      let stream = null;
      try {
        stream = await navigator.mediaDevices.getUserMedia({
          audio: false,
          video: { width: 1280, height: 720 },
        });
        this.video.srcObject = stream;
      } catch (e) {
        console.log(e);
      }
    },

this.video = document.getElementById('video');
    Promise.all([
      faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
      faceapi.nets.faceExpressionNet.loadFromUri('/models'),
    ]).then(this.startVideo);
    this.video.addEventListener('play', () => {
      console.log('video started');
      setInterval(async () => {
        const detections = await faceapi.detectAllFaces(
          this.video,
          new faceapi.TinyFaceDetectorOptions(),
        ).withFaceExpressions();
        detections.forEach((detection) => {
          if (detection.expressions.happy >= 0.7) {
            this.isHappy = true;
          } else {
            this.isHappy = false;
          }
        });
      }, 100);
    });

该应用程序在 vue.js，所以我只选择了重要的部分。

非常感谢您的帮助。干杯，

Answer 1

我在这里回答我自己的问题，以防将来有人需要它。

显而易见的答案应该是添加一个“显示：none;”到视频标签。但是，这在某种程度上不起作用。

相反，我在 javascript 中创建了元素，将其附加到 DOM，并将其显示更改为“none”，并且成功了。

这是让它工作的代码：

this.video = document.createElement('video');
this.video.setAttribute('id', 'video');
this.video.setAttribute('autoplay', 'muted');
document.body.appendChild(this.video);
document.getElementById('video').style.display = 'none';

face-api.js 在隐藏视频源上使用面部表情模型

face-api.js Use face expression model on hidden video feed

javascript

canvas

html5-video

face-api