node.js - Socket.IO 経由で FFMPEG からのチャンクを使用した HTML5 WebM ストリーミング

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', ...)、ファイルに書き込むこともできます。ファイルを開いてビデオをローカルで表示することはできますが、チャンクを使用し<video>て DOM のタグでレンダリングするのは困難です。

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 ビデオ タグでこれらのチャンクを表示するにはどうすればよいですか?

注：私の読書から、これはキーフレームの取得に関係していると思います。ただし、これらを認識する方法を判断することはできません。