Sideloaded VTT shows double duplicate captions strings on chromecast

Question

On my custom cast receiver app, in my mediaManager.onEditTracksInfo callback, I enable/disable sideloaded captions as below:

mediaManager.onEditTracksInfo = function (event) {
    if (!event.data || !event.data.activeTrackIds) {
            return;
    }

    // if sideloaded tracks are available, show/hide those
    if (sideloadedTracksAvailable) {
        updateSideloadedTracksVisibility(event);
    } else {
        updateEmbeddedTracksVisibility(event);
    }

    onEditTracksInfoOrig(event);
};

updateSideloadedTracksVisibility = function (data) {
    var mediaInformation = mediaManager.getMediaInformation() || {};

    // disable currently enabled sideloaded TTML or VTT, if any
    mediaPlayer.enableCaptions(false, cast.player.api.CaptionsType.TTML);
    mediaPlayer.enableCaptions(false, cast.player.api.CaptionsType.WEBVTT);

    enableActiveTracks(data.activeTrackIds, mediaInformation.tracks || []);
}

enableActiveTracks = function (activeTrackIds, tracks) {
   // loops over tracks and if requested to be enabled calls
   // mediaPlayer.enableCaptions(true, trackType, tracks[i].trackContentId);
}

Below is is what the <video> element looks like in receiver app DOM. As soon as sideloaded tracks are loaded into mediaManager in onLoad(), a track element is added to DOM with src set to url of first track in the tracks-array. Then whenever I call editTracksInfo with activeId of a track, a new track element gets appended to <video> eleement and gets removed whenever I turn captions off.

<video id="videoEl" src="blob:http%3A//blob-url-here" cast-captions-879553="true" crossorigin="anonymous">
    <track src="http://vtt/url/here/file.vtt" id="1" label="undefined" srclang="en-US" kind="subtitles"></track>
    <track src kind="captions">         <!-- this gets added upon enabling a track, and removed when disabling tracks -->
</video>

Captions are working fine but I notice that whenever I switch to a sideloaded VTT trackId, chromecast shows two caption streams with same content. Is this a known issue or is my code doing something wrong? It only happens with sideloaded vtt tracks. Sideloaded TTML and embedded vtt look fine. I checked the contents of sideloaded vtt file, and it doesnt have duplicate captions strings.

Answer 1

So I finally figured this out. Apparently Media Player Library handles sideloaded VTT tracks on its own. When using MPL, in the overridden onEditTracksInfo event handler, we only have to take care of enabling/disabling embedded TTML/VTT and sideloaded TTML. Sideloaded VTT is handled automatically by MPL upon calling default event handler (onEditTracksInfoOrig). This also explains why a <track> element with vtt url was automatically appended to <video> element. This element was created by MPL. This caused double captions to show because I and MPL both were enabling the VTT track. I changed my code as below:

enableActiveTracks = function (activeTrackIds, tracks) {
   // loops over tracks and if enable TTML track if requested
   if (trackType === 'ttml') {
       mediaPlayer.enableCaptions(true, trackType, tracks[i].trackContentId);
   }
}

Unfortunately, this is not documented in MPL documentation or custom receiver documentation. The documentation needs to be updated to make this information easy to find.