html - 如何访问 HTML5 视频解码功能？

Question

HTML5 具有<video/>从服务器下载视频、解码并呈现的元素。他们经常使用硬件加速解码（如果有的话）。

是否可以仅访问解码功能？原因是我正在使用自定义流协议，因此在客户端我已经编码了需要解码和渲染的视频流。

不幸的是，视频解码器的纯 JavaScript 实现不适用，因为它们不能提供足够的性能。我只对 HVEC 或 h.264 编解码器感兴趣。

Answer 1

是否可以仅访问解码功能？

抱歉不行。我们只能访问与流/源文件无关的高级 API，其影响有限，例如基于时间的位置、播放状态和各种事件。我们可以从当前解码的帧中将帧作为原始 RGB(A) 绘制到画布上，仅此而已。

原因是我正在使用自定义流协议，所以在客户端我已经编码了需要解码和渲染的视频流

您没有描述此协议，因此我们只能猜测，但您可能能够使用Media Source Extensions构建一个可供视频元素使用的浏览器兼容流。这使您可以直接在客户端中构建自适应和自定义流解决方案。

不幸的是，视频解码器的纯 JavaScript 实现不适用，因为它们不能提供足够的性能。

这不一定是真的。例如，纯 JS 实现实时解码 MPEG1 流，包括音频和视频，例如this和this。当然，这仅限于目前大多数浏览器所能做的。还有一个基于 emscripten 的 H-264解码器，它似乎也通过 WebGL 使用了 GPU，但我不能说它的性能——尽管它可能是下一段的一个很好的起点：

更好的选择是研究WebAssembly，它可以从例如 C/C++ 源代码运行预编译的二进制代码。这允许您使用在浏览器中以本机速度运行的 HVEC/H.264 解码器的开源实现（但请注意许可证和条款，尤其是对于 H.264），或使用部分软件，例如（可链接的）ffmpeg .

我对任何非便携式解决方案都感兴趣

在这种情况下，您可能想要考虑构建一个Web 扩展（又名浏览器扩展），它可以使用消息传递与本机应用程序交互（在这种情况下，后者可能是 ffmpeg，或者可以直接处理流的程序）。

当然，这将如何工作取决于您使用的协议等等。

根据有限的范围/描述，只是我的 2 美分。

Answer 2

这个问题的解决方案是WebRTC。可以集成外部编码器或使用嵌入式编码器。在浏览器中，WebRTC 客户端使用 H/W 解码。WebRTC 还提供实时流功能。兼容性还不错。

Answer 3

经过长期研究，在使用媒体源扩展 (MSE) 的 Android 浏览器上使用硬件解码器解码 h264 HLS TS 段流是可能的。由于 iOS 不支持 MSE，让它在 iOS 的 Safari 上运行似乎遇到了障碍，因为 Apple 不允许通过 FIFO 缓冲区或回调访问硬件解码器。鉴于 Apple 对 WebRTC 的支持，似乎在 iOS 中获取硬件解码器的唯一方法等同于“接收视频通话”流程，除了输入必须是远程 http 流并且输出必须转到画布。