mediaDevices.getUserMedia 图像在 Chrome 中裁剪/放大
Mar*_*sma 6 html javascript webcam google-chrome getusermedia
获取相机流navigator.mediaDevices.getUserMedia(会显示一张图片，该图片似乎在浏览器中裁剪了边缘。可以通过本机相机应用程序看到完整图像。我的华为荣耀 8 和我的笔记本电脑（均使用 Chrome）似乎也出现了同样的情况。然而，笔记本电脑上的 Microsoft Edge 正确显示了图像。
我在限制条件下尝试了不同的纵横比。4:3 的纵横比似乎仅比 16:9 的表现稍好一些。众所周知，这些功能很繁琐，但这个问题会给我的应用程序带来严重问题。尤其是在手机上，图像质量明显较差。
尽管我不知道是否可以解决此问题，但对于该问题的任何帮助都表示赞赏。
代码：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
function hasGetUserMedia() {
return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
}
if(hasGetUserMedia()){
const video = document.getElementById('camera');
const device_ids = [];
var device = -1;
function success(stream){
video.srcObject = stream;
}
function error(error){
alert("Something went wrong :( It could be this app is not supported by your browser\n" + error);
}
var constraints = {
video: {
facingMode: "environment",
aspectRatio: 1.7777777778
}
};
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
}else{
alert("This application is not supported on your browser :(");
}
});
</script>
</head>
<body>
<video id="camera" autoplay></video>
</body>
</html>
我遇到了同样的问题，对我来说这解决了它：
var constraints = {
video: {
facingMode: "environment",
aspectRatio: { exact: 1.7777777778 }
}
};
您可以使用 @jib 在评论中发布的同一个小提琴，看看如果您不强制使用纵横比，exact它实际上不会做任何事情，但当您使用它时，它会改变视频大小。
| 归档时间： |
|
| 查看次数： |
4248 次 |
| 最近记录： |