How to listen for ID3 Data With Video.js

[lastpeony]

I am trying to listen for id3 metadata on videojs. This is what i tried.

listenForID3MetaData(){
          this.videojsPlayer.textTracks().on('addtrack', e=>{
              var track = e.track;

                  track.on('cuechange', function () {
                      var myActiveCue = track.activeCues[0];
                      console.log(myActiveCue) // cant find data inside this
                      if (myActiveCue && 'frame' in myActiveCue && myActiveCue.frame !== undefined) {
                          let cueDataObj = myActiveCue.frame;
                      }
                  });
              
          });
      }

cue change repeatedly fires but When i add id3 to the stream, i cannot find my text data inside any of the cues. (printed track.activeCues)

If i use Hls.js i can get the id3 metada fine with

 hls.on(Hls.Events.FRAG_PARSING_METADATA, function (event, data) {
      
              var strMessage = new  TextDecoder().decode(data.samples[0].data);

        console.log('event =====> ', event, 'data =====> ', strMessage)
    });

So how can i do the same thing with videojs?

[mister-ben]

The bip bop test video has id3. At that URL, you can log the id3 cues in the console by pasting this in the terminal:

// Identify id3 track
const metadataTrack = Array.from(player.textTracks()).find(t => t.label === 'Timed Metadata');
// Add event listener to track. Inspect activeCues on cuechange events. 
metadataTrack.addEventListener('cuechange', function() {
    console.log(metadataTrack.activeCues[0]?.text, metadataTrack.activeCues);
});

[lastpeony]

Hello @mister-ben Thank you. It worked perfectly fine.
Do you know how to extract SEI data similar to this?