iOS 14 Safari 和手机睡眠/解锁中的 WebRTC/getUserMedia 问题

Question

我似乎注意到 iOS 14 Safari 中 getUserMedia 的回归。以下是重现的步骤：

1. 在 iOS 14 Safari 上转到 https://webrtc.github.io/samples/src/content/getusermedia/gum/
2. 点击“打开摄像头”并接受摄像头权限；您应该会看到本地摄像头视频。
3. 点击电源键锁定手机；让手机进入睡眠状态
4. 解锁/唤醒手机；本地摄像头视频不见了。

在运行 iOS 13 的设备上不会发生这种情况。

我的问题是：

1. 其他人可以在他们的设备上确认这一点吗？到目前为止，我只在 iPhone 11 上进行过测试。
2. 有人找到解决方案了吗？

Answer 1

是的，也在这里！

我用 iOS 在 Browserstack 中检查了这个行为：

• 12.x：✓
• 13.x：✓
• 14.x：✗

试试这个：

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
 .then(stream => {
   const videoTracks = stream.getVideoTracks();
   console.log(videoTracks[0].enabled);
   document.querySelector('video').srcObject = stream;
 });

// Output
true <-- ?

然后，如果您再次尝试获取相机，但替换之前 MediaStream 上的视频轨道有效。

有时，如果您使用带有facingMode: 'user' 的视频约束也可以，为什么？我不知道。

我仍然找不到一致的解决方案。

Answer 2

是的，我在 iOS 14.2 和 getUserMedia 上遇到了类似的奇怪问题，我只能得到 navigator.mediaDevices.getUserMedia({video: true }) 上班 如果我将其更改为： navigator.mediaDevices.getUserMedia({ audio: true, video: true }) 它会失败。 这不是代码问题，因为我在 safari MacOS、chrome for MacOS、linux Firefox 上测试了我的项目。

作为临时修复，我可以在我这样做的那一刻继续我的生活：

const constraints = navigator.userAgent.includes("iPhone") ? {video:true} : {
audio:true,
  video: {
      width: { ideal: 640 },
      height: {ideal: 400 }
      }    
};