2016-09-16 2 views
0

У меня возникли трудности с потоковым видеофайлом с socket.io и узлом. Мой видеофайл находится на моем сервере, и я использую модуль fs, чтобы прочитать его в readStream. Я им передаю куски данных в медиа-источник на стороне клиента, который загружается в тег видео html 5.Потоковое видео с гнездом io

Хотя клиент получает куски (я регистрирую их), и я добавляю куски в буфер источника мультимедиа, в теге видео ничего не отображается.

Кто-нибудь знает, как это исправить?

Вот мой код:

стороне клиента:

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',{}) 
    }); 

стороне сервера: вар поток = fs.createReadStream (window.currentvidpath);

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

Большое спасибо.

+0

Вы уверены, что куски не приходят как Base64? Я предполагаю, что поскольку socket.io использует JSON, что любые двоичные данные будут закодированы перед отправкой ... но я мог бы смешивать вещи. Вы должны проверить. – Myst

+0

@Myst - webSocket и socket.io имеют двоичные режимы, если они установлены таким образом. – jfriend00

+0

@ jfriend00, Приятно знать. Тем не менее, я не видел этого в коде сервера, который опубликовал OP ... Если сервер настроен таким образом, это, вероятно, лучше, так как Base64 увеличивает накладные расходы (кодирование, декодирование и пропускную способность). – Myst

ответ

0

Проблема заключается в том, что вы только добавить исходный буфер, если он не обновляет if(!sourceBuffer.updating){ sourceBuffer.appendBuffer(data); console.log(data); }

Heres мою консоль после того, как я добавил еще и регистрировать время он не присоединяют

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

Вы должны сохранить те, которые не добавлены в массив. Затем просто создайте петлю с установленным интервалом