有没有办法将视频数据从视频标签/媒体流发送到 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.jslet 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  }});