Extract ID3 timed metadata from live stream in Chrome on Android
I am live streaming through a Wowza server and injecting timed ID3 metadata via the method here:
https://www.wowza.com/forums/content.php?322-How-to-convert-onTextData-events-in-a-live-or-VOD-stream-to-timed-events-(ID3-tags)-in-an-Apple-HLS-stream
I am able to extract this timed metadata from JW Player on all browsers and devices except my Android phone (Samsung Note 4). I imagine other Android devices would behave similarly.
My code first checks the player mode via playerInstance.getProvider().name. If "HTTP" mode is detected one extraction method is used. If "Flash" mode is detected another extraction method is used. This method is working for me on iPads, iPhones, Mac's, PC's, all browsers. My Samsung reports it is playing the stream in HTTP mode. Don't know if that is relevant or not.
The code to do the extraction appears below. Any idea why this might be failing? It's the "else" case code (HTTP mode) that is running on the phone.
playerInstance.onReady(function() {
//Make an output (logging) panel. Use this to print the ID3 tags out when they are extracted from the stream
var out = document.getElementById("output");
//Get the mode that the JW Player is in.
var mode = playerInstance.getProvider().name.trim();
if (mode == 'flash'){
//Tell the viewer what mode we're in
out.innerHTML = out.innerHTML + mode + ' listening...<br>';
//Use the Flash extraction method to get the event and print contents to output panel
playerInstance.on('meta', function(event){
if(event.metadata.title){
out.innerHTML = out.innerHTML + event.metadata.title + '<br>';
out.style.overflowY = "auto";
}});
}//end if flash
else {//html5 mode
//Tell the viewer what mode we're in
out.innerHTML = out.innerHTML + mode + ' listening... <br>';
//Get the video element. You'll need it to do the extraction.
var mediaElement = document.getElementsByClassName("jw-video jw-reset")[0];
//Now use the HTTP extraction method (basically pull data from track in video element) and print contents to output panel
mediaElement.textTracks.addEventListener('addtrack', function (addTrackEvent) {
var track = addTrackEvent.track;
track.mode = 'hidden';
track.addEventListener('cuechange', function(cueChangeEvent){
out.innerHTML = out.innerHTML + cueChangeEvent.target.activeCues[0].value.data + "<br>";
out.style.overflowY = "auto";
});
});
}//end else html5
});
