Face-api.js人脸表情检测在iOS设备上无法打开相机求助

以下是针对你遇到的iOS相机无法打开问题的具体排查点和修复方案：

1. 替换废弃的相机API #

你当前使用的navigator.getUserMedia是旧版API，iOS Safari对其支持有限，建议替换为标准的navigator.mediaDevices.getUserMedia，同时完善错误捕获：

startVideo() {
  this.videoInput = this.video.nativeElement;
  navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' }, audio: false })
    .then((stream) => {
      this.videoInput.srcObject = stream;
    })
    .catch((err) => {
      console.error('相机请求失败:', err);
      // 可在此添加用户提示，比如"无法获取相机权限，请检查系统设置"
    });
  this.detect_Faces();
}

2. 给video标签添加必填属性 #

iOS Safari要求视频必须设置playsinline才能在页面内播放（而非自动全屏），否则相机流无法正常渲染，同时需添加muted确保自动播放：

<video #video playsinline autoplay muted></video>

3. 相机权限必须由用户交互触发 #

iOS不允许页面加载时自动请求相机权限，必须通过用户主动操作（比如点击按钮）触发。修改方式：

1. 在页面添加触发按钮：

<button (click)="startVideo()">开启相机</button>
<video #video playsinline autoplay muted></video>

2. 移除ngOnInit中直接调用startVideo()的逻辑，改为由按钮点击触发。

4. 明确视频约束参数 #

空的video: {}可能导致iOS无法正确初始化相机，建议添加明确的配置：

{
  video: {
    facingMode: 'user', // 指定使用前置摄像头
    width: { ideal: 640 },
    height: { ideal: 480 }
  },
  audio: false
}

5. 检查运行环境协议 #

iOS Safari仅允许在HTTPS协议（或localhost开发环境）下访问相机，HTTP环境会直接拒绝相机请求，确保部署环境为HTTPS。

额外优化：修复人脸检测循环逻辑 #

你当前的detect_Faces中只执行一次检测，需改为持续循环检测：

async detect_Faces() {
  this.elRef.nativeElement.querySelector('video').addEventListener('play', async () => {
    this.show_tip = true;
    this.canvas = await faceapi.createCanvasFromMedia(this.videoInput);
    this.canvasEl = this.canvasRef.nativeElement;
    this.canvasEl.appendChild(this.canvas);
    this.canvas.setAttribute('id', 'canvass');
    this.canvas.setAttribute(
      'style',`position: fixed;
      top: 0;
      left: 0;`
    );
    this.displaySize = {
      width: this.videoInput.width,
      height: this.videoInput.height,
    };
    faceapi.matchDimensions(this.canvas, this.displaySize);

    // 持续循环检测人脸
    const detectLoop = async () => {
      this.detection = await faceapi.detectAllFaces(this.videoInput, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions();
      this.resizedDetections = faceapi.resizeResults(this.detection, this.displaySize);
      this.canvas.getContext('2d').clearRect(0, 0, this.canvas.width,this.canvas.height);
      
      if (this.resizedDetections.length > 0 ) {
        const canvas = document.createElement('canvas');
        canvas.width = 1600;
        canvas.height = 1200;
        canvas.getContext('2d').drawImage(this.video.nativeElement, 0, 0);
        
        const img = document.createElement("img");
        img.src = canvas.toDataURL("image/webp");
        
        console.log(img.src);
        this.faceSearch(img.src);
      }
      requestAnimationFrame(detectLoop);
    }
    detectLoop();
  });
}

内容的提问来源于stack exchange，提问作者manish_jsohi_1996