I am trying to use MediaRecorder API to convert my video to webm. However after following some online examples, I am still not able to figure out how to do that.

Here is the main exceprt from my code:

convertVideo = (e)=>{
        //creating a virtual video element
        const virtualVideo = document.createElement("video");

        //this file is File Blob I get from user input. I have checked it is all good and has data.
        virtualVideo.src = URL.createObjectURL(this.file);
        virtualVideo.muted=true;

        virtualVideo.oncanplay=e=>{
            console.log("Can play");
            virtualVideo.play();
        }
        
        virtualVideo.onplay=()=>{
            console.log("Playing");
            const stream = virtualVideo.captureStream();
            const recorder = new MediaRecorder(stream);
            
            const data=[];
            recorder.ondataavailable = e=>data.push(e.data);
            recorder.start();

            recorder.onstop=()=>{
                console.log("Stopped recording");
                const blob = new Blob(data,{mimeType:"video/webm"});
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'test.webm';
                a.click();
                URL.revokeObjectURL(url);
            }

            virtualVideo.onended=(e)=>{
                console.log("video ended");
                recorder.stop();
            }
        }

    }

The data array is always empty. Can't figure out what I a doing wrong.