如何单独播放由MediaRecorder创建的WEBM文件 [英] How to play WEBM files individually which are created by MediaRecorder
问题描述
For recording audio and video, I am creating webm files under the ondataavailable of MediaRecorder API. I have to play each created webm file individually.
Mediarecorder api仅将标头信息插入第一个块(webm文件)，因此，没有标头信息，其余的块就不会单独播放.
Mediarecorder api inserts header information into first chunk (webm file) only, so rest of the chunks do not play individually without the header information.
如建议的链接1 和
As suggested link 1 and link 2, I have extracted the header information from first chunk,
// for the most regular webm files, the header information exists
// between 0 to 189 Uint8 array elements
const headerIinformation = arrayBufferFirstChunk.slice(0, 189);
将此标头信息附加到第二块中，仍然不能播放第二块，但是这次浏览器正在显示视频的海报(单帧)和两个块的总和持续时间，例如:10秒；每个块的持续时间为5秒.
and perpended this header information into second chunk, still the second chunk could not play, but this time the browser is showing poster (single frame) of video and duration of sum of two chunks, eg:10 seconds; duration of each chunk is 5 second.
与十六进制编辑器完成的标题信息相同.我在编辑器中打开了webm文件，并将第一个webm文件中的前190个元素复制到了第二个文件中，如下图所示，即使这次，第二个webm文件也无法播放，结果与前面的示例相同.
The same header-information thing I have done with the hex editor. I opened the webm file in editor and copied the first 190 elements from first webm file and put this into second file, something like below image, even this time, the second webm file could not play and the result was same as in previous example.
红色显示标题信息:
这次，我将第一个webm文件的标头和集群信息复制到第二个文件中，如下图所示，但没有成功
This time I copied the header and cluster information from first webm file placed this into second file, something like below image, but did not get success,
问题
我在这里做错了什么?
有什么方法可以单独播放webm文件/块吗?
Is there any way that we can play the webm files/chunks individually ?
注意:我不能使用 MediaSource 播放这些大块.
Note: I can't use the MediaSource to play those chunks.
编辑1
正如@Brad所建议的，我想将所有内容插入第一个群集之前的内容，再插入到后面的群集中.我有几个webm文件，每个文件的持续时间为5秒.深入研究文件后，我知道几乎每个备用文件都没有聚类点(没有0x1F43B675).
As @Brad suggested, I want to insert all the content before the first cluster to a later a cluster. I have few webm files that each has duration of 5 seconds. After digging into the files, I came to know, almost every alternate file hasn't cluster point (no 0x1F43B675).
我很困惑，我必须在每个文件的开头或每个第一个群集的开头插入标头信息(初始化数据)吗?如果我选择一个更高的选项，那么如何播放没有任何群集的webm文件?
Here I am confused that I'll have to insert header information (initialization data) at the beginning of every file or beginning of every first cluster? If I choose a later option, then how's going to play the webm file that doesn't have any cluster ?
或者，首先我需要使每个webm文件在开始时就具有聚类的方式，这样我就可以在这些文件中的聚类之前添加标头信息?
Or, first I need to make each webm file in a way that it has cluster at very beginning, so I can prepend the header information before cluster in those files?
编辑2
经过一些挖掘和阅读此之后，我想到了每个webm文件需要标头信息，群集和实际数据.
After some digging and reading this , I came up with the conculsion that each webm file needs header info, cluster and actual data.
推荐答案
//对于大多数常规的webm文件，标头信息存在
// for the most regular webm files, the header information exists
//在0到189个Uint8数组元素之间
// between 0 to 189 Uint8 array elements
很难看到实际的文件数据，但这可能是错误的.该报头信息"包括在表1中.必须是第一个群集元素之前的所有内容.也就是说，您希望保留从文件开头到看到0x1F43B675之前的所有数据，并将其视为初始化数据.每个文件可能/将有所不同.在我的测试文件中，这种情况发生在1 KB英寸之后.
Without seeing the actual file data it's hard to say, but this is possibly wrong. The "header information" needs to be everything up to the first Cluster element. That is, you want to keep all data from the start of the file up to before you see 0x1F43B675 and treat it as initialization data. This can/will vary from file to file. In my test file, this occurs a little after 1 KB in.
将此标头信息附加到第二块中，仍然不能播放第二块，但是这次浏览器正在显示视频的海报(单帧)和两个块的总和持续时间，例如:10秒；每个块的持续时间为5秒.
and perpended this header information into second chunk, still the second chunk could not play, but this time the browser is showing poster (single frame) of video and duration of sum of two chunks, eg:10 seconds; duration of each chunk is 5 second.
MediaRecorder输出的块与分段无关，并且可以在不同的时间发生.您实际上可能希望在Cluster元素上进行拆分.这意味着您需要解析此WebM文件，至少要等到群集的标识符0x1F43B675出现时才将其拆分出来.
The chunks output from the MediaRecorder aren't relevant for segmentation, and can occur at various times. You would actually want to split on the Cluster element. That means you need to parse this WebM file, at least to the point of splitting out Clusters when their identifier 0x1F43B675 comes by.
有什么方法可以单独播放webm文件/块吗?
Is there any way that we can play the webm files/chunks individually ?
您走在正确的道路上，只需将第一个Cluster之前的所有内容放在后面的Cluster中即可.
You're on the right path, just prepend everything before the first Cluster to a later Cluster.
一旦完成该工作，您可能会遇到的下一个问题是，您将无法仅使用任何集群来执行此操作.第一个集群必须以关键帧开头，否则浏览器将无法对其进行解码. Chrome一定程度上会跳到下一个群集，但这并不可靠.不幸的是，无法使用MediaRecorder配置关键帧放置.如果您有幸能够处理此视频服务器端，请按照以下方法使用FFmpeg: https://stackoverflow .com/a/45172617/362536
Once you've got that working, the next problem you'll likely hit is that you won't be able to do this with just any cluster. The first Cluster must begin with a keyframe or the browser won't decode it. Chrome will skip over to the next cluster, to a point, but it isn't reliable. Unfortunately, there's no way to configure keyframe placement with MediaRecorder. If you're lucky enough to be able to process this video server-side, here's how to do it with FFmpeg: https://stackoverflow.com/a/45172617/362536
这篇关于如何单独播放由MediaRecorder创建的WEBM文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
