小编Mar*_*sma的帖子

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

获取相机流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: …

Run Code Online (Sandbox Code Playgroud)

html javascript webcam google-chrome getusermedia

Mar*_*sma

lucky-day

6
推荐指数

1
解决办法

4248
查看次数