HTML5 視頻 stream 來自 websocket 通過 MediaSource 和 MediaSourceBuffer

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>

我在這里接收 MediaRecorder 塊作為 Blob，並嘗試使用 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

這里的根本問題是您不能 stream 那些來自MediaRecorder的數據並期望另一端播放它； 這不是一個完整的視頻。 只有在接收端能夠接收初始化字節時它才會起作用——我懷疑這在現實世界的場景中是否會起作用。

您可以做的是創建一個間隔，例如每 1 秒啟動/停止MediaRecorder ，以制作 1 秒的視頻塊，您可以通過網絡傳輸（我知道和測試的最好的是 websockets）

我強烈建議不要使用MediaRecorder ，因為您正在執行帖子中未指明的實時視頻流，但如果是，最好創建一個 canvas 來復制 stream 並做一些可以捕獲您的requestAnimationFrame的東西視頻 stream 變成你可以傳輸的東西。

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

以我的經驗， MediaRecorder響應延遲，這通常會在視頻中增加相當大的延遲，更不用說套接字也會引入的延遲。

通常，其他開發人員會建議您只走 WebRTC 路線，但根據我的經驗，WebRTC 通常也不會更快。