Websocket経由でFirefoxにビデオをストリーミングできない

私はwebsocketでコードストリームビデオをいくつか書いていますので、ChromeとEdgeで動作しますsourcebuffer。Websocket経由でFirefoxにビデオをストリーミングできない

しかし、これをFirefoxで実行すると、動画は再生されず、回転するホイールアニメーションだけが表示されます。 <video>の統計情報を確認すると、準備完了状態としてHAVE_METADATA、ネットワーク状態としてNETWORK_LOADINGが読み込まれます。

コードが見えますが、以下：

<!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>

出典

2016-06-28 Hans

あなたがビデオ要素またはソースバッファにエラーイベントを取得するのですか？ビデオURLを「src」（メディアソースなし）として直接使用するとどうなりますか – sbr

エラーイベントはありません。データはサーバ（例えばIPストリームから）によって即座に生成されるので、ビデオ要素を指すことができるURLはありません。 – Hans

説明するためにplnkr http://plnkr.coを作成できますか？ – guest271314

は、Firefox 47で

をプレイしていない<video>要素はモックWebSocketイベントを作成するためにMocking Websocket Message Eventsでアプローチを合併再現することができませんでした。 bufferAll.htmlデモ：Let's Make a Netflix An Intro to Streaming Media on the WebMediaSource使用パターン。

<progress>およびprogressイベントは、メディアの読み込みステータスをユーザーに通知します。

<!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

出典

2016-07-02 18:11:14 guest271314

Firefox 47で1分後、私は回転円を取得し、それ以降は何も起こりません。 – ManoDestra

そして、IEやChromeでは、まったく動作しません。奇妙な – ManoDestra

@ManoDestra _「Firefox 47で1分後、回転円が出て、それ以降は何も起こりません」_ビデオコントロールで再生をしましたか？ firefox 47でその効果を再現することはできません。 'alert（）'が呼び出されました。ビデオは完全な「1：00」長さで再生されます。 'console'にエラーが記録されていますか？ chromeがQuestionの特定のコーデックをサポートしているとは思わないでください。var mime = 'video/mp4;コーデック= "avc1.4D401E、mp4a.40.2" '; ';あなたはchromeのplnkrで 'console'をチェックしましたか？それは確かではありません。実際の質問はfirefox _の問題を具体的に扱っていることに注意してください。「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>

出典

2016-07-07 15:12:06 John

あなたは文字通り、以前の回答のコードをコピーしましたか？ – Hans

Websocket経由でFirefoxにビデオをストリーミングできない

答えて

関連する問題