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通常也不会更快。

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

1 个答案: