cannot download file from BlobUrl (using MediaReader)

Question

I have the following code:

            let self = this;
            this.chunks = [];

            const canvas2 = document.getElementById("self-canvas");
            let recordStream = canvas2.captureStream(1);
            var options;
            options = {mimeType: 'video/webm; codecs=vp9'};
            this.recorder = new MediaRecorder(recordStream, options);

            this.recorder.ondataavailable = function(evt) {
                self.chunks.push(evt.data);
            };
            this.recorder.onstop = function(evt) {
                console.log("recorder stopping");
                const link = document.createElement('a');
                const videoBlob = new Blob(self.chunks, { type: "video/webm" });
                console.log("file size: " + videoBlob.size);
                const url = URL.createObjectURL(videoBlob);
                link.href = url;
                link.download = "sample.webm";
                document.body.append(link);
                link.click(); //if I comment out here I can see the video
            };

            console.log("finished setting controller")
            console.log("recorder starting");
            this.recorder.start(10000);

            // the recorder.stop is called somewhere else

What it is supposed to do is pretty simple:
I have the element with id "self-canvas" that is showing my camera.
Now I am trying to record the camera and download the video from the browser using MediaRecorder, but for some reason I am unable to download the file.
I am sure that the file is being recorded, and console.log("file size: " + videoBlob.size); does not return empty.

But when I let the code run, instead of downloading the file, it tries to open it on the same window, and I cannot even see the video because the previous window disappears with the data of the recording.
However if I comment out the link.click(); I am able to see the video by opening the link on a new page (without closing the previous one). But it still doesn't download...

I used this as example, what am I doing wrong?

Answer 1

For heaven's sake...
I just added target blank and it worked.

link.href = url;
link.download = "sample.webm";
link.target = '_blank';

Probably because the resources are lost if it tries to open on the same page, and because it doesn't actually download the file if it is not a link "click".
Still, I never saw anyone having to add target blank in their examples like this one.

So I wonder why this is the case only for me...