使用套接字io流視頻

Question

我在使用socket.io和node流化視頻文件時遇到了一些困難。 我的視頻文件在服務器上，並且正在使用fs模塊將其讀取到readStream中。 我是他們將數據塊傳遞到客戶端的媒體源，該媒體源饋入html 5視頻標簽。

盡管客戶端正在接收這些塊（我正在記錄它們），並且將這些塊附加到媒體源的緩沖區中，但是視頻標簽中沒有任何內容。

有人知道怎么修這個東西嗎？

這是我的代碼：

客戶端：

  var mediaSource = new MediaSource();
  var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    document.getElementById('video').src = window.URL.createObjectURL(mediaSource);
    mediaSource.addEventListener('sourceopen', function(event) {
        var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
        console.log(sourceBuffer);
        socket.on('chunk', function (data) {
            if(!sourceBuffer.updating){
                sourceBuffer.appendBuffer(data);
                console.log(data);
            }

        });
        socket.emit('go',{})
    });

服務器端：var stream = fs.createReadStream（window.currentvidpath）;

socket.on('go', function(){ 
  console.log('WENT');
    stream.addListener('data',function(data){
      console.log('VIDDATA',data);
      socket.emit('chunk',data);
    })
  })

非常感謝。

Answer 1

問題在於，只有在沒有更新if(!sourceBuffer.updating){ sourceBuffer.appendBuffer(data); console.log(data); } ，才追加源緩沖區if(!sourceBuffer.updating){ sourceBuffer.appendBuffer(data); console.log(data); } if(!sourceBuffer.updating){ sourceBuffer.appendBuffer(data); console.log(data); }

在添加了else並記錄了不附加的時間之后，這是我的控制台

SourceBuffer {mode: "segments", updating: false, buffered: TimeRanges, timestampOffset: 0, appendWindowStart: 0…}
site.html:24 connect
site.html:17 ArrayBuffer {}
30 site.html:20 not appending

因此，它附加了視頻的一小部分，並忽略了30

您應該存儲未附加在數組中的那些。 然后只需使用設置間隔進行循環