[HTML5通过MediaSource和MediaSourceBuffer从websocket发送的视频流

Question

我正在尝试从websocket播放视频

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

我在这里以Blob的形式接收MediaRecorder块，并尝试使用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)
    }
}

Answer 1

这里的根本问题是，您无法流式传输从MediaRecorder中传出的数据，并期望另一端播放它；这不是完整的视频。它只有在接收端能够接收初始化字节的情况下才能工作-我怀疑这是否可以在现实世界中使用。

[您所要做的是创建一个间隔，例如每1秒启动/停止MediaRecorder，以制作1秒的视频块，您可以通过网络传输该视频块（据我所知并测试的是websockets）

[我强烈建议您不要使用MediaRecorder，因为您正在进行实时视频流传输，但您的帖子中并未对此进行说明，但是如果是，最好创建一个画布来复制流并执行一些requestAnimationFrame ]素材，可以将视频流捕获为可以传输的内容。

看这个演示以供参考：https://github.com/cyberquarks/quarkus-websockets-streamer/blob/master/src/main/resources/META-INF/resources/index.html

MediaRecorder在我的经验中，响应被延迟，通常会在视频中添加相当大的延迟，更不用说套接字也会引入的延迟了。

[通常，其他开发人员会建议您选择WebRTC路线，但是根据我的经验，WebRTC通常也不会更快。