Question

使用navigator.mediaDevices.getUserMedia(获取相机流会显示一张图片，该图片会在浏览器中裁剪边缘。可以通过本机相机应用程序查看完整图像。我的华为Honor 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>

Answer 1

我遇到了同样的问题，对我来说，这解决了这个问题：

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

您可以使用@jib在评论中张贴的小提琴，然后看看如果您不使用exact强制使用宽高比，则实际上并没有任何作用，但是在您使用它的那一刻，它会更改视频大小。

mediaDevices.getUserMedia图像在Chrome中裁剪/缩放

1 个答案: