Поток видео HTML5 из ​​веб-сокета через MediaSource и MediaSourceBuffer

Я пытаюсь воспроизвести видео из веб-сокета

<video id="output" width="320" height="240" autoplay></video>

<script>
    function sockets(buffer) {
        const socket = new WebSocket('wss://localhost:5002/ws')

        socket.onmessage = async function (event) {
            // event.data is a blob
            buffer.appendBuffer(new Uint8Array(event.data))
        }
    }

    let ms = new MediaSource()
    let output = document.getElementById('output')
    output.src = URL.createObjectURL(ms)
    ms.onsourceopen = () => {
        let buffer = ms.addSourceBuffer('video/webm; codecs="vorbis,vp8"')
        sockets(buffer)
    }
</script>

Я получаю здесь фрагменты MediaRecorder как Blobs и пытаюсь последовательно воспроизвести их с помощью MediaSource API. Ошибок нет и ничего не происходит. Что-то здесь не так?

Я пытался:

• Использовать разные кодеки
• Воспроизведение с режимами источника мультимедиа, например, последовательность / сегменты
• Я также пробовал разные способы, когда вы не используете MediaSource API, но сталкиваетесь с другими проблемами, и MediaSource кажется лучшим подходом в моем случае.

ОБНОВЛЕНИЕ: вот как создается видео:

let options = { mimeType: 'video/webm;codecs=vp8' }
let stream = await navigator.mediaDevices.getUserMedia({ video: true })
mediaRecorder = new MediaRecorder(stream, options)
mediaRecorder.ondataavailable = event => {
    if (event.data && event.data.size > 0) {
        send(event.data)
    }
}