Javascript 使用相机源从视频元素提取快照

上下文

我试图通过客户端的摄像机捕捉快照并将其保存为图像。我有一本书

问题

使用Context2D的

drawImage

，我没有成功地将整个视频区域从视频元素放到画布上。虽然视频是400乘300

<video width="400" height="300" ...

<canvas width="400" height="300" ...

这是在我的客户身上发生的事情的一个例子

红色框元素是

视频

，绿色框元素是

画布

我怀疑这是因为视频流不是400乘300（甚至不是4:3纵横比），但我还找不到解决方案，或者至少在HTML规范中指出这种行为是因为视频流

有没有人在这方面有更多的经验，可以为我指出正确的方向

---

很抱歉，小提琴中的代码质量很差。

当您设置HTMLElement的

宽度

和

高度

属性时，您只设置了它的显示大小，而不是它内部框架的大小

Canvas2dContext.drawImage（视频，x，y）

将采用帧大小（可通过

getUserMedia

btw的强制设置）

因此，您需要将画布的宽度和高度设置为

video.videoWidth

和

video.videoHeight

属性，以获取网络摄像头捕获的全质量图像，或者调用

ctx.drawImage（video，0,0,400,300）

以在画布上按CSS缩放时重新缩放，或者在

getUserMedia

调用期间直接设置必填项（最新的规范是

navigator.mediaDevices.getUserMedia（视频：{width:300，height:300}）；

），但不幸的是，对于最新版本，除了检查video.videoHeight/width；-）之外，您无法确保浏览器会遵守该规范

var ctx=rendering.getContext（'2d'）；
btn.onclick=函数（）{
开关（选择.value）{
案例“css重新缩放”：
宽度=400；
高度=300；
ctx.drawImage（视频，0，0，400，300）；
打破
“全面质量”案例：
rendering.width=video.videoWidth；
rendering.height=video.videoHeight；
ctx.drawImage（视频，0,0）；
打破
}
}
var initVideo=函数（流）{
video.src=URL.createObjectURL（流）；
video.play（）；
};
navigator.mediaDevices.getUserMedia({
视频：真的
})
.然后（功能）{
创新科技视讯(s)
})
.catch（函数（err）{
if（err.message.indexOf（'secure origins'）>-1）{
document.body.innerHTML='（右键单击->打开链接…）；
}
})；

拍摄快照
css重缩放
全面质量

当您设置HTMLElement的

宽度

和

高度

属性时，您只设置其显示大小，而不是其中框架的大小

Canvas2dContext.drawImage（视频，x，y）

将采用帧大小（可通过

getUserMedia

btw的强制设置）

因此，您需要将画布的宽度和高度设置为

video.videoWidth

和

video.videoHeight

属性，以获取网络摄像头捕获的全质量图像，ot调用

ctx.drawImage（视频，0,0,400,300）

在CSS缩放时在画布上重新缩放，或在调用

getUserMedia

期间直接设置必填项（最新的规范是

navigator.mediaDevices.getUserMedia（视频：{width:300，height:300}）；

）但不幸的是，对于这一最新版本，除了检查video.videoHeight/Width；-）之外，您无法确定浏览器是否会遵守它

var ctx=rendering.getContext（'2d'）；
btn.onclick=函数（）{
开关（选择.value）{
案例“css重新缩放”：
宽度=400；
高度=300；
ctx.drawImage（视频，0，0，400，300）；
打破
“全面质量”案例：
rendering.width=video.videoWidth；
rendering.height=video.videoHeight；
ctx.drawImage（视频，0,0）；
打破
}
}
var initVideo=函数（流）{
video.src=URL.createObjectURL（流）；
video.play（）；
};
navigator.mediaDevices.getUserMedia({
视频：真的
})
.然后（功能）{
创新科技视讯(s)
})
.catch（函数（err）{
if（err.message.indexOf（'secure origins'）>-1）{
document.body.innerHTML='（右键单击->打开链接…）；
}
})；

拍摄快照
css重缩放
全面质量

谢谢你的帮助！我还没有接受答案，因为Android上有问题。你能更详细地说明这个问题吗？但基本上，如果你的UA没有设置videoHeight和videoWidth属性，你应该填充一个bug。谢谢你的帮助！我还没有接受答案，因为Android上有问题。你能更详细一点吗关于这个问题有什么特别的吗？但是基本上，如果你的UA没有设置videoHeight和videoWidth属性，你应该填充一个bug。

ctx.drawImage(video, 0, 0, 400, 300, 0, 0, 400, 300);