HTTP Live Streaming: come ascoltare i metadati temporizzati incorporati come tag ID3 utilizzando Javascript in iOS8?

Question

Abbiamo una piattaforma di streaming video in cui gli utenti possono trasmettere un flusso video live e sincronizzarlo con una serie di diapositive di presentazione. Per visualizzare la trasmissione su iOS, stiamo utilizzando HTTP Live Streaming. Per mostrare la diapositiva al momento giusto nello streaming su iOS, stavamo ascoltando l'evento qt_timedmetadataupdated fornito dall'API di Quicktime Javascript di Apple. Questo metodo è descritto qui:

http://www.wowza.com/forums/content.php?355-How-to-debug-timed-data-events-%28ID3-tags%29-from-Apple-HLS-streams-in-iOS-devices

Tuttavia, in iOS 8 questo metodo non funziona più in modo stiamo cercando di trovare una soluzione alternativa.

Qualcuno ha un'idea su come possiamo fare questo?

L'unica 'di progressi sono riuscito a fare è il controllo di una "traccia di testo dei metadati in-band", come descritto qui:

https://github.com/videojs/videojs-contrib-hls#in-band-metadata

Ho creato una pagina di esempio di prova di seguito utilizzando Flowplayer e il flashls plugin:

http://jsbin.com/vohicoxegi/1/edit?html,js,output

Nel codice ho creato un intervallo che controlla ogni 500 ms se esiste una traccia di testo il cui kind la proprietà è metadata. Ho notato che quando viene iniettato un bit di metadati temporizzati nello stream, viene creata una di queste tracce di testo. Ma il problema è che non c'è modo per me di accedere ai dati che si trovano nei metadati temporizzati di cui ho bisogno per sincronizzare correttamente le diapositive (precedentemente citate).

Si prega di notare che mi interessano solo lo streaming live. Riproduzione di un file multimediale esistente non è un problema.

Answer 1

Iron Mike era quasi corretto. Quando arriva un evento di traccia, devi impostare la proprietà mode su hidden altrimenti gli eventi cuechange non verranno attivati. Ecco un esempio completo:

$(videoElement)[0].textTracks.addEventListener('addtrack', function(addTrackEvent) { 
    var track = addTrackEvent.track; 
    track.mode = 'hidden'; 

    track.addEventListener('cuechange', function(cueChangeEvent) { 
    // do what you want with the cueChangeEvent 
    }); 
}); 

Answer 2

Penso che le tracce di testo siano la strada da percorrere. Ho usato qt_timedmetadataupdated prima come bene e ottenuto questo lavorando bene su iOS 8 in questo modo: la soluzione di

$(videoElement).textTracks.addEventListener('addTrack', function(addTrackEvent) { 
    var track = addTrackEvent.track; 
    track.addEventListener('cuechange', function(cueChangeEvent) { 
    and so on... 
    }) 
})