第一次后附加到 SourceBuffer 的 MediaSource 不起作用

Posted 2023-02-25

【中文标题】第一次后附加到 SourceBuffer 的 MediaSource 不起作用

【英文标题】：MediaSource appending to SourceBuffer does not work after the first time

【发布时间】：2016-03-07 03:24:30

【问题描述】：

我目前正在尝试通过 socket.io 将 .webm 视频文件流式传输到我的客户端（当前使用 Chrome 作为客户端）。

将第一个 Uint8Array 附加到 SourceBuffer 可以正常工作，但附加更多的则不起作用并引发以下错误： Uncaught DOMException: Failed to execute 'appendBuffer' on 'SourceBuffer': The htmlMediaElement.error attribute is not null.

我当前的代码：

'use strict';

let socket = io.connect('http://localhost:1337');

let mediaSource = new MediaSource();
let video = document.getElementById("player");
let queue = [];
let sourceBuffer;

video.src = window.URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', function() 
    sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');

    socket.on("video", function(data) 
        let uIntArray = new Uint8Array(data);

        if (!sourceBuffer.updating) 
            sourceBuffer.appendBuffer(uIntArray);
         else 
            queue.push(data);
        
    );
);

服务器端代码（sn-p）

io.on('connection', function(socket) 
            console.log("Client connected");

            let readStream = fs.createReadStream("bunny.webm");
            readStream.addListener('data', function(data) 
                socket.emit('video', data);
            );
        );

我还删除了 webkit 检查，因为它只会在 Chromium 浏览器上运行。

【问题讨论】：

您也可以发布您的服务器代码吗？这将使设置和测试变得更容易

当然，我认为服务器代码是不必要的，因为它对我来说看起来像是客户端错误，但你是对的，它可以提供帮助。

我这边没有错误。可能是文件本身的问题。由于您使用的是“bunny.webm”文件并且this post 与从webmfiles.org/demo-files 下载的文件有类似的问题...您是否已经尝试重新格式化文件或其他文件？

是的，试过几次。但很高兴听到这个消息。稍后我会尝试一些不同的文件。

你能把你正在使用的文件发给我吗？我只得到视频的第一帧/块，然后是Failed to appendBuffer 错误。

【参考方案1】：

我认为你必须释放缓冲区，请参阅 remove() 函数 http://w3c.github.io/media-source/#widl-SourceBuffer-remove-void-double-start-unrestricted-double-end

如果有帮助，请告诉我。

【讨论】：

我尝试在第一个 appendBuffer 之后调用此方法，但我收到了 InvalidAccessError 错误，因为 mediaSource.duration 是 NaN - developer.mozilla.org/en-US/docs/Web/API/SourceBuffer/remove

我认为您可能必须自己设置此持续时间：developer.mozilla.org/en-US/docs/Web/API/MediaSource/duration

我什么时候应该调用删除？我通过控制台调用它，但仍然无法添加新块。

你能得到第一个块的时间戳吗？基本上我会采用这些时间戳，推断并设置媒体持续时间，然后调用 remove(start,end);在每个 socketio 事件之后

你的意思是 UNIX 时间戳吗？并且调用 remove 会将视频从播放器中删除，因此这将使视频最终无法播放。删除适用于持续时间而不是时间戳。 （我可能误会你了，对不起）