标签: ebml

如何单独播放由 MediaRecorder 创建的 WEBM 文件

对于录制音频和视频,我下创建WebM文件ondataavailableMediaRecorder API。我必须单独播放每个创建的 webm 文件。

Mediarecorder api 仅将标头信息插入到第一个块(webm 文件)中,因此其余块在没有标头信息的情况下不会单独播放。

作为建议的链接 1链接 2,我从第一个块中提取了标头信息,

// for the most regular webm files, the header information exists
// between 0 to 189 Uint8 array elements

const headerIinformation = arrayBufferFirstChunk.slice(0, 189); 
Run Code Online (Sandbox Code Playgroud)

并将这个header信息附加到第二个chunk中,第二个chunk还是不能播放,但是这次浏览器显示的是视频的海报(单帧)和两个chunk之和的时长,例如:10秒;每个块的持续时间为 5 秒。

我用十六进制编辑器做的同样的标题信息事情。我在编辑器中打开了 webm 文件,从第一个 webm 文件中复制了前 190 个元素并将其放入第二个文件中,如下图所示,即使这次,第二个 webm 文件也无法播放,结果与前面的示例相同。

红色显示标题信息:

网络十六进制

这次我从第一个 webm 文件中复制了标题和集群信息并将其放入第二个文件中,如下图所示,但没有成功,

网络十六进制

问题

我在这里做错了什么?

有什么办法可以单独播放 webm 文件/块吗?

注意:我不能使用MediaSource来播放这些块。

编辑 1

正如@Brad 建议的那样,我想将第一个集群之前的所有内容插入到后面的集群中。我有几个 webm 文件,每个文件的持续时间为 5 秒。深入研究文件后,我才知道,几乎每个备用文件都没有聚集点(没有 0x1F43B675)。

在这里我很困惑,我必须在每个文件的开头或每个第一个集群的开头插入头信息(初始化数据)?如果我选择稍后的选项,那么没有任何集群的webm文件将如何播放?

或者,首先我需要以一种一开始就具有集群的方式制作每个 webm 文件,这样我就可以在这些文件中的集群之前添加标头信息?

编辑 …

javascript matroska webm web-mediarecorder ebml

8
推荐指数
1
解决办法
1247
查看次数

无法使用 EBML.js 从媒体记录器创建可搜索的视频 blob - MediaRecorder API - Chrome

使用媒体记录器,我可以在 azure 上上传和附加视频 blob。但使用以下代码下载时无法搜索组合视频 -

var chunks =[];
var mediaRecorder = new MediaRecorder(stream, 'video/x-matroska;codecs=vp8,opus');
mediaRecorder.ondataavailable = function(event) {
  if(event.data && event.data.size > 0) {
       chunks.push(event.data);
       appendBlockToAzure(chunks);
    }
};
mediaRecorder.start(10000);
Run Code Online (Sandbox Code Playgroud)

我尝试使用 EBML.js,如果我使用以下代码,那么我会得到可查找的视频文件。这种方法需要在最后处理文件。因此,最终文件的大小可能为 1GB,这将需要很长时间才能上传。

var chunks =[];
var mediaRecorder = new MediaRecorder(stream, 'video/x-matroska;codecs=vp8,opus');
mediaRecorder.ondataavailable = function(event) {
   if(event.data && event.data.size > 0) {
        chunks.push(event.data);
        if(mediaRecorder.state == "inactive") { //if media recorder is stopped
            var combined = new Blob(chunks, { type: event.data.type });
            getSeekableBlob(combined, function (seekableBlob) {
                   saveCombinedVideoToAzure(seekableBlob);  
            });
        }
    }
 };
mediaRecorder.start(10000); …
Run Code Online (Sandbox Code Playgroud)

javascript google-chrome webrtc web-mediarecorder ebml

7
推荐指数
1
解决办法
3602
查看次数