HTML5 WebM streaming using chunks from FFMPEG via Socket.IO

Question

I'm trying to make use of websockets to livestream chunks from a WebM stream. The following is some example code on the server side that I have pieced together:

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)
})

I have the server code structured in this manner so ffstream.on('data', ...) can also write to a file. I am able to open the file and view the video locally, but have difficulty using the chunks to render in a <video> tag in the 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)
})

I have something such as the above on my client side. I am able to receive the exact same chunks from my server but the sourceBuffer.appendBuffer(data) is throwing me the following error: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.

Question: How can I display these chunks in an HTML5 video tag?

Note: From my reading, I believe this has to do with getting key-frames. I'm not able to determine how to recognize these though.