Question

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

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

从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: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.。看起来MediaSource在调用buffer.appendData()后立即关闭。

任何方式优雅地做到这一点？

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

Answer 1

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

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

需要在if (buffer.updating || queue.length > 0)中添加websocket.onmessage。
还需要在if (queue.length > 0 && !buffer.updating)中添加buffer.addEventListener('update', ...)。

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

Answer 2

对于SourceBuffer编解码器，Chrome令人难以置信。更糟糕的是，与OP一样，它将返回无用且具有误导性的错误消息。

在调用buffer.appendData()
之后，MediaSource似乎即将关闭

确实是这样：Chrome对视频不满意，因为它不完全符合自己的喜好，并且只是简单地关闭了源缓冲区，恕不另行通知。< / p>

可能寻找的解决方案：

使用ffmpeg对MP4文件进行转码，here解释说（标题 Fragmenting ）。
使用mp4v2的mp4文件来查找确切的MP4编解码器，here和here对此进行了解释。
如果您没有音频，请省略音频编解码器部分：例如'video/mp4; codecs="avc1.64001F"'而非'video/mp4; codecs="avc1.64001F, mp4a.40.2"'。

MediaSource错误：此SourceBuffer已从父媒体源中删除

2 个答案: