Javascript mediaDevices.getUserMedia图像在Chrome中被剪切/放大

使用

navigator.mediaDevices.getUserMedia获取相机流（

显示了一张在浏览器中裁剪边缘的图片。通过本机摄像头应用程序可以看到完整的图像。我的华为荣誉8和我的笔记本电脑（均为Chrome）也出现了同样的情况。但是，笔记本电脑上的Microsoft Edge正确显示了图像

我尝试了不同的宽高比和限制条件。4:3宽高比的性能似乎只比16:9略好。众所周知，这些功能非常复杂，但这个问题给我的应用程序带来了严重的问题。尤其是在手机上，图像质量要差得多

尽管我不知道这个问题是否可以解决，但我们非常感谢您对这个问题的任何帮助

代码：

$（文档）.ready（函数（）{
函数hasGetUserMedia（）{
return！！（navigator.mediaDevices&&navigator.mediaDevices.getUserMedia）；
}
如果（hasGetUserMedia（））{
const video=document.getElementById（'camera'）；
常量设备_id=[]；
var设备=-1；
功能成功（流）{
video.srcObject=流；
}
函数错误（error）{
警报（“出现问题：（可能是您的浏览器不支持此应用\n”+错误）；
}
变量约束={
视频：{
面向模式：“环境”，
方面：1.7778
}
};
navigator.mediaDevices.getUserMedia（约束）。然后（成功）。捕获（错误）；
}否则{
警报（“您的浏览器不支持此应用程序：（”）；
}
});

我也遇到了同样的问题，这就解决了我的问题：

var constraints = {
  video: {
    facingMode: "environment",
    aspectRatio: { exact: 1.7777777778 }
  }
};

---

你可以用@jib在评论中发布的同样的小提琴演奏，你可以看到如果你不使用

exact

强制高宽比，它实际上不会做任何事情，但是当你使用它的时候，它会改变视频的大小。

听起来像是布局问题。而不是依靠目视检查来隔离你的问题。这里的问题是一样的……每一个问题hing在三星Galaxy上还可以，但在摩托罗拉Moto X上，视频流似乎会截取图像。当调用takePhoto（）时，结果是显示视频预览中未显示的内容的照片。

var constraints = {
  video: {
    facingMode: "environment",
    aspectRatio: { exact: 1.7777777778 }
  }
};