MediaSource错误：此SourceBuffer已从父媒体源中删除 [英] MediaSource error: This SourceBuffer has been removed from the parent media source

问题描述

我正在尝试Chrome中提供的新MediaSource API。

I'm experimenting with the new MediaSource API available in Chrome.

我正在尝试将二进制数据从WebSocket动态附加到视频媒体源。

I'm trying to append binary data on the fly from a WebSocket to the video media source.

从 https：/的示例开始/html5-demos.appspot.com/static/media-source.html ，我的代码目前是：

var websocket = new WebSocket('ws://localhost:8080');
websocket.binaryType = 'arraybuffer';

var mediaSource = new MediaSource();
var buffer;
var queue = [];

var video = $('.video')[0];
video.src = window.URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', function(e) {
  video.play();

  buffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001E"');

  buffer.addEventListener('updatestart', function(e) { console.log('updatestart: ' + mediaSource.readyState); });
  buffer.addEventListener('update', function(e) { console.log('update: ' + mediaSource.readyState); });
  buffer.addEventListener('updateend', function(e) { console.log('updateend: ' + mediaSource.readyState); });
  buffer.addEventListener('error', function(e) { console.log('error: ' + mediaSource.readyState); });
  buffer.addEventListener('abort', function(e) { console.log('abort: ' + mediaSource.readyState); });

  buffer.addEventListener('update', function() { // Note: Have tried 'updateend'
    if (queue.length > 0 && !buffer.updating) {
      buffer.appendBuffer(queue.shift());
    }
  });
}, false);

mediaSource.addEventListener('sourceopen', function(e) { console.log('sourceopen: ' + mediaSource.readyState); });
mediaSource.addEventListener('sourceended', function(e) { console.log('sourceended: ' + mediaSource.readyState); });
mediaSource.addEventListener('sourceclose', function(e) { console.log('sourceclose: ' + mediaSource.readyState); });
mediaSource.addEventListener('error', function(e) { console.log('error: ' + mediaSource.readyState); });

websocket.addEventListener('message', function(e) {
  if (typeof e.data !== 'string') {
    if (buffer.updating || queue.length > 0) {
      queue.push(e.data);
    } else {
      buffer.appendBuffer(e.data);
    }
  }
}, false);

我一直收到错误消息： InvalidStateError：无法执行'appendBuffer'在'SourceBuffer'上：在一次追加后，此SourceBuffer已从父媒体源中删除。。看起来MediaSource在调用 buffer.appendData（）后立即关闭。

I consistently get the error message: InvalidStateError: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source. after one append. It looks like the MediaSource is closing immediately after the call to buffer.appendData().

任何方法优雅吗？

注意：chrome：// media-internals /不会返回任何有用的信息。

Note: chrome://media-internals/ doesn't return any useful information.

推荐答案

最终问题是我在websocket上发送h264视频。 MediaSource API目前仅支持带有关键帧的MPEG-DASH和VP8（在Chrome 35上）。

Ultimately the issue was that I was sending h264 video down the websocket. The MediaSource API only supports MPEG-DASH and VP8 with keyframed segments currently (on Chrome 35).

此外，一旦我尝试了VP8，我看到我正在添加一些帧无序。

Additionally, once I tried VP8, I saw that I was adding some frames out of order.

• 添加 if（buffer.updating || queue.length> 0） in websocket.onmessage 。


• 添加 if（queue.length> 0） &&！buffer.updating） in buffer.addEventListener（'update'，...）也是必需的。

• Adding if (buffer.updating || queue.length > 0) in websocket.onmessage was required.
• Adding if (queue.length > 0 && !buffer.updating) in buffer.addEventListener('update', ...) was also required.

注意：我将此处提到的编辑应用于问题中的代码，因此唯一的问题是问题是编解码器是错误的

Note: I applied the edits mentioned here to the code in the question, so the only issue with the code in the question is that the codec is wrong

这篇关于MediaSource错误：此SourceBuffer已从父媒体源中删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！