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.