javascript - extensions - Error de MediaSource: este SourceBuffer se ha eliminado del origen de medios principal

hls js

Question

Estoy experimentando con la nueva API MediaSource disponible en Chrome.

Estoy tratando de agregar datos binarios sobre la marcha de un WebSocket a la fuente de medios de video.

Comenzando con el ejemplo en https://html5-demos.appspot.com/static/media-source.html , mi código es actualmente:

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

Recibo constantemente el mensaje de error: InvalidStateError: Failed to execute ''appendBuffer'' on ''SourceBuffer'': This SourceBuffer has been removed from the parent media source. después de unir Parece que el MediaSource se está cerrando inmediatamente después de la llamada a buffer.appendData() .

¿Alguna forma de hacerlo con elegancia?

Nota: chrome: // media-internals / no devuelve ninguna información útil.

Answer 1

En última instancia, el problema fue que estaba enviando el video h264 a través de la websocket. La API MediaSource solo admite MPEG-DASH y VP8 con segmentos de fotogramas clave actualmente (en Chrome 35).

Además, una vez que probé VP8, vi que estaba agregando algunos marcos fuera de orden.

• Se if (buffer.updating || queue.length > 0) agregar if (buffer.updating || queue.length > 0) en websocket.onmessage .
• Agregar if (queue.length > 0 && !buffer.updating) en buffer.addEventListener(''update'', ...) también fue necesario.

Nota: apliqué las ediciones mencionadas aquí al código de la pregunta, por lo que el único problema con el código de la pregunta es que el códec es incorrecto.