javascript - 当样式设置为 object-fit:cover 时，从 VIDEO 元素获取画布

Question

我从网络摄像头获取实时视频，为了适应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, 0, 0, video.width, video.height);
document.getElementById('myImage').src = canvas.toDataURL();

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

谢谢

标签： javascripthtmlcsscanvasvideo