cannot download file from BlobUrl (using MediaReader)

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) {
            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;
       = "sample.webm";
      ; //if I comment out here I can see the video

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

            // 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; 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?


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

    link.href = url; = "sample.webm"; = '_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...