有没有一种方法可以将视频数据从视频标签/ MediaStream发送到OffscreenCanvas？

本文介绍了有没有一种方法可以将视频数据从视频标签/ MediaStream发送到OffscreenCanvas？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

基本上我希望能够有效地执行相同的代码：

Basically I want to be able to perform effectively this same code:

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 ？

only using an offscreen canvas. I can send images over messages to the worker the offscreen canvas is on, but not video as it's directly tied to an HTMLElement. Is there currently a way to somehow still render video data or a MediaStream in an offscreen canvas?

推荐答案

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

You can send frames of a video to an OffscreenCanvas in a Web Worker by modifying your script with the following changes:

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

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 } });

参考文献

• HTMLMediaElement.prototype.captureStream（）
• MediaStream.prototype.getVideoTracks（）
• new ImageCapture（）
• ImageCapture。 prototype.grabFrame（）

References

• HTMLMediaElement.prototype.captureStream()
• MediaStream.prototype.getVideoTracks()
• new ImageCapture()
• ImageCapture.prototype.grabFrame()