如何访问 HTML5 视频解码功能?

how to access HTML5 video decoding functionality?

HTML5 有 <video/> 元素从服务器下载视频,解码并呈现。他们通常(如果不总是)使用硬件加速解码(如果可用)。

是否可以只访问解码功能?原因是我正在使用自定义流媒体协议,因此在客户端我有需要解码和渲染的编码视频流。

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

Is it possible to access just decoding functionality?

很遗憾没有。我们只能访问高级 API 处理 stream/source 文件,不可知性地影响有限,例如基于时间的位置、播放状态和各种事件。我们可以从当前解码帧将帧绘制为 canvas 作为原始 RGB(A),但仅此而已。

The reason is that I'm using custom streaming protocol and so on client side I have encoded video stream that I need to decode and render

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

Pure JavaScript implementations of video decoder are not applicable unfortunately as they cannot provide sufficient performance.

这不一定是真的。例如,纯 JS 实现实时解码 MPEG1 流,包括音频和视频,例如可用的 this and this. Of course, this works on the very limit of what most browsers can do at present time. There is also an emscripten based H-264 解码器似乎也通过 WebGL 使用 GPU,但我不能说它的性能 - 它可能不过,作为下一段的良好起点:

更好的选择是查看 WebAssembly which can run pre-compiled binary code from for example C/C++ source-code. This allows you to use open-source implementations of HVEC/H.264 decoders running at native speed in the browser (careful with the licenses and terms though, especially for H.264), or use parts of software such as (linkable) ffmpeg

I'm interested in any even non-portable solution

在这种情况下,您可能想考虑构建一个 web-extension (aka browser extensions) which can use messaging to interact with native application(在这种情况下后者可能是 ffmpeg,或者可以直接处理流的程序)。

具体如何工作当然取决于您使用的协议等。

根据有限的 scope/description.

我的 2 美分

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

经过长期研究,可以在使用媒体源扩展 (MSE) 的 Android 浏览器上使用硬件解码器解码 h264 HLS TS 片段流。由于 iOS 不支持 MSE,因此在 iOS 中让它在 Safari 上运行似乎遇到了障碍,因为 Apple 不允许通过 FIFO 缓冲区或回调访问硬件解码器。鉴于 Apple 对 WebRTC 的支持,似乎是在 iOS 中访问硬件解码器的唯一方法将等同于 "receiving a video call" 流程,除了输入必须是远程 http 流并且输出必须转到 canvas.