当 Canvas 被 Web Worker 中的 OffscreenCanvas 隐藏并绘制到其上时，HTMLCanvasElement 捕获的流在 Chrome 上滞后是否正常？

Question

好的，所以问题有点多，但它实际上提到了我遇到的“错误”的每个部分。我不确定这是否真的是一个错误，或者是否有一些我还不明白的东西。我在 codepen 上创建了一个演示来重现奇怪的行为。

https://codepen.io/rroyerrivard/pen/jOwBLbB

就像我在 codepen 中写的那样，Chrome 中似乎存在一个错误，HTMLCanvasElement 的流在隐藏时不会在每次绘制图像时都被刷新。但要做到这一点，需要同时具备这 4 个条件。

• 我们必须通过调用HTMLCanvasElement.captureStream() 获得的MediaStream 提供HTMLVideoElement（而不是直接显示HTMLCanvasElement）。
• 我们从中获得 MediaStream 的 HTMLCanvasElement 必须隐藏（不在 DOM 中或使用 css 隐藏）。
• 我们必须利用来自OffscreenCanvas 的HTMLCanvasElement，我们从调用HTMLCanvasElement.transferControlToOffscreen() 得到。
• OffscreenCanvas 的抽奖必须在将OffscreenCanvas 转移到的网络工作者中完成。

我很不幸，在工作中的网络应用程序中同时遇到了所有这些条件。我可以通过不使用 transferControlToOffscreen() 调用并在从 web worker 接收到 ImageBitmap 后在主线程中绘制一个 ImageBitmap 来避免该错误，但这会将 FPS 降低大约 18%。

这是一个已知的错误吗？有没有办法强制MediaStream 在每次绘制OffscreenCanvas 时刷新？

Answer 1

我猜这是预期的行为是的。

这里的问题是您使用主线程中的 setTimeout 和 MessageEvents 让您的工作线程等待。
OffscreenCanvas 会将其位图提交到 Worker 渲染帧中的占位符画布。但默认情况下，Worker 不会进入这个渲染帧。您需要使用 requestAnimationFrame 请求它。
当占位符画布本身被渲染时（即在主线程的渲染框架中），让占位符在页面中可见将在内部请求 OffscreenCanvas 提交其位图，这就是当占位符画布可见时它起作用的原因。

请注意，我们曾经有一个 OffscreenCanvas.commit() 方法，但当 requestAnimationFrame 在 WorkerContexts 中出现时，它已被弃用。

因此，在您的 Worker 中使用 requestAnimationFrame 来实际强制将位图提交到占位符画布。

const video = document.querySelector("video");
const select = document.querySelector("select");
const canvas = document.createElement("canvas");
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker(getWorkerURL());
worker.postMessage({ offscreen }, [offscreen]);
select.oninput = e => worker.postMessage({ method: select.value });
worker.onmessage = (evt) => {
  video.srcObject = canvas.captureStream();
};

function getWorkerURL() {
  return URL.createObjectURL(
    new Blob([
      document.querySelector("[type='text/worker']").textContent
    ], { type: "text/javascript" })
  );
}

canvas { border: 1px solid }

<video controls autoplay></video>
<label>waiting method:<select><option>rAF</option><option>setTimeout</option></select></label>
<script type="text/worker">
  let ctx;
  let waiting_method = "rAF";
  onmessage = ({ data: { offscreen, method } }) => {
    if (offscreen) {
      ctx = offscreen.getContext("2d");
      draw();
      postMessage("ready");
    }
    else if (method) {
      waiting_method = method;
    }
  };
  function draw() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillText(new Date().getTime(), 30, 30);
    if (waiting_method === "rAF") {
      requestAnimationFrame(draw);
    }
    else {
      setTimeout(draw, 1000/30);
    }
  }
</script>

---

现在，我想我们还可以预期对 captureStream() 的调用实际上会触发与可见占位符画布触发的相同的内部提交请求，因此您可能需要在 https://crbug.com 提交问题。