Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to get total time duration just after recorded video?

Thanks in an advance.
Facing issue after successfully recorded video, not able to get video total time duration.
Once user start recording then after user need to stop video recording so after that without reload the video need video total duration(means video length i.e. 10:20)

HTML part:

<video id="videoRecorded" controls></video>
 <button id="start">Start</button>
<button id="stop">Stop</button>

JS part: Used MediaRecorder for creating webm video file recording.

async function main() {
            const videoElement = document.getElementById('videoElement');
            const buttonStart = document.querySelector('#start')
            const buttonStop = document.querySelector('#stop')
            const buttonsubmit = document.querySelector('#submit')

            let blob = null
            const stream = await navigator.mediaDevices.getUserMedia({
                video: true,
                audio: true,
            })
            videoElement.srcObject = stream;
            if (!MediaRecorder.isTypeSupported('video/webm')) {
                console.warn('video/webm is not supported')
            }

            const mediaRecorder = new MediaRecorder(stream, {
                mimeType: 'video/webm',
            })

            buttonStart.addEventListener('click', () => {
                mediaRecorder.start() //
                buttonStart.classList.add('hidden')
                buttonStop.classList.remove('hidden')
            })

            buttonStop.addEventListener('click', () => {
                mediaRecorder.stop()
            })

            mediaRecorder.addEventListener('dataavailable', (event) => {
                blob = new Blob([event.data], {type: 'video/mp4'});
                videoRecorded.src = URL.createObjectURL(event.data)
                videoRecorded.addEventListener('loadeddata', () => {
                    console.log(videoRecorded.duration)
                })
            })
        }

        main()

Note : Server side processing also good for this task

Tags:

2

Answers


  1. 0

    I assume you don’t want to calculate the duration using time interval. If you want to get the "official" duration you can utilize timer to wait for the value, because it is Infinty until after the stream has been fully loaded which in turn only happens a few moments after play().

    So that’s it. A little weak especially if the video is long.

    mediaRecorder.addEventListener('dataavailable', (event) => {

  blob = new Blob([event.data], {
    type: 'video/mp4'
  });
  videoRecorded.src = URL.createObjectURL(event.data)

  videoRecorded.addEventListener('loadedmetadata', (event) => {
    videoRecorded.currentTime = 0
    videoRecorded.play()
    checkDuration()
  })
})

function checkDuration() {
  if (videoRecorded.duration === Infinity) {
    setTimeout(() => {
      checkDuration();
    }, 50);
  } else {
    console.log(videoRecorded.duration)
    URL.revokeObjectURL(videoRecorded.src)
  }
}
    Login or Signup to reply.
  2. 0

    For server side you have several packages that do this

    If you use with nodejs you have:

    https://www.npmjs.com/package/get-video-duration

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search