有没有办法将视频数据从视频标签/媒体流发送到 OffscreenCanvas？

Question

基本上我希望能够有效地执行相同的代码：const video = document.getElementById('video');const canvas = document.getElementById('canvas');const context = canvas.getContext('2d');const draw = () => {  context.drawImage(video, 0, 0);  requestAnimationFrame(draw);}video.onplay = () => {  requestAnimationFrame(draw);}仅使用屏幕外画布。我可以通过消息向屏幕外画布所在的工作人员发送图像，但不能发送视频，因为它直接绑定到HTMLElement. 目前有没有办法以某种方式仍然MediaStream在屏幕外画布中渲染视频数据或 a ？

Answer 1

您可以通过使用以下更改修改您的脚本，将视频帧发送到 Web Worker 中的 OffscreenCanvas：

const worker = new Worker('my-worker.js');

const video = document.getElementById('video');

const stream = video.captureStream();

const [track] = stream.getVideoTracks();

const imageCapture = new ImageCapture(track);

const canvas = document.getElementById('canvas');

const offscreen = canvas.transferControlToOffscreen();

worker.postMessage({ offscreen }, [offscreen]);

const draw = () => {

  imageCapture.grabFrame().then(imageBitmap => {

    worker.postMessage({ imageBitmap }, [imageBitmap]);

  });

  requestAnimationFrame(draw);

};

video.onplay = () => {

  requestAnimationFrame(draw);

};

my-worker.js

let canvas;

let context;

addEventListener('message', event => {

  if (event.data.offscreen) {

    canvas = event.data.offscreen;

    context = canvas.getContext('2d');

  } else if (event.data.imageBitmap && context) {

    context.drawImage(event.data.imageBitmap, 0, 0);

    // do something with frame

  }

});