Impossible de diffuser de la vidéo sur un WebSocket à Firefox

J'ai écrit de la vidéo de flux de code sur un WebSocket donc un sourcebuffer qui fonctionne dans Chrome et Edge.Impossible de diffuser de la vidéo sur un WebSocket à Firefox

Cependant, quand je lance ceci dans Firefox, la vidéo ne joue jamais, juste une animation de roue tournante est affichée. Lorsque je vérifie les statistiques <video>, il lit HAVE_METADATA comme état prêt et NETWORK_LOADING comme état du réseau.

Le code semble suit:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"/> 
    </head> 
    <body> 
    <video controls></video> 
    <script> 
     var mime = 'video/mp4; codecs="avc1.4D401E,mp4a.40.2"'; 
     var address = 'ws://localhost:54132' 

     /* Media Source */ 

     var source = new MediaSource(); 
     var video = document.querySelector('video'); 
     video.src = URL.createObjectURL(source); 
     source.addEventListener('sourceopen', sourceOpen); 

     /* Buffer */ 

     var buffer; 
     var socket; 
     var queue = []; 
     var offset = -1; 
     var timescale; 

     // When the media source opens: 
     function sourceOpen() { 
     buffer = source.addSourceBuffer(mime); 
     buffer.addEventListener('updateend', processQueue); 

     socket = new WebSocket(address); 
     socket.binaryType = 'arraybuffer'; 
     socket.onmessage = onMessage; 
     } 

     // When more data is received. 
     function onMessage(event) { 
     queue.push(event.data); 
     processQueue(); 
     } 

     // Process queue if possible. 
     function processQueue() { 
     if ((queue.length == 0) || (buffer.updating)) { 
      return; 
     } 

     var data = queue.shift(); 
     if (offset === -1) { 
      var parsed = parseMP4(data); 
      if (parsed.hasOwnProperty('moov')) { 
      timescale = parsed.moov.mvhd.timescale; 
      } else if (parsed.hasOwnProperty('moof')) { 
      offset = 0 - (parsed.moof.traf[0].tfdt.baseMediaDecodeTime/this.timescale - 0.4); 
      buffer.timestampOffset = offset; 
      } 
     } 

     // console.log('appending ' + data.byteLength + ' bytes'); 
     buffer.appendBuffer(data); 
     } 

     // Parse out the offset. 
     function parseMP4(data) { 
     // SNIP for brevity 
     } 
    </script> 
    </body> 
</html>

Source

2016-06-28 Hans

vous obtenez événement d'erreur sur l'élément vidéo ou tampon source? que se passe-t-il lorsque vous utilisez directement l'URL de la vidéo en tant que "src" (sans média) – sbr

Aucun événement d'erreur. Les données sont générées à la volée par le serveur (à partir d'un flux IP par exemple), il n'y a donc pas d'URL vers laquelle je puisse pointer l'élément vidéo. – Hans

Pouvez-vous créer un plnkr http://plnkr.co pour démontrer? – guest271314

Impossible de reproduire élément <video> ne joue pas à 47. Firefox

approches à Mocking Websocket Message Events pour fusionnées créer WebSocket simulacres événements; bufferAll.html démonstration à Let's Make a Netflix An Intro to Streaming Media on the Web pour MediaSource modèle d'utilisation.

Inclus <progress> et progress événement pour informer l'utilisateur de l'état de chargement du support.

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"/> 
 
    </head> 
 
    <body> 
 
    <progress min="0" value="0"></progress><br><label></label><br> 
 
    <video controls></video> 
 
    <script> 
 
     // http://nickdesaulniers.github.io/netfix/demo/bufferAll.html 
 
     // http://jsfiddle.net/adamboduch/JVfkt/ 
 
     // The global web socket.  
 
     var sock, sourceBuffer; 
 
     sock = new WebSocket("ws://mock"); 
 
     sock.onerror = function(e) { 
 
      console.log("sock error", e) 
 
     } 
 
     // This is unchanging production code that doesn"t know 
 
     // we"re mocking the web socket. 
 
     sock.onmessage = function(e) { 
 
      console.log("socket message", e.data); 
 
      sourceBuffer.appendBuffer(e.data); 
 
     }; 
 
     var video = document.querySelector("video"); 
 
     var progress = document.querySelector("progress"); 
 
     var label = document.querySelector("label"); 
 
     var assetURL = "http://nickdesaulniers.github.io/netfix/" 
 
        + "demo/frag_bunny.mp4"; 
 
     // Need to be specific for Blink regarding codecs 
 
     // ./mp4info frag_bunny.mp4 | grep Codec 
 
     var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; 
 

 
     if ("MediaSource" in window 
 
      && MediaSource.isTypeSupported(mimeCodec)) { 
 
     var mediaSource = new MediaSource; 
 
     //console.log(mediaSource.readyState); // closed 
 
     video.src = URL.createObjectURL(mediaSource); 
 
     mediaSource.addEventListener("sourceopen", sourceOpen); 
 
     } else { 
 
     console.error("Unsupported MIME type or codec: ", mimeCodec); 
 
     } 
 
     video.addEventListener("canplay", function() { 
 
     alert("video canplay") 
 
     }) 
 
     function sourceOpen (_) { 
 
     //console.log(this.readyState); // open 
 
     var mediaSource = this; 
 
     sourceBuffer = mediaSource.addSourceBuffer(mimeCodec); 
 
     fetchAB(assetURL, function (buf) { 
 
      sourceBuffer.addEventListener("updateend", function (event) { 
 
      console.log("sourceBuffer updateend event;" 
 
         + "mediaSource.readyState:" 
 
        , mediaSource.readyState); 
 
      // mediaSource.endOfStream(); 
 
      // video.play(); 
 
      // console.log(mediaSource.readyState); // ended 
 
      }); 
 
      
 
     }); 
 
     }; 
 
     // mock `WebSocket` message 
 
     function fetchAB (url, cb) { 
 
     var xhr = new XMLHttpRequest; 
 
     xhr.open("get", url); 
 
     var file = url.split("/").pop(); 
 
     xhr.responseType = "arraybuffer"; 
 
     xhr.onload = function() { 
 
      // mock `WebSocket` message 
 
      sock.dispatchEvent(new MessageEvent("message", { 
 
      data: xhr.response 
 
     })); 
 
     console.log("video sent to sock", sock); 
 
     cb(); 
 
     }; 
 
     xhr.onprogress = function(e) { 
 
      progress.max = e.total; 
 
      progress.value = e.loaded; 
 
      label.innerHTML = "loading " + file + " ...<br>" 
 
          + e.loaded + " of " 
 
          + e.total + " bytes loaded"; 
 
     } 
 
     xhr.send(); 
 
     }; 
 
    </script> 
 
    </body> 
 
    </html>

plnkr http://plnkr.co/edit/RCIqDXTB2BL3lec9bhfz

Source

2016-07-02 18:11:14 guest271314

Après une minute sur Firefox 47, je reçois un cercle tournant et rien ne se passe après cela. – ManoDestra

Et ne fonctionne pas du tout pour moi sur IE ou Chrome. Impair. – ManoDestra

@ManoDestra _ "Après une minute sur Firefox 47, je reçois un cercle tournant et rien ne se passe après cela." _ Avez-vous appuyé sur play sur les commandes vidéo? Impossible de reproduire cet effet, ici, à firefox 47. 'alert()' est appelé; la vidéo joue pour la longueur complète de «1: 00». Des erreurs sont-elles enregistrées sur 'console'? Ne croyez pas que chrome supporte le codec spécifique à Question 'var mime = 'video/mp4; codecs = "avc1.4D401E, mp4a.40.2" '; '; avez-vous vérifié 'console' à plnkr au chrome? Pas certain à propos de. Remarque, question réelle est spécifiquement adresser problème à firefox _ "Impossible de diffuser la vidéo sur un websocket à Firefox" _ – guest271314

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"/> 
    </head> 
    <body> 
    <progress min="0" value="0"></progress><br><label></label><br> 
    <video controls></video> 
    <script> 
     // http://nickdesaulniers.github.io/netfix/demo/bufferAll.html 
     // http://jsfiddle.net/adamboduch/JVfkt/ 
     // The global web socket.  
     var sock, sourceBuffer; 
     sock = new WebSocket("ws://mock"); 
     sock.onerror = function(e) { 
      console.log("sock error", e) 
     } 
     // This is unchanging production code that doesn"t know 
     // we"re mocking the web socket. 
     sock.onmessage = function(e) { 
      console.log("socket message", e.data); 
      sourceBuffer.appendBuffer(e.data); 
     }; 
     var video = document.querySelector("video"); 
     var progress = document.querySelector("progress"); 
     var label = document.querySelector("label"); 
     var assetURL = "http://nickdesaulniers.github.io/netfix/" 
        + "demo/frag_bunny.mp4"; 
     // Need to be specific for Blink regarding codecs 
     // ./mp4info frag_bunny.mp4 | grep Codec 
     var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; 

     if ("MediaSource" in window 
      && MediaSource.isTypeSupported(mimeCodec)) { 
     var mediaSource = new MediaSource; 
     //console.log(mediaSource.readyState); // closed 
     video.src = URL.createObjectURL(mediaSource); 
     mediaSource.addEventListener("sourceopen", sourceOpen); 
     } else { 
     console.error("Unsupported MIME type or codec: ", mimeCodec); 
     } 
     video.addEventListener("canplay", function() { 
     alert("video canplay") 
     }) 
     function sourceOpen (_) { 
     //console.log(this.readyState); // open 
     var mediaSource = this; 
     sourceBuffer = mediaSource.addSourceBuffer(mimeCodec); 
     fetchAB(assetURL, function (buf) { 
      sourceBuffer.addEventListener("updateend", function (event) { 
      console.log("sourceBuffer updateend event;" 
         + "mediaSource.readyState:" 
        , mediaSource.readyState); 
      // mediaSource.endOfStream(); 
      // video.play(); 
      // console.log(mediaSource.readyState); // ended 
      }); 

     }); 
     }; 
     // mock `WebSocket` message 
     function fetchAB (url, cb) { 
     var xhr = new XMLHttpRequest; 
     xhr.open("get", url); 
     var file = url.split("/").pop(); 
     xhr.responseType = "arraybuffer"; 
     xhr.onload = function() { 
      // mock `WebSocket` message 
      sock.dispatchEvent(new MessageEvent("message", { 
      data: xhr.response 
     })); 
     console.log("video sent to sock", sock); 
     cb(); 
     }; 
     xhr.onprogress = function(e) { 
      progress.max = e.total; 
      progress.value = e.loaded; 
      label.innerHTML = "loading " + file + " ...<br>" 
          + e.loaded + " of " 
          + e.total + " bytes loaded"; 
     } 
     xhr.send(); 
     }; 
    </script> 
    </body> 
    </html>

Source

2016-07-07 15:12:06 John

Avez-vous littéralement copié le code de la réponse précédente? – Hans

Impossible de diffuser de la vidéo sur un WebSocket à Firefox

Répondre

Questions connexes