Erreur MediaSource: ce fichier source a été supprimé du fichier source parent.

j'expérimente avec la nouvelle API MediaSource disponible dans Chrome.

j'essaie d'ajouter des données binaires à la volée à partir d'un WebSocket vers la source vidéo.

Partir de l'exemple à https://html5-demos.appspot.com/static/media-source.html mon code:

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

je reçois régulièrement le message d'erreur:InvalidStateError: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source. après un ajout. Il semble que la MediaSource se ferme immédiatement après l'appel à buffer.appendData().

y a-t-il un moyen de faire cela avec élégance?

Remarque: chrome://media-internals/ n'a pas de retour de l'information utile.

24
demandé sur Chris Nolet 2014-06-08 05:02:08

1 réponses

finalement, le problème était que j'envoyais la vidéo h264 sur le web. L'API MediaSource ne prend en charge MPEG-DASH et VP8 que pour les segments keyframed (sur Chrome 35).

de plus, une fois que j'ai essayé VP8, j'ai vu que j'ajoutais des cadres hors service.

  • ajouter if (buffer.updating || queue.length > 0)websocket.onmessage a été nécessaire.
  • ajouter if (queue.length > 0 && !buffer.updating)buffer.addEventListener('update', ...) était aussi nécessaire.

Remarque: j'ai appliqué les modifications mentionnées ici au code dans la question, donc le seul problème avec le code dans la question Est que le codec est faux

8
répondu Chris Nolet 2015-05-28 17:44:09