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

Question

我制作了一个网络应用程序，可以让我从网络摄像头拍照。

应用程序应该如何工作：

✓从移动设备上的Chrome浏览器运行网络应用。

✓授予Web应用程序[访问摄像头]的权限。这应该让我可以根据需要访问前后摄像头。

✓相机开启并显示在

中

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

✓现在，我可以通过按下按钮从网络摄像头拍摄照片。每当我拍摄时，我都会在隐藏的画布上绘制它。

<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);
});}

我在画布上绘制Captured Image，然后将其添加到我需要进一步使用的图片数组中。

首先，我尝试使用here中的takePhoto()函数，但它根本不起作用。

我的代码有效，但在缩放图片和方向方面并不完整。

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

我认为我正在扭曲某些事情，但我只是不明白为什么一切都在 Android 上运行良好，而且它不在 Windows平板电脑上。

在这两款设备上，我使用的Chrome浏览器版本为58 ++。