Javascript 当从网络摄像机拍摄照片时，我的代码有时会拉伸或切断图片

我制作了一个网络应用程序，它应该允许我从网络摄像机上拍照

应用程序应如何工作：

✓ 从移动设备上的Chrome浏览器运行web应用程序

✓ 授予web应用程序[访问摄像头]的权限。这应该允许我访问的前面和后面的摄像头，因为我的愿望

✓ 摄像头启动，并显示在

<video id = 'camera' style="margin: 0 auto; width:320px;"></video>

我在画布上绘制

捕获的图像

，然后将其添加到需要进一步使用的图片数组中

首先，我尝试使用中的

takePhoto（）

函数，但根本不起作用

我的代码可以工作，但在缩放图片和方向时不能完全工作

✘ 如果我使用Window Tablet拍摄照片，则在纵向模式下拍摄的照片看起来很好，但水平方向的照片被切断

我想我是在胡编乱造，但我就是不明白为什么在Android上一切正常，而在Windows平板电脑上却不行

在这两台设备上，我都使用了相同版本58++的Chrome浏览器

<div><canvas id = 'c'class="hidden"></canvas></div>

grabFrame(vm) {
var imageCapture = new ImageCapture(window.stream.getVideoTracks()[0]);
var canvas = document.getElementById("c");
var orientation = window.screen.orientation.type;
if (orientation === "portrait-secondary" || orientation === "portrait-primary") {
  canvas.height = 640;
  canvas.width = 480;
}
else {
  canvas.height = 480;
  canvas.width = 640;
}
imageCapture.grabFrame(vm).then(function (imageBitmap) {
  // if this is a device running on windows touch device
  if ((navigator.userAgent.toLowerCase().indexOf("windows") > -1) &&
      (navigator.userAgent.toLowerCase().indexOf("touch") > -1)) {
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
  }
  else {
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
  }
  canvas.classList.remove('hidden');
  var img = canvas.toDataURL("image/png");
  vm.get('photos').pushObject(img);
  canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
});}