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

【问题标题】：face-api.js Use face expression model on hidden video feedface-api.js 在隐藏的视频源上使用面部表情模型
【发布时间】：2022-01-18 00:20:08
【问题描述】：

刚刚发现了很棒的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 中，所以我只取了重要的部分。

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

【问题讨论】：

标签： javascript canvas html5-video face-api

【解决方案1】：

我是来回答我自己的问题，以防将来有人需要。

显而易见的答案应该是添加“display: none;”到视频标签。但是，这无论如何都行不通。

相反，我在 javascript 中创建了该元素，将其附加到 DOM，并将其显示更改为“无”，然后它就起作用了。

这是使它工作的代码：

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';

【讨论】：