Text Tracks are not shown on mobile during recording

[benhartwich]

Hi,

I want to display text tracks during recording and it is working at desktop browsers, but not on mobile ones. On mobile browsers like chrome or safari text tracks are only shown, when playing the recorded video. I am searching for hours, but I don´t find any hint, what could be the problem.

Would be really great to have a hint from somebody!

My implementation:

<script>   
var options = {
    controls: true,
    controlBar: {
        fullscreenToggle: false,
        volumePanel: false,
        nativeControlsForTouch: true
    },
    tracks: [{src: 'playback.vtt', kind:'captions', srclang: 'de', Label:'Song', default: 'true' }],
    textTrackSettings: false,
    width: 1080,
    height: 1920,
    fluid: true,
    aspectRatio: '9:16',
    plugins: {
        record: {
            audio: true,
            video: {
                width: { min: 640, ideal: 640, max: 1280 },
                height: { min: 480, ideal: 480, max: 920 }
            },
            frameWidth: 1280,
            frameHeight: 920,
            maxLength: 120,
            debug: false,
            audioMimeType: 'audio/ogg',
            audioBitRate: 320,
            videoBitRate: 7000,
            videoMimeType: 'video/webm;codecs=vp8'
        }
    }
};
   
//initialize playback
    var sound = new Howl({
      src: ['playback.mp3'],
      volume: 0.5,
      onend: function () {
      }
    });

// apply some workarounds for opera browser
applyVideoWorkaround();

var player = videojs('myVideo', options, function() {
    // print version information at startup
    var msg = 'Using video.js ' + videojs.VERSION +
        ' with videojs-record ' + videojs.getPluginVersion('record') +
        ' and recordrtc ' + RecordRTC.version;
    videojs.log(msg);
});

var tracks = player.textTracks();
  
function showTexttracks() {
           for (var i = 0; i < tracks.length; i++) {
          var track = tracks[i];

          if (track.kind === 'captions') {
              track.mode = 'showing';
              console.log(track.mode);
          }
      }
   }
// error handling
player.on('deviceError', function() {
    console.log('device error:', player.deviceErrorCode);
});

player.on('error', function(element, error) {
    console.error(error);
    // handle selection changes
});

// user clicked the record button and started recording
player.on('startRecord', function() {
    console.log('started recording!');
    console.log(options);
    sound.play(); 
    showTexttracks();
});

var videoFile; 

// user completed recording and stream is available
player.on('finishRecord', async function() {
    // the blob object contains the recorded data that
    // can be downloaded by the user, stored on server etc.
    console.log('finished recording: ');
    sound.stop();
    var videoFile = player.recordedData;
    player.src({type:'video/mp4', src: URL.createObjectURL(player.recordedData)});
    player.record().saveAs({'video': 'song.mp4'});
 
  }); 
 

</script>