如何检测Safari浏览器中MediaStream的暂停状态？

目前没有官方API可以直接检测Safari的这种「摄像头暂停」状态，主流的可行方案是通过分析视频帧内容判断是否为黑屏，以下是具体实现思路和代码参考：

核心思路 #

利用Canvas绘制视频流的实时帧，分析帧内像素是否接近全黑（考虑微小噪点），以此推测摄像头是否被Safari暂停。

实现代码 #

// 检测视频流是否为黑屏（适配Safari暂停场景）
function isVideoStreamBlack(videoElement, threshold = 5) {
  const canvas = document.createElement('canvas');
  canvas.width = videoElement.videoWidth;
  canvas.height = videoElement.videoHeight;
  const ctx = canvas.getContext('2d');

  // 将当前视频帧绘制到Canvas
  ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
  
  // 获取图像像素数据
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  // 遍历像素，判断是否存在非黑像素
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i + 1];
    const b = data[i + 2];
    // 只要有像素的RGB值超过阈值，就说明不是黑屏
    if (r > threshold || g > threshold || b > threshold) {
      return false;
    }
  }
  return true;
}

// 使用示例
const video = document.getElementById('your-video-element');
// 每隔1.5秒检测一次
const detectionInterval = setInterval(() => {
  if (video.srcObject && isVideoStreamBlack(video)) {
    // 触发业务逻辑：警告用户或终止流程
    console.log('摄像头已被Safari暂停，请重新开启');
    // 示例：显示警告弹窗
    alert('摄像头已被暂停，请重新开启以继续');
    // 可选：停止检测
    // clearInterval(detectionInterval);
  }
}, 1500);

优化建议 #

• 调整threshold值：根据实际场景设置，避免摄像头微小噪点导致误判，一般5-10较为合适
• 优化检测频率：不需要过于频繁检测，1-2秒一次即可平衡性能和实时性
• 多帧验证：可以连续检测2-3帧都为黑屏时再触发警告，减少误判概率
• 区域采样：如果视频画面有固定UI（比如按钮），可以只检测画面中心区域，避免UI干扰

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