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()