![]() |
1
13
你可能会认为“我只有一个流,我真的需要一个容器吗?”但多媒体播放器希望接收到的数据(从文件读取的数据或通过网络传输的数据)是容器格式的。即使你只有一个视频流,你仍然需要将其打包到一个容器中,让他们识别它。 将字节缓冲区连接到一个大的数据块中是不起作用的:
在这里,你试图将所有的块粘在一起,并告诉浏览器将其解释为WebM视频(视频/WebM MIME类型),但它做不到,因为它不是 properly formatted 。这反过来又是错误的根源。为了使其发挥作用,您必须将相关元数据附加到块中(通常格式化为二进制数据的缓冲区,具体格式取决于容器和编解码器的类型),并将其传递给复用器。如果你使用一个设计用于处理原始视频流的复用库(例如,来自WebCodecs API的流),那么它将 可能 为您处理元数据。作为一名程序员,你很可能不需要手动处理这个问题,但是,如果你想了解更多关于整个过程的信息,那么我建议你阅读各种容器格式的元数据(例如,这个答案下面的VC.Ones评论)。
遗憾的是,到目前为止,复用器似乎还不是WebCodecs API的一部分。
Example
在中
official repository
API的使用
在上面的代码中,我们可以看到这个函数需要由程序员提供(原始注释):
Here 是关于向浏览器添加muxing支持的讨论的链接,以及 here 是官方回购跟踪这一功能中的一个问题。到目前为止,您的问题似乎还没有一个内置的解决方案。
要解决此问题,您可以使用第三方库,例如
mux.js
或类似(
here
是他们的“基本用法”示例的链接,可能会对您有所帮助)。可替换地,
this project
声称使用创建WebM容器
我无法为您提供代码示例,因为我自己没有使用过任何提到的库,但我相信,在了解编码器和复用器之间的关系后,您应该能够自己解决问题。 编辑: 我发现 another library 这可能会对你有所帮助。根据他们的自述:
我在网上找到的许多库和源似乎都是基于WASM的,通常用C或其他语言实现,编译成本地机器代码。这可能是由于大型图书馆的存在(首先想到的是 ffmpeg )它们处理各种媒体格式,这就是它们的编写方式。JS库通常被编写为与所述本地代码的绑定,以避免重新发明轮子。此外,我认为性能也可能是一个因素。 免责声明:虽然您在代码示例中使用video/webm作为MIME类型,但您没有明确说明您希望输出的文件格式,所以我允许自己引用一些生成其他格式的库。 编辑2: David Kanal's answer below 提供了可用于复用WebM的库的另一个示例。 |
![]() |
2
5
更新(2023-04-13):为MP4制作多路复用器: https://github.com/Vanilagy/mp4-muxer 更新(2022-11-10):由于我为这个主题找到的库不足以满足我的需求,我创建了自己的库: https://github.com/Vanilagy/webm-muxer 这是一个功能齐全的 WebM复用器 (视频+音频)在纯TypeScript中,不需要庞大的wasm文件。README中详细解释了用法。这个库为我的 browser-based game . 我想我会在这个话题上花两分钱,因为我最近正为OP提到的完全相同的事情而挣扎。 我设法找到了一个渲染和导出WebM文件的解决方案,尽管没有音频。 我在这里找到了W3C的一个官方示例: https://w3c.github.io/webcodecs/samples/capture-to-file/capture-to-file.html . 它会捕获网络摄像头的视频流,并将其保存为磁盘上的.webm文件。深入到代码中,负责获取编码视频块并将其写入(复用)到可播放的WebM的代码是 webm-writer2.js 由于该文件包含在网站中,编写WebM文件所需的操作如下:
然后,只需像往常一样使用
希望这能帮助到别人。 |
![]() |
3
2
喜欢 msaw328 says ,在获取文件之前,您必须向原始编码块blob添加一些特定于格式的字节。但浏览器已经知道如何做到这一点了!问题变成了,我如何告诉浏览器这样做?
嗯,与
因此,我们可以采用的另一种设置是不使用
我仍然不明白的一件事是,为什么我们需要等待下一帧:如果我们不等待,生成的blob是空的,如果我们等待两倍的时间,生成的视频会慢两倍。大概
|