HTML5 WebM使用来自FFMPEG的块通过Socket.IO进行流式传输

Question

我试图利用websockets从WebM流中直播块。以下是我拼凑在一起的服务器端的一些示例代码：

const command = ffmpeg()
  .input('/dev/video0')
  .fps(24)
  .audioCodec('libvorbis')
  .videoCodec('libvpx')
  .outputFormat('webm')

const ffstream = command.pipe()
ffstream.on('data', chunk => {
  io.sockets.emit('Webcam', chunk)
})

我有以这种方式构建的服务器代码，因此ffstream.on('data', ...)也可以写入文件。我可以打开文件并在本地查看视频，但很难使用块在DOM中的<video>标记中进行渲染。

const ms = new MediaSource()
const video = document.querySelector('#video')
video.src = window.URL.createObjectURL(ms)
ms.addEventListener('sourceopen', function () {
  const sourceBuffer = ms.addSourceBuffer('video/webm; codecs="vorbis,vp8"')
  // read socket
  // ...sourceBuffer.appendBuffer(data)
})

我的客户端有上述内容。我可以从我的服务器收到完全相同的块，但sourceBuffer.appendBuffer(data)给我发出以下错误： Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source。

问题：如何在HTML5视频代码中显示这些块？

注意：从我的阅读中，我认为这与获取关键帧有关。我虽然无法确定如何识别这些内容。