时间戳

首页 > 解决方案 > 通过 MediaSource 和 MediaSourceBuffer 来自 websocket 的 HTML5 视频流

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

问题描述

我正在尝试从 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 顺序播放它们。没有错误，也没有任何反应。这里有什么根本错误吗？

我试过了：

更新：这是视频的制作方式：

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

标签： javascripthtmlwebsockethttp-live-streamingmedia-source

解决方案

这里的根本问题是你不能流式传输那些数据MediaRecorder并期望另一端播放它；这不是一个完整的视频。只有当接收端能够接收初始化字节时它才会起作用——我怀疑这在现实世界的场景中是否会起作用。

您可以做的是创建一个间隔，MediaRecorder例如每 1 秒开始/停止一次，以制作 1 秒的视频块，您可以通过网络传输（我知道和测试的最好的是 websockets）

我强烈建议不要使用MediaRecorder你正在做的实时视频流，但你的帖子中没有说明，但如果是的话，你最好创建一个画布来复制流并做一些requestAnimationFrame可以捕获你的视频流的东西变成你可以传送的东西。

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

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

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

推荐阅读