有没有一种方法可以将视频数据从视频标签/ MediaStream发送到OffscreenCanvas? [英] Is there a way to send video data from a video tag/MediaStream to an 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()
HTMLMediaElement.prototype.captureStream()
MediaStream.prototype.getVideoTracks()
new ImageCapture()
ImageCapture.prototype.grabFrame()
References
这篇关于有没有一种方法可以将视频数据从视频标签/ MediaStream发送到OffscreenCanvas?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文