当样式为 object-fit 时，从 VIDEO 元素获取画布：cover

编程问答 2022-04-23

问题描述

我从网络摄像头获取实时视频，为了适应具有我想要的宽度/高度的 div，我发现的最佳解决方案是像这样使用 object-fit: cover：

<video id="videoId" style='object-fit: cover;' autoplay="true" playsInline></video>
<img id="myImage" src="">

当我尝试获取该视频的确切位图内容时出现问题，使用

var video     = document.getElementById('videoId');
var canvas    = document.createElement("canvas");
canvas.width  = video.width;
canvas.height = video.height;

canvas.getContext('2d').drawImage(video,video.width,video.height);
document.getElementById('myImage').src = canvas.toDataURL();

我没有得到视频内容，而是“真实的”视频流，这是不同的，因为我使用的是 object-fit: cover 样式。
有没有办法抓取屏幕截图，可以说那个视频？理论上，我可以使用宽度/高度偏移，因为“理论上”我知道视频的原始分辨率，但是当我尝试时，它变得凌乱。 DPI、像素、缩放...

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

canvashtmljavascriptvideovideo