extension - HTTP Live Streaming: ¿cómo escuchar los metadatos temporizados incrustados como etiquetas ID3 usando Javascript en iOS8?

script m3u8

Question

Tenemos una plataforma de transmisión de video donde los usuarios pueden transmitir una transmisión de video en vivo y sincronizarla con un conjunto de diapositivas de presentación. Para mostrar la transmisión en iOS, estamos utilizando HTTP Live Streaming. Para mostrar la diapositiva en el momento correcto en la transmisión en iOS, estábamos escuchando el evento qt_timedmetadataupdated provisto por la API de Quicktime Javascript de Apple. Este método se describe aquí:

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

Sin embargo, en iOS8 este método ya no funciona, por lo que estamos tratando de encontrar una solución alternativa.

¿Alguien tiene una idea de cómo podríamos hacer esto?

El único progreso que he logrado es buscar una "pista de texto de metadatos en banda" como se describe aquí:

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

He configurado una página de prueba de ejemplo a continuación usando flowplayer y el plugin de flashls :

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

En el código, he creado un intervalo que comprueba cada 500 ms si existe una pista de texto cuya propiedad kind es metadata . Me he dado cuenta de que cuando se inyecta un poco de metadatos cronometrados en la transmisión, se crea una de estas pistas de texto. Pero el problema es que no hay forma de que pueda acceder a los datos que están en los metadatos cronometrados que necesito para sincronizar las diapositivas (mencionadas anteriormente) correctamente.

Tenga en cuenta que solo me preocupa la transmisión en vivo. Reproducir un archivo multimedia existente no es un problema.

Answer 1

Creo que las pistas de texto son el camino a seguir. También utilicé qt_timedmetadataupdated antes y obtuve un buen funcionamiento en ios8 como este:

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

Answer 2

La solución de Iron Mike fue casi correcta. Cuando se produce un evento de pista, debe establecer su propiedad de mode como hidden contrario, los eventos cuechange no se dispararán. Aquí hay un ejemplo 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
  });
});