javascript - 有没有办法将视频数据从视频标签/MediaStream 发送到 OffscreenCanvas?
问题描述
基本上我希望能够有效地执行相同的代码:
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
在屏幕外画布中?
解决方案
您可以通过使用以下更改修改脚本来将视频帧发送到 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
}
});
参考
推荐阅读
- python - python中的“来自”如何可以复制
- arrays - 总和大于 K 的最长子数组
- python-3.x - Python遍历列表列表
- windows - Chrome 84 密码套件 IIS 8
- webp - 使用 HTML 元素向访问者提供 WebP 图像
- c - 多个应用程序头文件在 C 中包含错误
- scala - 为什么我不能将案例类的构造函数用作在 map() 中使用的函数
- python - 如何解压列表中的列表并附加到python中的字符串?
- react-native - 我可以在 React Native 应用程序中使用 Instagram 登录和 AWS Amplify cognito 吗?
- java - 使用 Freemarker 继承模板