canvas.drawImage 在 chrome 中给出空白屏幕截图，但在 FF 中没有

Question

我想使用 getDisplayMedia 截取屏幕截图，但它给了我空白图像。

  document
    .getElementById("takeScreenshot")
    .addEventListener("click", 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;
        video.addEventListener("loadedmetadata", (e) => {
          canvas.width = 600; //e.path[0]?.videoWidth; // set its size to the one of the video
          canvas.height = 600; //e.path[0]?.videoHeight; // video.videoHeight;
          context.drawImage(video, 0, 0);
          const frame = canvas.toDataURL("image/png");
          captureStream.getTracks().forEach((track) => track.stop());

          const img = document.createElement("img");
          img.src = frame;
          document.body.append(img);
        });
      } catch (err) {
        console.error("Error: " + err);
      }
    });

查看演示输出的问题：https://zm3kiy.csb.app/
代码：https://codesandbox.io/s/practical-wright-zm3kiy?file=/index.html:324-1403

Answer 1

我认为您需要等待 loadedmetadata 事件才能在画布上绘制视频。您可以通过向视频元素添加事件侦听器来完成此操作。

video.addEventListener('loadedmetadata', () => {
  context.drawImage(video, 0, 0, window.width, window.height);
  const frame = canvas.toDataURL('image/png');
  captureStream.getTracks().forEach((track) => track.stop());
  
  const img = document.createElement('img');
  img.src = frame;
  document.body.append(img);
});