通过 MediaSource 和 MediaSourceBuffer 来自 websocket 的 HTML5 视频流

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，因为你正在做你帖子中没有说明的实时视频流，但如果是的话，你最好创建一个画布来复制流并做一些@ 987654325@ 可以将您的视频流捕获为您可以传输的东西的东西。

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

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

一般情况下，其他开发人员会建议您只采用 WebRTC 路线，但根据我的经验，WebRTC 通常也不会更快。