無法從 BlobUrl 下載文件（使用 MediaReader）

Question

我有以下代碼：

            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

它應該做的很簡單：
我有一個顯示我的相機的 id 為“self-canvas”的元素。
現在我正在嘗試使用 MediaRecorder 錄制相機並從瀏覽器下載視頻，但由於某種原因我無法下載文件。
我確定文件正在被記錄，並且console.log("file size: " + videoBlob.size); 不返回空。

但是當我讓代碼運行時，它沒有下載文件，而是嘗試在同一個窗口中打開它，我什至看不到視頻，因為前一個窗口隨着錄制的數據消失了。
但是，如果我注釋掉link.click(); 我可以通過在新頁面上打開鏈接來觀看視頻（不關閉前一個頁面）。 但是還是下載不了。。。

我以此為例，我做錯了什么？

Answer 1

看在上帝的份上...
我剛剛添加了目標空白，它起作用了。

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

可能是因為如果它試圖在同一頁面上打開資源會丟失，並且如果它不是“點擊”鏈接，它實際上不會下載文件。
盡管如此，我從未見過有人必須在他們的示例中添加目標空白，例如這個。

所以我想知道為什么這只是我的情況......