How can i track the recording time on MediaRecorder

Viewed 12

I want to display the recording time, like when the user clicks start record button, it displays the time and it starts to record, likewise when the stop record button is clicked. How can i track the time from the start of the recording til the end of it


const MyComponent = () => {
 const recordAudio = useRef();
 const stopRecAudio = useRef();


const getAudio = async() =>{
  const stream = await navigator.mediaDevices.getUserMedia(constraints);
  const mediaRecorder = new MediaRecorder(stream);
      
     let audio = [];
    mediaRecorder.ondataavailable = (e) => {
                audio.push(e.data);
            };

            recordAudio.current.onclick = () => {
                if (mediaRecorder.state !== "recording") {
                    
                    mediaRecorder.start();
                    
                }
            };

            stopRecAudio.current.onclick = () => {
                if (mediaRecorder.state !== "inactive") {
                    
                    mediaRecorder.stop();
                }
            }; 

    }

   return (
     <>
      <btn  ref={recordAudio} > start audio </btn>
      <btn  ref={stopRecAudio} > stop audio  </btn>
     </>
  
   );


}

0 Answers
Related