对于录制音频和视频,我下创建WebM文件ondataavailable的MediaRecorder 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 文件,这样我就可以在这些文件中的集群之前添加标头信息?
编辑 …
使用 NodeJS 中的以下代码,我可以播放服务器提供的 webm 文件:
app.get('/video', function(req, res){
res.writeHead(200,{
'Connection': 'close',
'Cache-Control': 'private',
'Content-Type': 'video/webm'
});
console.log('Http client connected: Streaming!');
var readStream = fs.createReadStream('./small.webm');
readStream.pipe(res);
});
Run Code Online (Sandbox Code Playgroud)
现在我想直接从 getUserMedia() API 获取 WebM。所以我在 Socket.IO 中使用了 MediaRecorder:
// Client
var mediaRecorder = new MediaRecorder(stream, options);
// ...
mediaRecorder.ondataavailable = function(e) {
console.log('Data', e.data);
chunks.push(e.data);
socket.emit('data', e.data);
}
// Server
app.get('/video', function(req, res){
res.writeHead(200,{
"Content-Type": "video/webm",
'Transfer-Encoding': 'chunked'
});
// Add the response to the clients array to receive streaming
clients.push(res);
console.log('Http client connected: …Run Code Online (Sandbox Code Playgroud)