javascript - 视频正在自动调整我的大小

Question

我正在尝试制作一个摄像头捕捉组件，我希望调整它的大小以适应包含它的 100% 的 div。 这就是我制作视频的方式。

navigator.mediaDevices.getUserMedia({
    video: {

      // Indicates the possible video quality.
      width: { min: 640, ideal: 1024, max: 1920 },
      height: { min: 480, ideal: 720, max: 1080 }
    }})
    .then(stream => {
     // Code over here
        }));
      };
    })
    .catch(error => {
     // Error over here
      }));
    });
}

在我的 CSS 中有这个。

#video {
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  width: 100%!important;
  height: auto!important;
  -webkit-transform: scaleX(-1); //avoid mirror effect
  transform: scaleX(-1);

}

当我希望视频的质量是另一个大于 640x480 的质量时出现“错误”，然后视频>自动调整大小并且无法正常工作，因为我对图像进行裁剪然后分析它和其他事情现在没关系。

是否可以在不调整视频大小的情况下提高质量？

问候!

Answer 1

使用getUserMedia 设置视频输入的大小后，您不能更改其实际大小，只能更改 <video>元素的大小 - 输入(相机输入)的尺寸不会改变，这可能会导致视频显示的裁剪和像素化。

我假设您使用的是 video.srcObject = stream;命令将输入​​(流)设置为 <video>元素。

如果您想调整实际输入的尺寸，您需要重新附加 srcObject在调用 getUserMedia 后到一个新的 流对象再次，具有新的维度。

例如:

var constraints = {
    audio: true,
    video: {
        mandatory: {
            minWidth: CANVAS_WIDTH,
            minHeight: CANVAS_HEIGHT,
            maxWidth: CANVAS_WIDTH,
            maxHeight: CANVAS_HEIGHT
        }
    }
};

navigator.mediaDevices.getUserMedia(constraints).then( ... )