recodedData duration less than player.record().getDuration in safari

[tonynguyenit18]

Description

on finishRecord event, I convert player.recordedData to a url to play in a video tag (or any video player or download it to local machine). But the video has duration is less than player.record().getDuration

Steps to reproduce

• Record video as normal
• handle onFinish event

import "./style.less"
import "video.js/dist/video-js.css"
import "webrtc-adapter"
import "videojs-record/dist/css/videojs.record.css"
import "videojs-record/dist/videojs.record.js"
mport RecordRTC from "recordrtc"
import videojs, { VideoJsPlayerOptions } from "video.js"
....
  const videoJsPlayerOptions = {
      controls: false,
      fluid: false,
      plugins: {
        record: {
          audio: true,
          video: true,
          debug: true,
          timeSlice: 1000,
          maxLength: 90,
          videoMimeType: "video/mp4"
        }
      }
    }
   player = videojs(recordVideoEl.current, videoJsPlayerOptions, () => {
      // print version information at startup
      const version_info = `Using video.js ${videojs.VERSION} with videojs-record ${videojs.getPluginVersion(
        "record"
      )} and recordrtc ${RecordRTC.version}`
      videojs.log(version_info)
    })

   player.on("timestamp", function () {
      const currentTime = Math.floor(player.record().getCurrentTime()) // This time is same as player.record().getDuration ==> good
    })

   player.on("finishRecord", async () => {
      console.log("player.duration time", player.record().getDuration()) // this is 17.123 for example
      const mp4Url = window.URL.createObjectURL(player.recordedData)
      setMp4Url(mp4Url)
    })

• play the video

...
{mp4Url && <video id="videoRecord" src={mp4Url} controls />}
...

Results

Expected

Video generated from player.recodedData should have same duration as player.record().getDuration(). E.g: 17.123

Actual

Video generated from player.recodedData duration less than player.record().getDuration(). E.g 3.0023 < 17.123

Error output

No error

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

what version of videojs does this occur with?
"video.js": "^7.11.4",

browsers

Safari
Version 14.1.1 (15611.2.7.1.6, 15611)

OSes

Mac OS

[thijstriemstra]

@tonynguyenit18 can you reproduce this without the timeSlice option?

[tonynguyenit18]

@thijstriemstra Without timeSlice, this issue is gone, but there is another issue occur is player.on("timestamp"....) is not executed.