绘制到画布以截取屏幕截图 - 空白屏幕

Question

const capture = async () => {
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    const video = document.createElement("video");
  
    try {
      const captureStream = await navigator.mediaDevices.getDisplayMedia();
      video.srcObject = captureStream;
      context.drawImage(video, 0, 0, window.width, window.height);

      const frame = canvas.toDataURL("image/png");
      captureStream.getTracks().forEach(track => track.stop());
      var win = window.open();
      win.document.write('<iframe src="' + frame  + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');

    } catch (err) {
      console.error("Error: " + err);
    }
  };

目前正在构建 chrome 扩展并实现屏幕截图功能。我在使用此代码块时遇到的问题是，每当我尝试加载 base64 url​​ 时，它都会返回一个空白屏幕。我做了一些研究，表明 Chrome 会阻止从不同来源加载这些 base64 url​​。但我似乎无法找到解决此问题的方法。