录制视频 HTML5 无法在 Safari 和 iOS 移动应用程序中工作

Question

我正在尝试使用 HTML5 视频 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video 访问设备上的摄像头。

我正在按照此示例 - https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element 来录制视频。

它在 Chrome 浏览器中完美运行，但似乎不适用于 Safari 和 iOS 移动应用程序。 调试时，

captureStream()

和

mozCaptureStream()

函数均未定义。

关于如何解决这个问题有什么建议吗？

PS：这是一个已知问题 - https://bugs.webkit.org/show_bug.cgi?id=181663。有什么解决方法吗？谢谢！

Answer 1

“它在 Chrome 浏览器中完美运行，但似乎不适用于 Safari 和 iOS 移动应用程序。在调试时，

captureStream()

和

mozCaptureStream()

函数均未定义。”

1. 您的链接正在录制到 Google 自己的 webM 视频中，这是 Apple 不支持的格式。 Safari 浏览器无法将像素编码为 VP8 或 VP9 以在 webM 容器内使用。 Apple 有 MPEG 视频许可证，因此对于 Safari，我希望 MP4 成为他们的预期输出（但是 Safari 内部有免费的 H264 编码器吗？没有）。

2. mozCaptureStream()

   特定于 Mozilla Firefox。 Safari 不会知道/接受它。

Safari 上

3. captureStream()

   不完全支持。缺少的部分是录音部分。

可能的解决方法：

• 尝试在 Safari 设置中启用 MediaRecorder API。 研究（双重检查）已知问题，如本文底部所述，请阅读本文：
  https://blog.addpipe.com/safari-support-on-macos-beta/

• 如果您可以将网络摄像头绘制到 Canvas，请考虑引入您自己的（基于 Javascript）H264 编码器（用于 MP4 视频）或 VP8/VP9 编码器（用于 webM 视频）。

  
  

• 您可以尝试：

  https://github.com/TrevorSundberg/h264-mp4-encoder。

• 等待

  webCodecs API 添加到 Safari。 请注意，在 Chrome/Edge 中，您可以仅使用内置
  webCodecs API 将视频编码为 MP4 或 WebM 格式。 Safari 没有免费的编码器，因此没有 webCodecs API。

Answer 2

我一直在努力让 captureStream 在 iOS 上工作（Safari 和 Chrome，结果相同），但没有成功。 @VC.One 的回复帮助我停止尝试使用 webM 格式，该格式由我从 mdn 跟踪的示例代码使用，位于此处...

https://developer.mozilla.org/en-US/docs /Web/API/MediaStream_Recording_API/Recording_a_media_element

所以我只是切换到 mp4 而不是 webm，使用 .srcObject 而不是 .captureStream，现在我可以在 iOS 上运行了。我还有很多清理工作要做，但是当我的解决方案完成后，我会写一篇很好的文章并发回。

此外，有人指出我需要将 onloadedmetadata 与 play 方法一起使用，以便获取视频元素来显示来自 getUserMedia 的实时字节馈送，并且这有效。然后我只需要将字节存储在 iOS 不会惊慌失措的地方（它不支持 captureStream），然后所有这些都放在一起。这绝对是一个核心的许可问题，这就是为什么它可以使用 mp4 而不是 webm 来工作。